How to deploy MERN stack to Heroku

First we gonna create a mern app

  • put your react app in client folder(if you haven’t create react app)
  • create server.js and connect with db (like mongodb atlas)
  • create routes and port in server.js (express mongoose fast code)

Now we are going to prepare our app

  • prepare heroku port
let port = process.env.PORT;
if (port == null || port == "") {
port = 9000;
}
app.listen(port, () => {
console.log(`Server started on port`);
});
  • use react static file when process.env.NODE_ENV === ‘production’

we haven’t create build folder. In the next step write script in package.json to auto create build folder when deploy our app to heroku

const path = require('path');

if(process.env.NODE_ENV === 'production'){
app.use(express.static('client/build'));
})
}
  • to create auto build in react app
"scripts": {
"build": "cd client && npm run build",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-client && npm run build",

"start": "node server.js",
"server": "nodemon server.js",
"client": "cd client && npm start",
"dev": "concurrently \"npm run client\" \"npm run server\""
},

heroku-postbuild script will run install-client script (go to client and install the npm package that require) and will run build script (that script will go to client folder and create build folder in react app). Previous step is use the static file that is in the build folder.

  • add engine in server package.json

Check your node version with (node — version)

"engines": {
"node": "12.18.3"
},

Deploying your MERN app to heroku

  • go to your client folder and remove .git
  • git init
git init
git add .
git commit -m "first commit"
  • creating heroku git remote
heroku login
heroku create my-app
heroku git:remote -a my-app
  • create .gitignore file
/node_modules
npm-debug.log
.DS_Store
/*.env
  • run your app locally
heroku local

In deploy section of your heroku app, you will see deploy your application section

Now you are ready to deploy your app

git add .
git commit -m "second commit"
git push heroku master

--

--

--

Learning javascript and web-development

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Mixing React modules into a legacy application

How to Convert ENS Address to ETH Address in JS

Important Questions About JavaScript.

Paypal Checkout Client-Side Integration(Angular)

BBC-The world is in your hands

Closures made as easy as pie (Part 1 — understanding Lexical environment)

//platform.twitter.com/widgets.js from Twitter https://twitter.com/thepoolsideceo

Text Shadows Using Shine.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cho Zin Thet

Cho Zin Thet

Learning javascript and web-development

More from Medium

How to create a profitable Telegram bot

Building an Air Quality Index App using the OpenWeather API

Phoenix, from local to heroku in 11 steps

Steps to Deploy a NextJs and Flask on Heroku