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.

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 inside your client directory, this will generate a production build of your Vue app, the folder.

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

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

Now add the following code to

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 directory where our frontend code resides.

The next lines serve the request with the frontend code. since we use ‘*’, express serves every get request with the file from the 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 . (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 command and enter the credentials.

Now run the below command.

The above command will add a git remote Heroku

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

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

For pushing the application to Heroku run,

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 command or using the button in Heroku dashboard.

Thanks for reading. HAPPY DEPLOY 🎉🎉.

Node.js | Golang | Developer | amljs.me