My react application performs perfectly when run locally and is successfully deployed on heroku. However, upon clicking any link from the home page to another page, a blank page with 'not found' message appears. No other error messages are displayed.
The server-side package.json file is as follows:
{
"name": "portfolio-generator",
"version": "1.0.0",
...
}
Here's the client-side package.json:
{
"name": "portfolio-generator",
"version": "0.1.0",
...
}
server.js:
const express = require("express");
...
app.listen(PORT, () => console.log(`🌎 ==> API Server now listening on PORT ${PORT}!`));
I created a static.json file based on my research:
{
"root": "build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
The default route in routes/index.js on the server side:
....
module.exports = router;
In App.js (top component of react), react router is implemented like this:
...
Despite all efforts, I am unable to resolve the issue. The home page loads and refreshes but fails to redirect anywhere.
We discovered that the path to index.html was incorrect initially. It should be:
router.use("*", (req, res) => res.sendFile(path.join(__dirname, "../client/public/index.html")));
However, after rectifying the path, only a blank screen appears on the heroku page. I suspect the problem lies in how the routes are defined but am still unable to identify it.
My folder structure is as follows:
/projectname
/server.js
/package.json
...
/client
/package.json
/public
index.html
/src
App.js
index.js
...
/components
/pages
/controllers
/models
/routes
index.js
/api
index.js
After making critical changes in server.js, including adding the 'path' package and reordering the 'app.use(routes)' statement, the issue was resolved:
const path = require('path');
const express = require("express");
...
app.get("*", function (req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
...
Additionally, I removed the default react route reference in /routes/index.js