Deploying a MEVN Stack app in Heroku

In this story, we’re going to look at how to deploy a MEVN Stack application in Heroku. Here I’ll show deploying using Heroku CLI. You can also deploy your application from GitHub. I’m assuming you have a Heroku account and Heroku CLI installed in your system. If not, you can get the instructions to install Heroku CLI from here.

Image for post

There are two ways you can deploy your app,

  1. Deploy Frontend and backend separately, If your project is big. The frontend server will fetch the data from a remote API which is your backend deploy.
  2. Deploy Frontend and backend together.

In this story, I’ll show how to deploy frontend and backend code together. We will serve the frontend from the backend server. I hope that you’ve created your Vue app. Now generate a production build of your Vue app. Run npm run biuild inside your client directory, this will generate a production build of your Vue app, the dist folder.

Move the dist folder to the root folder. I have also moved all the folders from server to the root directory. Now the directory structure will look like this.

Image for post

Add client folder to .gitignore since we are not pushing it to Heroku. If dist folder is added, remove it from .gitignore .

Now add the following code to index.js

app.use(express.static(path.join(__dirname, "./dist")))app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, './dist', 'index.html'))
})

What the above code does is, we tell express to serve all the static files from the dist directory where our frontend code resides.

The next lines serve theGET request with the frontend code. since we use ‘*’, express serves every GET get request with the index.html file from the dist directory. You can also explicitly write different routes for your home route or dashboard route if you want.

Now our app is ready to be deployed. Make sure you have installed Heroku CLI.

Initialize an empty git repo using git init . (Skip this step if already a git repo). After committing the changes, we can deploy our app to Heroku.

If you are using Heroku CLI for the first time, log in using heroku login command and enter the credentials.

Now run the below command.

heroku create

The above command will add a git remote Heroku

Image for post

As you can see Heroku deploy the application using a random name. You can change it using the below command if you wish to.

heroku apps:rename newname

This command will update the name of your application to newname.

For pushing the application to Heroku run,

git push heroku master

This command will build and push your application to Heroku. If your application is built and pushed successfully you will get a deploy success response.

If you have any env variables or config vars (like MongoDB URI) you can add it from the settings section of the app or you can also add it using the CLI.

And that's it. we’ve deployed our application to Heroku. you can view your application running heroku open command or using the Open app button in Heroku dashboard.

Thanks for reading. HAPPY DEPLOY 🎉🎉.

Node.js ❤ | Golang | Developer 💻| Student 👨‍🎓 | amljs.me

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