How to route for a react-router app using express?

Question

So I have a backend running in expressjs and I have multiple routes on it. Now I just followed this tutorial to set up a RESTful api on express. Now I want to switch to full react on the frontend, so that I will have an api running in the backend to get things from the database and am thinking using fetch from react to get that data. I saw many people say that is the best way to do it. But now there is an issue, I am not sure how to route for this. I have react-router setup so I am assuming I would use that. But how can I serve these files to the client side? How can I make sure every route except /api routes just serve my js files? Like I have a built folder already with an index.html and main<hash>.js. I am running them easily but how can I intergrate them with express? I was not able to find any answers to this. How can I route for a reactjs app to be served using expressjs? and also I saw a tutorial telling me to use a * route but that means even my api routes will only point to that.

Answer 1

There are three ways basically to render an application. One is Server Side Rendering, the other one is Client Side rendering and the third one is Isomorphic rendering.

So if you are defining your routes in Nodejs and navigating the application through those routes than it will be entirely server side rendering.

I saw a tutorial telling me to use a * route but that means even my api routes will only point to that. ? How can I make sure every route except /api routes just serve my js files?

Regarding this what you can do is

server.get('/api', (req, res, next) => {
    //You can handle the request here
})  

server.get('*', (req, res, next) => {
    //You can handle the request here
})

You can define your route in this order.So by this way any call to the '/api' will be handled by the first route and all the other request will be handled by the second route.

Now I want to switch to full react on the frontend, so that I will have an api running in the backend to get things from the database and am thinking using fetch from react to get that data

Here you dont need this.It will be an client side rendering completely

    server.get('*', (req, res, next) => {
        //You can handle the request here
    })

For this you can create an react app from scratch or use some boilerplate (https://github.com/facebookincubator/create-react-app).

There you can define all the routing and simply call the url http://localhost/api/xxxx and get the data and you can use this data in the frontend.In this case there will be a Nodejs Server which will be serving the frontend and the expressjs server will he hosting the 'api' service to get data from.

I have react-router setup so I am assuming I would use that. But how can I serve these files to the client side?`

How can I route for a reactjs app to be served using expressjs?

The Reactjs app when compiled is a combination of static files comprising mainly of html, css, javascript. If you want your app to be served by your express.js server then you need to use isomorphic rendering. It is by far the best approach for rendering application as it is good for SEO and initial fast page load. It comes at the cost of a complicated setup. In this case, whenever the page refreshes or the first request comes, express will serve the first page (index.html) and index.html will contain the required static(bundled) js and css files for client side rendering. The first rendering will be done by the express server and the subsequent rendering will be done by browser itself.