117 lines
6.3 KiB
HTML
117 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en" data-content_root="../../">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Single-Page Applications — Flask Documentation (3.1.x)</title>
|
|
<link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=4f649999" />
|
|
<link rel="stylesheet" type="text/css" href="../../_static/flask.css?v=b87c8d14" />
|
|
<script src="../../_static/documentation_options.js?v=d71c4578"></script>
|
|
<script src="../../_static/doctools.js?v=9bcbadda"></script>
|
|
<script src="../../_static/sphinx_highlight.js?v=dc90522c"></script>
|
|
<script data-project="flask" data-version="3.1.x" src="../../_static/describe_version.js?v=fa7f30d0"></script>
|
|
<link rel="icon" href="../../_static/shortcut-icon.png"/>
|
|
<link rel="index" title="Index" href="../../genindex/" />
|
|
<link rel="search" title="Search" href="../../search/" />
|
|
<link rel="next" title="Security Considerations" href="../../web-security/" />
|
|
<link rel="prev" title="Subclassing Flask" href="../subclassing/" />
|
|
</head><body>
|
|
<div class="related" role="navigation" aria-label="Related">
|
|
<h3>Navigation</h3>
|
|
<ul>
|
|
<li class="right" style="margin-right: 10px">
|
|
<a href="../../genindex/" title="General Index"
|
|
accesskey="I">index</a></li>
|
|
<li class="right" >
|
|
<a href="../../py-modindex/" title="Python Module Index"
|
|
>modules</a> |</li>
|
|
<li class="right" >
|
|
<a href="../../web-security/" title="Security Considerations"
|
|
accesskey="N">next</a> |</li>
|
|
<li class="right" >
|
|
<a href="../subclassing/" title="Subclassing Flask"
|
|
accesskey="P">previous</a> |</li>
|
|
<li class="nav-item nav-item-0"><a href="../../">Flask Documentation (3.1.x)</a> »</li>
|
|
<li class="nav-item nav-item-1"><a href="../" accesskey="U">Patterns for Flask</a> »</li>
|
|
<li class="nav-item nav-item-this"><a href="">Single-Page Applications</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="document">
|
|
<div class="documentwrapper">
|
|
<div class="bodywrapper">
|
|
<div class="body" role="main">
|
|
|
|
<section id="single-page-applications">
|
|
<h1>Single-Page Applications<a class="headerlink" href="#single-page-applications" title="Link to this heading">¶</a></h1>
|
|
<p>Flask can be used to serve Single-Page Applications (SPA) by placing static
|
|
files produced by your frontend framework in a subfolder inside of your
|
|
project. You will also need to create a catch-all endpoint that routes all
|
|
requests to your SPA.</p>
|
|
<p>The following example demonstrates how to serve an SPA along with an API:</p>
|
|
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">flask</span> <span class="kn">import</span> <span class="n">Flask</span><span class="p">,</span> <span class="n">jsonify</span>
|
|
|
|
<span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="vm">__name__</span><span class="p">,</span> <span class="n">static_folder</span><span class="o">=</span><span class="s1">'app'</span><span class="p">,</span> <span class="n">static_url_path</span><span class="o">=</span><span class="s2">"/app"</span><span class="p">)</span>
|
|
|
|
|
|
<span class="nd">@app</span><span class="o">.</span><span class="n">route</span><span class="p">(</span><span class="s2">"/heartbeat"</span><span class="p">)</span>
|
|
<span class="k">def</span> <span class="nf">heartbeat</span><span class="p">():</span>
|
|
<span class="k">return</span> <span class="n">jsonify</span><span class="p">({</span><span class="s2">"status"</span><span class="p">:</span> <span class="s2">"healthy"</span><span class="p">})</span>
|
|
|
|
|
|
<span class="nd">@app</span><span class="o">.</span><span class="n">route</span><span class="p">(</span><span class="s1">'/'</span><span class="p">,</span> <span class="n">defaults</span><span class="o">=</span><span class="p">{</span><span class="s1">'path'</span><span class="p">:</span> <span class="s1">''</span><span class="p">})</span>
|
|
<span class="nd">@app</span><span class="o">.</span><span class="n">route</span><span class="p">(</span><span class="s1">'/<path:path>'</span><span class="p">)</span>
|
|
<span class="k">def</span> <span class="nf">catch_all</span><span class="p">(</span><span class="n">path</span><span class="p">):</span>
|
|
<span class="k">return</span> <span class="n">app</span><span class="o">.</span><span class="n">send_static_file</span><span class="p">(</span><span class="s2">"index.html"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<div class="clearer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span id="sidebar-top"></span>
|
|
<div class="sphinxsidebar" role="navigation" aria-label="Main">
|
|
<div class="sphinxsidebarwrapper">
|
|
|
|
|
|
<p class="logo"><a href="../../">
|
|
<img class="logo" src="../../_static/flask-vertical.png" alt="Logo of Flask"/>
|
|
</a></p>
|
|
|
|
<h3>Navigation</h3>
|
|
<ul>
|
|
<li><a href="../../">Overview</a>
|
|
<ul>
|
|
<li><a href="../">Patterns for Flask</a>
|
|
<ul>
|
|
<li>Previous: <a href="../subclassing/" title="previous chapter">Subclassing Flask</a>
|
|
<li>Next: <a href="../../web-security/" title="next chapter">Security Considerations</a></ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<search id="searchbox" style="display: none" role="search">
|
|
<h3 id="searchlabel">Quick search</h3>
|
|
<div class="searchformwrapper">
|
|
<form class="search" action="../../search/" method="get">
|
|
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
|
|
<input type="submit" value="Go" />
|
|
</form>
|
|
</div>
|
|
</search>
|
|
<script>document.getElementById('searchbox').style.display = "block"</script><div id="ethical-ad-placement"></div>
|
|
</div>
|
|
</div>
|
|
<div class="clearer"></div>
|
|
</div>
|
|
<div class="footer" role="contentinfo">
|
|
© Copyright 2010 Pallets.
|
|
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 8.1.3.
|
|
</div>
|
|
</body>
|
|
</html>
|