title: Webpack failed to load resource. bundle.js 404
body: <p>A little background. I've been following this tutorial: <a href="https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd" rel="nofollow noreferrer">https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd</a> and have been troubleshooting the issue in the title for a while now. </p>
  
  <p>The code compiles and the server runs however there is a 404 error looking for bundle.js. </p>
  
  <p>My folder structure is:</p>
  
  <pre><code>.
  ├── 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
  </code></pre>
  
  <p>My webpack.config.js is:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>Lastly, my index.js is:</p>
  
  <pre><code>&lt;!— index.html —&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;!-- Latest compiled and minified bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="public/css/main.css"&gt;
      &lt;title&gt;Creating a Full-Stack Python Application with Flask, NPM, React.js and Webpack&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="content" /&gt;
      &lt;script src="public/bundle.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I run "npm run watch" and receive a 404 error for its inability to find bundle.js. The url path it looks for is <a href="https://www.mywebsitehere.com/public/bundle.js" rel="nofollow noreferrer">https://www.mywebsitehere.com/public/bundle.js</a>. </p>
  
  <p>I believe I've set flask to look for the correct paths in my web-app/templates/<strong>init</strong>.py file as follows: </p>
  
  <pre><code>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)
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks!</p>