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?

Answer 1

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 (eg with Next.js .