title: Adding React app to Flask under URL prefix
body: <p>I have a React app that I want to reside on a specific url route prefix of a Flask app. </p>
  
  <p>Examples:</p>
  
  <ul>
  <li><p><code>host.com/</code> is the home page of the Flask app. It's <code>index.html</code> file in the <code>templates</code> directory (using standard Flask conventions here).</p></li>
  <li><p><code>host.com/about</code> is another page of the Flask app. It's some other file in the same <code>templates</code> directory.</p></li>
  <li><p><code>host.com/search</code> is the root of the React app. I want anything with <code>/search</code> prefix to reference some part of the React app.</p></li>
  <li><p><code>host.com/search/123</code> is some page of the React app (following the above logic). I am using <code>react-router-dom</code> for routing inside React app.</p></li>
  </ul>
  
  <p>I built the React app with <code>npm run build</code> and then tried serving just the React app with Flask like in <a href="https://stackoverflow.com/questions/44209978/serving-a-create-react-app-with-flask/45634550">this example</a>. Everything worked fine.</p>
  
  <p>Then I attempted the following to put React at specific url prefix of the Flask app:</p>
  
  <pre><code># file app.py
  
  import os
  from flask import Flask, render_template
  from .search_blueprint import search_blueprint
  
  app = Flask(__name__)
  app.register_blueprint(search_blueprint, url_prefix='/search')
  
  @app.route('/')
  def index():
      return render_template('index.html')
  
  if __name__ == '__main__':
      app.run(use_reloader=True, port=5000, threaded=True)
  </code></pre>
  
  <p>And here are the contents of the <code>search_blueprint.py</code> file (very similar to the answer to the question that I <a href="https://stackoverflow.com/questions/44209978/serving-a-create-react-app-with-flask/45634550">already mentioned</a>:</p>
  
  <pre><code># file search_blueprint.py
  
  from flask import Blueprint, send_from_directory
  import os
  
  build_dir = os.path.abspath('./app/static/build')
  search_blueprint = Blueprint('search', __name__, static_folder=build_dir)
  
  # Serve React App
  @search_blueprint.route('/', defaults={'path': ''})
  @search_blueprint.route('/&lt;path:path&gt;')
  def serve(path):
      if(path == ""):
          return send_from_directory(build_dir, 'index.html')
      else:
          if(os.path.exists(os.path.join(build_dir, path))):
              return send_from_directory(build_dir, path)
          else:
              return send_from_directory(build_dir, 'index.html')
  </code></pre>
  
  <p>The Flask <code>index.html</code> page that is referenced in <code>app.py</code> loads fine when I go to <code>host.com/</code>. When I go to <code>host.com/search</code> I get a blank screen (meaning no errors from Flask). In the console there's an error message like this:</p>
  
  <p><code>Loading failed for the &lt;script&gt; with source “http://host.com/static/js/main.ca656ef1.js”.</code></p>
  
  <p>Anyone knows why I can't get this React app work at a specified url prefix?</p>
  
  <p>Here's the directory layout relevant to the question:</p>
  
  <pre><code>app
  ├───static
  │    └───build
  ├───templates
  │    └───index.html
  ├───app.py
  └───search_blueprint.py
  </code></pre>
  
  <h3>Edit</h3>
  
  <p>Adding contents of <code>build</code> directory:</p>
  
  <pre><code>build
  │   asset-manifest.json
  │   favicon.ico
  │   index.html
  │   manifest.json
  │   service-worker.js
  │
  └───static
      ├───css
      │       main.d293ea0a.css
      │       main.d293ea0a.css.map
      │
      ├───js
      │       main.ca656ef1.js
      │       main.ca656ef1.js.map
      │
      └───media
              logo.5d5d9eef.svg
  </code></pre>