blank page when deploying to heroku MERN

user_15978064 0
Viewed 576

I'm struggling with deploying a web app to Heroku. Everything seems fine, there are not errors shown, but I only get a blank page.

I've been searching around the internet and tried everything I saw but can't seem to find the answer.

server.js:

app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('*', (req, res) =>
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
);

folders:

enter image description here

I don't know what else to attach, just tell me and I'll provide it. Thank you very very much in advance, this is really really important to me

mern heroku deployment
2 Answers

Generally,

If you want to deploy your entire MERN app to Heroku, first you add a heroku-postbuild script to package.json

In your case, since you have directories frontend, backend containing the client and server respectively.

Add these scripts to your package.json, these scripts will build your react frontend after the push to heroku.

...
"scripts": {
    "install-client":"cd frontend && npm install"
    "heroku-postbuild": "npm run install-client && npm run build"
}
...

Now in your server.js file,

...

const path = require('path');

app.use(express.static(path.join(__dirname, '../frontend/build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
});

...

Now, if you need to use Client-Side Routing (React Router) update / to /* as shown below,

app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
 });

I think this should resolve the issue.

Refer: https://create-react-app.dev/docs/deployment/

user_124086230

Are you trying to deploy both the backend and frontend together from heroku?

In the past I've used heroku for my backend and used netlify for deploying my frontend

user_109341080
Related