Search code examples
javascriptreactjsexpresshttp-status-code-403

Internal server error 403 on deploying react app served via expressjs


I am trying to serve a build react application using expressjs. the react application is built and the index.html is served from my expressjs using:

app.use('/', express.static('reactapp/build'))

The application is simple. it contains a number of cards which when pressing navigates to another page changing the route. Before clicking, it is suppose localhost:3000/lists and after clicking any cards, it routes to localhosts/lists/1, 1 being an id. Now, when i try to refresh the page after pressing the any one of the cards, i get "no handler found for the path"(because it is client side url i suppose and isnot handled by express). the last app.use gets triggered.

app.use((req, res) => {
            res.status(404).json({message: `No handler for ${req.url}`, requestHost: req.baseUrl})
        })

therefore, what i did was, i sent the index.html inside this middleware part to fix my issue.

app.use((req, res) => {
                res.sendFile(path.join(__dirname,"..\\reactapp\\build","index.html"));
            })

it solved the problem locally but after deploying i get the "internal server error of status code 403". i am not knowing what the problem is. according to a site: The 403 (Forbidden) status code indicates that the server understood the request but refuses to authorize it...If authentication credentials were provided in the request, the server considers them insufficient to grant access.

Could someone help me out? i am not much familiar with expressjs so i wanted some help on what might be the reason.


Solution

  • res.sendFile(path.join(__dirname,"..\reactapp\build","index.html")); the way path is setup, doesnot work for linux machines. that might be the reason.