Make a multi-page app with create-react-app and express.js-CodePudding

I'm mostly comfortable with doing back-end work. I used to do a lot of react but I haven't touched it in a year, maybe more. Now recently I've started a project that needs me to dust off my rusty front-end programming skills.

I know I've done this before but I don't quite remember how I made multiple pages. I know that I followed this tutorial: https://dev.to/loujaybee/using-create-react-app-with-express and basically what I did was:

run create-react-app & install express.js
Do some front end work and then use npm run build to build it.
Proceed to serve the index.html file from the react build in my server.js '/' node.

But I completely forgot what I have to do if I wanna work with multiple pages. So I guess that's my question: if I wanna serve a different file for another route (let's take '/browse' as an example), how would I go about doing that?

Thanks in advance for any help!

CodePudding user response：

use react-router on front-end to route diffrent pages

<BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="about" element={<About/>} />
        <Route path="contact" element={<Contact/>} />
      </Route>
    </Routes>
  </BrowserRouter>

Read full docs of react-router here

CodePudding user response：

I read through that tutorial, and maybe it would help you to spell out a bit more whats going on.

Part 1: Making and serving a website

Consider your website created with create-react-app as separated from your server created with express.

Create-react-app will bootstrap a react project for you. There is a dev-server build in that you can use as you make progress developing your components. This dev-server will attempt to serve your website-in-development from localhost:3000.

When you run the script "build", a bundler called webpack which is also included when bootstrapping with create-react-app, will take all your components and things and make a set of static files. These files, including "index.html" and some javascript files, make up your website. When people talk about "bundling" and "building" in the context of using a "bundler" like webpack or rollup, they mean the same thing: Your react files will be squished down to just one (or a few), and this will contain all of your stuff.

Express is a library that help you make servers with node.js. The server you make can listen on a specific port and route (say, localhost:8080), and serve up your now build website-files when requested.

Now, maybe your website will need resources, like a list of contacts or whatever (like, some kind of JSON or whatever), and will make a request for them. If you plan to provide them through your express server (on port 8080 in our example), they will not come from the same port as the dev-server is running on (port 3000 in our example). This will cause CORS errors, which might frustrate you to no end. Create-react-app allows you to define a "proxy" in package.json to allow for those resources to be requested, also while using the dev-server.

So after you have bundled your website, it can be served as a static resource from whichever route you choose by your express server. The express server can also provide a resource on a different route, and your website can consume it by using some request-making mechanism such as fetch. There are a lot of different clients for such requests other that window.fetch, like axios, and you can shop around to find one that you like.

Part 2: Different pages

There are several ways to achieve this. In ye olden days, the only way was to have different html-files for every page, and have the browser request them as a completely new web page. The authors of those htmls had to make sure that each had a similar look and feel.

You can still do this with react. Just start more than one create-react-app project, build them all and let your server serve them on different routes.

But there is an easier way! React, and create-react-app, is great for so-called "single-page applications". You can handle all your routes WITHIN your react application. The URL will change and everything, but you stay on the same page. Only thing that changes is what components are being rendered. If you define the routes "/home", "/contact" and "about" in your react app, you can decide what components should be rendered there. Basically, it turns into a switch/case statement. If you want to, you can have some things be rendered outside of this statement, such as a header. Like suggested above, react-router is a very common choice for this. If you check the react docs under code-splitting and react.lazy, you will find out more about how to optimize performance for this type of thing.

Another alternative is to use next.js instead of create-react-app to bootstrap your project. This will mean that the setup is slightly different than what the tutorial suggested, but is still totally easy to follow. Here, different pages are defined under a "pages" folder, and next.js will render things server-side.

Notice that a "single-page application" will still serve from a single route on your server, different pages and all.

There are many other alternatives, and if you feel like tinkering I can warmly suggest looking into webpacks module federation plugin, it is a lot of fun!