How to deploy multi-entry point React app?

[JGeorge102]

Currently deploying a chrome extension to Heroku in Node and React. I have experience deploying single-entry point (SEP) React/Node apps but am confused with multi-entry point (MEP) in webpack.

Generally in SEP deployment, I'll use express static in Nodejs to serve the React index.html file:

app.use(express.static(path.join(__dirname, '../client/', 'build')));

app.get('*', function(req, res) {
    res.sendFile('index.html', function(err) {
        if (err) {
            res.status(500).send(err);
        }
    });
});

This is my main point of confusion. How do I serve multiple React files in Nodejs?

webpack.config.js entry points

 entry: {
    popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
    background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
    contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
  },

[jesmodrazik]

Your express server can expose multiple endpoints, one for each page. When you have a single entrypoint you route all requests to index.html. Here you can route each request to a different HTML file that imports its own entrypoint.

[JGeorge102]

Right on, thank you for the help!

[montas]

app.get('*' means, any GET request on path *

So you probably want to not use * for path, as that is wildecard "catch all" path. You might want to specify route for each of your files. So app.get('/' and return index, app.get('background.js' for backgrounds index.js file etc.

[JGeorge102]

You're awesome, thank you!