Express is serving up index.html instead of my Webpack bundle. Is the issue with my config file?

user_7128975 0
Viewed 249

My website doesn't load because the request for bundle.js instead returns the index.html file.

This project is from a few years ago and at the time it worked fine, but I'm trying to get it up and running again and I'm not sure why this is happening now. If anyone can help, I'd really appreciate it!

File structure:

- src
  - app
  - db
  - public
     - assets (folder)
     - styles (folder)
     - index.html
  - server
     - auth (folder)
     - routers (folder)
     - server.js
- webpack.config.js

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/app', 'client.jsx'),
  output: {
    path: path.resolve(__dirname, 'src/public/build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src/app'),
        loader: 'babel-loader'
      }
    ]
  },
  devtool: 'source-map'
};

From index.html:

<body>
    <div id="app"></div>
    <!-- load the app scripts -->
    <script src="/build/bundle.js"></script>
</body>

From server.js:

app.use(express.static(path.resolve(__dirname, '../public')));

app.use('*', function (request, response){
  response.sendFile(path.resolve(__dirname, '../public', 'index.html'))
})

From package.json:

"scripts": {
    "start": "webpack --watch | nodemon --ignore node_modules ./src/server/server.js --exec babel-node"
},

From .babaelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "airbnb"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
      "react-html-attrs",
      "transform-class-properties",
  ]
}
webpack express node.js javascript
1 Answers

[reputation is too low to comment]

Everything looks kosher, so I agree with @eol the first step is to actually transpile and confirm the build is working as intended.

As a semi-related aside, I believe you should move the path resolution in the main request handler to be a constant that is only invoked and resolved once... probably a minimal gain, but as it stands every request has the same path resolved.

const indexFile = path.resolve(__dirname, '../public', 'index.html');
app.use('*', function (request, response) { response.sendFile(indexFile); });

(This isn't relevant for the first handler, as the resolution will only occur once when the static method is invoked.)

Regarding the start script: I don't think you want to be piping the output from the webpack --watch command to nodemon? You probably want to push the webpack command to run in the background and then execute nodemon. I don't even think webpack watch will actually exit so nodemon would never be called?

Try webpack --watch & nodemon ....

I don't see anything that jumps out as to why the build wouldn't be working besides that... does it compile if you just run webpack in your terminal in the root directory?

user_97780710
Related