CODEWITHSUNDEEP
node.jsreactjs
SignalProcessingJobs
SignalProcessingJobs

Reputation: 111

react and node js serving from single port endpoint not found

Im making a simple app with react and node. On the react side I create a note with a unique-id and then the note can be found at mypage.com/unique-id using react-router-dom and useEffect in the loaded component to get the data from the database. This works perfect as long as my frontend and backend are being served from different ports. When I build the react app and place it in my nodejs app the app will work fine, until I reload mypage.com/unique-id and then im hit with a 404 on my server side. I have a bit of a grasp of what is going on - everything is being served from localhost:3001/ so when i reload localhost:3001/unique-id my server is looking for a route for that, which doesnt exist on my server side. I'm not sure how to connect the dots to serve my front end page at localhost:3001/unique-id with data from the server for that unique id. If i makea route on my server side it would just send back the raw data without serving the page that is suppose ot be at localhost:3001/unique-id

Upvotes: 0

Views: 65

Answers (1)

Piyush Dubey
Piyush Dubey

Reputation: 306

I had faced the same issue and it got resolved by adding * into the route

before route

app.get("/", (req, res) => {
    res.header("Cache-Control", "max-age=-1");
    res.header("Expires", "-1");
    res.header("Pragma", "no-cache");
    res.sendFile(path.join(__dirname, "build/index.html"));
});

after

app.get("/*", (req, res) => {
    res.header("Cache-Control", "max-age=-1");
    res.header("Expires", "-1");
    res.header("Pragma", "no-cache");
    res.sendFile(path.join(__dirname, "build/index.html"));
});

Upvotes: 2

Related Questions