Serving create-react-app build files on express server

Question

I want to serve build files of my react app on my other express application. So I copied all the static files inside build folder to public folder inside my express application and I used.

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

app.get("/",(req,res)=>{
    res.send()}
    )

app.get("/differentRoute",(req,res)=>{
    res.send()}
    )

app.listen(4000)

When I make a get request on http://localhost:4000/ my react page loads perfectly, however when I make the same request on http://localhost:4000/differentRoute, nothing loads, can someone explain me how it works?

Quentin Quentin · Accepted Answer · 2020-05-03T17:19:18

When you request / it finds the index.html file in the public directory, and serves it up using the static handler.

Nothing get ever get to the explicit handler for / since the static route always catches it first.

When you request /differentRoute, there is no matching file in the public directory so the explicit route for that is triggered. You call res.send() with no arguments, which doesn't make sense.

If you want to have URL based routing and don't want to use server side rendering, then use the HashRouter.

If you want to have real paths for the different pages in the app, then use server side rendering (e.g. with Next.js.

Serving create-react-app build files on express server

1 Answers