Deploy MERN app into Heroku with Heroku CLI

Prepare the MERN app for deployment in Heroku:

To deploy a MERN app, we have to change some code in our project. Firstly, we have to go to the ".env" file and change  NODE_ENV from development to production.

NODE_ENV = production

Now go to the server.js file in the backend, and add the following code ...

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join('./', '/frontend/build')));
  app.get('*', (req, res) =>
  
res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'))
  );
} else {
app.get('/', (req, res) => {
res.send('API is running...');
});
}

If __dirname creates a problem for es6, then add the following code just above the if condition.

const __dirname = path.resolve();

Add the following code just before the server listens...

const PORT = process.env.PORT || 5000;

In the package.json file in the root directory, remove >= if exists.

"engines": {
"node": ">=14.17.5" // to 14.17.5
  }, 

Inside the script tag of the package.json file, add the following code ...

"server": "node backend/server",
"client": "npm start --prefix frontend",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false  npm install --prefix frontend && npm run build --prefix frontend"

Create a file named "Procfile" in the root directory and add the following code...

web: npm start

Add the following code in the .gitignore file ...

/frontend/node_modules
/frontend/build

Remove the .git file for avoiding any conflict with Heroku.

Testing the app:

Test the app whether it works or not. For this, firstly create a build directory with the command in the frontend directory like ...

npm run build

After creating the build directory in the frontend, start the server with the following command from the root directory or backend directory...

npm run server

Now go to the browser and type the URL like http://localhost:5000. If the website opens, then the build has been successfully created.

After showing the success of the build, then delete the build folder and start the deployment in Heroku.

Deployment in Heroku:

For avoiding any problem with Heroku, remove the Heroku first. Run the command from the frontend directory

git remote rm heroku

Login to Heroku with the following code from the frontend directory ...

heroku login

After pressing the enter button, a login screen will show instantly same as below, and click on the login button...

Create a Heroku app through the following code. Run the code from the frontend directory...

heroku create heroku_app_name

Initialize a git repository in a new or an existing directory, and add the following codes.

// change directory to root directory or backend directory
cd project_folder/
// initialize the git
git init
// set git with heroku app created in the heroku website
// i,e; we command heroku to create a connction with git and heroku
// here -a flag is the shorthand of app
heroku git:remote -a heroku_app_name

To deploy the application, add the following codes...

git add .
git commit -m "Deployment to heroku app"
git push heroku master // or write main if your branch name

Finally, push the app to Heroku...
To open a Heroku app, go to the Heroku page and click on the Heroku app and click on the open app button located top right corner of the page. Otherwise, use the following code...

heroku open

After inserting the above code, it may show an error like this...

Now go to the terminal and paste the code to see where the errors happen...

heroku logs --tail

Here, you will be able to see that the errors occur because of not pushing the ".env" file. To solve the problems, go to the settings of our Heroku app. Go to the section of "Config Vars" and click on the "Reveal Config Vars" button. 

Set the environment variables here same as the picture below...

Now go to the Heroku app and refresh the app. You will definitely be able to see the MERN app in the browser. 

That's it. Happy coding!