React with Node — How To Get Multiple Page Website?

Question

Quite a simple problem really. I'm trying to add a 2nd checkout page to my React and Node Website.

I thought it might be as simple as adding another 'checkout' Route to the Browser Router (as shown below)

<BrowserRouter>
   <div>
     <Route exact path="/" component={App}/>
     <Route exact path="/checkout" component={Checkout} />
   </div>
 </BrowserRouter>

but I get the error "Cannot GET /checkout", implying that I have to do something on the Node Side as well? This is my current index.js (node)

if (process.env.NODE_ENV !== 'production') {
  const webpackMiddleware = require('webpack-dev-middleware');
  const webpack = require('webpack');
  const webpackConfig = require('./client/webpack.config.js');
  app.use(webpackMiddleware(webpack(webpackConfig)));
} else {
  app.use("/", expressStaticGzip("client/dist"));
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/dist/index.html'));
  });
}

Currently, I have my own custom web pack config on the react side which bundles js and CSS files which are then served on the node side.

Thank You for any help!

Answer 1

Most likely you need to update app.use(webpackMiddleware(webpack(webpackConfig))); with something like this:

app.use(webpackMiddleware(webpack(webpackConfig), {
  publicPath: 'http://localhost:3000/dist',
  index: 'valid/path/to/index.html'
}));

However, the problem might be in ./client/webpack.config.js

If you'd like to see how to put it all together with HMR, SSR and Dev/Prod environments you can check react-saga-universal repo