Deploy a MEVN Stack app in Heroku

Deploying an app in Heroku is super easy. In this post, we'll look at how to deploy a MEVN(MongoDB, Express.js, Vue.js, Node.js) app in Heroku. There are many ways to deploy an app in Heroku like CLI, GitHub etc. Here I'm going to deploying an using the Heroku CLI. I'm assuming that you're having a Heroku account and Heroku CLI is installed in your system. If not you can get the instructions to install Heroku CLI here.

There are two ways that you can deploy your app,

• Deploy Fronted and Backend separately. if your app is large, this will be a good solution. The frontend server will fetch the data from a remote API which is your backend deploy.
• Deploy frontend and backend together.

In this post, I'll show how deploying frontend and backend together. We'll server the frontend from the backend server.
I hope that you have created your Vue app. now create a production build of your app by running,

npm run build

This will create a production build of your app, that is the dist folder.

Move the dist folder to the root directory. I have also moved the files from the server folder (folder containing files for node.js server) to the root folder. Now the directory structure will look like this.

Add the 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 basically does is that we tell express to serve all static files from the dist directory where our frontend code resides.

In the next line, the server receives the GET request and it will serve the frontend code. since we're using *, express server every GET request with the index.html file from the dist directory. you can also specify a different route for your home or dashboard if you need.

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

Initialize an empty git repo using git init. (skip this step if its already a git repo). Commit the changes before we can deploy our app to Heroku.

If you are using Heroku CLI 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.

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

heroku apps:rename newname

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

For pushing the application to Heroku run,

git push heroku master

This command will build our application and push to Heroku. If your application is successfully deployed, you will bet a build success response.

If you have any env variables or config vars (like MongoDB URI or BASE_URL etc) 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.

HAPPY DEPLOY 🎉🎉...