Source:  Twitter logo

A little background. I've been following this tutorial: https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd and have been troubleshooting the issue in the title for a while now.

The code compiles and the server runs however there is a 404 error looking for bundle.js.

My folder structure is:

.
├── web-app
    ├── configurations.py
    ├── __init__.py
    ├── README.md
    ├── run.py
    └── templates
        ├── hello
        │   ├── __init__.py
        │   └── views.py
        ├── __init__.py
        ├── public
        │   ├── css
        │   ├── fonts
        │   ├── images
        │   └── js
        └── static
            ├── index.html
            ├── __init__.py
            ├── js
               ├── components
               ├── index.jsx
               └── routes.js

My webpack.config.js is:

var path = require('path')
const webpack = require('webpack');
const resolve = require('path').resolve;
const config = {
    devtool: 'eval-source-map',
    entry: __dirname + '/js/index.jsx',
    output:{
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js','.jsx','.css']
    },
    module: {
        rules: [
              {
                  test: /\.jsx?/,
                  loader: 'babel-loader',
                  exclude: /node_modules/,
                  query: {
                      presets: ['react', 'es2015']
                  }
              },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules'
            }]
    }
};
module.exports = config;

Lastly, my index.js is:

<!— index.html —>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/main.css">
    <title>Creating a Full-Stack Python Application with Flask, NPM, React.js and Webpack</title>
  </head>
  <body>
    <div id="content" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

I run "npm run watch" and receive a 404 error for its inability to find bundle.js. The url path it looks for is https://www.mywebsitehere.com/public/bundle.js.

I believe I've set flask to look for the correct paths in my web-app/templates/init.py file as follows:

from flask import Flask

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

from templates.hello.views import hello_blueprint
# register the blueprints
app.register_blueprint(hello_blueprint)

I know this is a lot of code, but after a good amount of research and troubleshooting, I remain at square one. Any help or guidance will be much appreciated.

Thanks!

In your index.html, the script's src points to public/bundle.js, but your webpack config's output is to (dir containing webpack config)/dist/bundle.js. Your folder structure doesn't show where the webpack config is, but you want to make sure the config's output and the html script's src attribute are pointing to the same path.

2 users liked answer #0dislike answer #02
helloitsjoe profile pic
helloitsjoe

Update after a year. I figured this out rather quickly and created a Flask/React boilerplate using Webpack and Heroku. This really isn't an advertisement, but here is the repo in case anyone has a similar issue:

https://github.com/ranstotz/flask-react-boilerplate

0 users liked answer #1dislike answer #10
R. Anstotz profile pic
R. Anstotz

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).