Tutorial: How to use React with Express & How to Make Multi-Page Apps with React

1

I just learned React and it went well on the docs/tutorial. I had 2 problems:

  1. React seemed to have its own server. I wasn’t sure how to run my React stuff on an Express/Node server.

  2. React seemed designed for single-page apps. The docs didn’t make it clear how to develop multiple pages.

I learned how to solve both of these issues but it took a ton of googling around, piecing together information.

Here is the video I made on the solutions.

Very quickly in text, the answers are as follows:

To make multi-page websites, you would use multiple React apps. Using multiple React apps is common, it’s not hacky. Sometimes people even have multiple apps on the same page.

To use React with Express, you run

npm run build

in the root directory of each React app. This will create a folder called ‘build’ and convert all your JSX etc into static files in ‘build’ that Express can use. You point express to these static assets in your Express index.js using:

app.use('/', express.static('apps/myapp1/build'))

You need one of those for every build folder/app/page. Then you can use your Node server like normal. One must-do is to put “homepage”:"/appurl" in your package.json for each React app before you build, where “:/appurl” is the URL (page) where that app will be accessed. Have to do this or it wont work (although an exception seems to be that it works without it on the root directory only “/”). Run the build every time you want to test your changes.

Check out the video if you are having this problem, it’s short and easy.

1 Like