Deploy a MEVN Stack app in Heroku
Published: 2020-11-29 15:30:43

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](https://devcenter.heroku.com/articles/heroku-cli).

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/it3ymxmfhtvaxfxtpya6.png)

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](https://devcenter.heroku.com/articles/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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/js8tjf66nckgwkh9q1q9.png)

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](https://devcenter.heroku.com/articles/config-vars).

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 🎉🎉...