Dewald Els

Posted on May 20, 2021

Heroku: Easily Deploy your Vue applications

#vue #heroku #javascript #devops

📝 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:

brew tap heroku/brew && brew install heroku

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

Homebrew install: Installing Homebrew

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

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:

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

Verify installation

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

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.

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

static.json

Step 2

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

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.

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.

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.

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:

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

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

🤓 Thanks for reading! 🙏