CODEWITHSUNDEEP
herokudeploymentmern
pop
pop

Reputation: 257

blank page when deploying to heroku MERN

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

Upvotes: 2

Views: 781

Answers (2)

Jagan Kaartik
Jagan Kaartik

Reputation: 590

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/

Upvotes: 2

Ryan JT
Ryan JT

Reputation: 78

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

Upvotes: 0

Related Questions