Navigate a React App link to Express server dynamically

3
votes

I am trying to navigate a front end link on React JS app to an Express server.

Example

<a href="/pages">Pages</a>

In the Express server, I wrote this piece of code

app.get('/pages', (req, res) => {
    res.send('Pages');
});

I have also updated my front end package.json file like so:

"proxy": {
   "/pages" : {
      "target" : "http://localhost:5000"
   }
}

My React App is running on port 3000 and Express server is running on port 5000. However, when I click on the link Pages nothing happens. I have to explicitly change the front end link like so to make it work:

<a href="http://localhost:5000/pages">Pages</a>

Is there any way how I could dynamically connect my React App with my Express server without having to specify http://localhost:5000 in all the links everytime?

2
javascriptreactjsexpressnpmmern
make express server serve frontend on the same port - dfsq

2 Answers

3
votes

Solved! My package.json wasn't updated because of hot reloading. I had to kill the existing webpack server and run it again to make it work. In future, if anyone is stuck around with this situation, simply make sure you update your package.json file like so:

"proxy": {
   "/pathname" : {
       "target" : "http://yourserveraddress"
   }
 }
0
votes

I think it has to be

"proxy": {
  "/pages" : {
    "target" : "http://localhost",
    "port" : 5000
  }
}