Heroku: Easily Deploy your Vue applications
Tags: vue, heroku, javascript, devops
Published: 2021-05-20 16:04:23

## 📝 Preparation

For all the steps below, it is required that you have installed the HerokuCLI on your computer. It also assumes you have Node.js and npm already installed.


### Install Heroku CLI on macOS

If you are running Homebrew on your Mac, you can simply run the following command:

```bash
brew tap heroku/brew && brew install heroku
```

If you are not using Homebrew, I would recommend installing it.

#### Homebrew install: [Installing Homebrew](https://brew.sh)

> 🚫 If you prefer **not** to use Homebrew, please consult the official documentation for other options. (Link provided below)

<br /><br />

### Install Heroku CLI on Windows

Heroku provides an installer for Windows 64 and 32 bit. You can find it from the official documentation link below.

### Install Heroku CLI on Linux

Heroku recommends using the official snap to install the CLI:

```bash
sudo snap install --classic heroku
```

If you want to read more about the installation and other options, feel free to take a look at the official documentation.

[Official Guide for installing Heroku](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)

### Verify installation

You may verify that the CLI was successfully installed by running the version command:

```bash
heroku --version
```

If you can see a version printed out in the terminal, you have successfully installed the Heroku CLI.

----

## 1. Deploy Vue to Heroku

Vue is incredibly simple to deploy to Heroku. We can deploy an app in 3 easy steps!

### Step 1

Create a new file and call it `static.json` in the root of your Vue.js project.

```json
{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}
```
<figcaption><center>static.json</center></figcaption>

----

### Step 2

Add the static.json to the git repository. Also ensure that all your other files have also been added.

```bash
git add .
git commit -m "Create static.json for Heroku deployment"
```

> 👏 Even if you don't have your app on a remote repository, the Vue app is initialised with an empty local repository.

----

### Step 3

The last step is to create a new Heroku app and push to the heroku repository. 

> ⚠️ Remember to **run each line individually**, don't copy-paste all the lines at one time into the terminal.

#### 👩‍💻 Login and Create app
First login, and create your application. You can replace `your-app-name-here` with anything that is unique on the herokuapp.com domain. 

```bash
heroku login
heroku create your-app-name-here 
```
> **⚠️ Remember** replace `you-app-name-here` with a unique name for your heroku app. It will deploy to `your-app-name.herokuapps.com`

#### 🧱 Add Heroku Buildpacks

Next add the required Heroku buildpacks to your newly created application.

```bash
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
```

#### 🏁 Deploy app
Lastly, you can push to the Heroku repository's master branch to deploy your code into the new Heroku app.

```bash
git push heroku master
```

You should see your Vue app being pushed to the Heroku repository and built on the Heroku servers. Once this is done, it will print out a success message with the URL to where the app has been deployed.

You can easily open the app running:

```bash
heroku open
```

----

#### ⚠️ Vue Router "Gotcha"

Be careful when deploying apps that do not use a proper server. You might run into 404 problems when using the `history` mode. This is the case if you do not have the ability to configure your server to route traffic via the index file.

For more information about VueRouter's history mode, please consult the official documentation: [VueRouter Deployment Documentation](https://router.vuejs.org/guide/essentials/history-mode.html)

----

Drop some comments if something wasn't clear enough, or if you experience any problems. You can check the official Vue documentation for more Deployment options:

[Vue.js Deployment Documentation](https://cli.vuejs.org/guide/deployment.html)

----

<center>🤓 Thanks for reading! 🙏</center>