Adding Flask server to create-react-app default app, 404 on /dist/bundle.js

app = Flask(__name__, static_folder='..static/dist', template_folder='../static')

The above is probably confusing things, and ..static is not the same as ../static

EDIT: Just had a look at the tutorial you linked. I'll leave the answer I wrote previousy below, but fixing the above typo to static_folder='../static/distmay be a quicker fix for your issue.

Personally, I'd simplify this by doing the following:

• Note that your server.py sits in the server directory
• Create 2 subdirectories in this server directory: templates and static
• Move index.html to server/templates
• Move all the static files, including the dist subdirectory to server/static

Now the directory structure should look more like:

SimpleApp└── server    ├── __init__.py    ├── server.py    ├── static    │   └── dist    │       ├── bundle.js    │       └── styles.css    └── templates        └── index.html

Then just initialize the app with:

app = Flask(__name__)

No need to define the static & template directories here, as you've laid it out in the default structure which Flask expects.

Try to hit: http://localhost:5000/static/dist/bundle.js in the browser and confirm this loads correctly.

Then update the template to load these files from the correct location, using url_for in the template:

<link rel="stylesheet" href="{{ url_for('static', filename='dist/styles.css') }}">

and

<script type="text/javascript" src="{{ url_for('static', filename='dist/bundle.js') }}">

If you regenerate bundle.js at a later point, you may need to also tweak the webpack config to place it in the new location.