🚀 Deploy a Nuxt.js app on Heroku

4 min readDec 2, 2018

In this article, we will see how to deploy a nuxt.js app on Heroku.

First, we will prepare our machine by installing Homebrew, Git and Heroku CLI. Then we will see how to deploy our app in a few minutes.

Install Homebrew

Thanks to Homebrew (https://brew.sh/) we will be able to install command line software on our Mac.

So, open the terminal and proceed to install it:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

If needed precede the command by sudo in order to add permission:

sudo /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

The command will install the Command Line Developer Tools from Apple. Confirm by clickingReturn. After the installation finished, continue installing Homebrew by hitting Return again.

Once the process has finished type brew helpin order to test if Homebrew was installed correctly.

Now you are able to install new software using the command brew install [package name]

Install Git

Now that we installed Homebrew we can proceed to install Git.

In the terminal type:

$ brew install git

Install Heroku CLI

As explained on the official website we need Heroku Command Line Interface (CLI) to manage our applications, provision add-ons, view our application logs, and run our application locally.

So, let’s install it:

$ brew install heroku/brew/heroku

Here you will find a complete list of Heroku CLI Commands

👉🏻 https://devcenter.heroku.com/articles/heroku-cli-commands

Create a free Heroku account

Now that our machine is ready, we can create a free Heroku account. Open https://www.heroku.com/ and sign up.

Once you have created the account go to the terminal and type the command heroku login , then follow the instructions to sign in.

Prepare our nuxt.js app to deploy

Before we can deploy our app to Heroku, we need to prepare our Nuxt.js app.

👉🏻 https://nuxtjs.org/faq/heroku-deployment/

First of all, we have to tell Heroku to launch npm run build via the heroku-postbuild script in our package.json:

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "heroku-postbuild": "npm run build"
}

Then we have to create the Procfile. This special file specifies the commands that are executed by the app on startup.

Create a file and name it Procfile with no file extension, then inside it write:

web: npm run start

👉🏻 https://devcenter.heroku.com/articles/procfile

Finally, we can build our app running into the terminal the command:

$ npm run build

Now that we have built and prepare our app we can go through the deployment process.

Initialize a local Git repository

and commit our code to it

$ git initInitialized empty Git repository in .git/$ git add .
$ git commit -m "My commit message"Created initial commit 5df2d09: My commit message
 44 files changed, 8393 insertions(+), 0 deletions(-)
 create mode 100644 README
 create mode 100644 Procfile
...

Create a Heroku app

The heroku create CLI command creates a new empty application on Heroku, along with an associated empty Git repository. If you run this command from your app’s root directory, the empty Heroku Git repository is automatically set as a remote for your local repository.

$ heroku createCreating app... done, ⬢ thawing-inlet-61413
https://thawing-inlet-61413.herokuapp.com/ | https://git.heroku.com/thawing-inlet-61413.git

This command will create a new empty application with a random name. In this case thawing-inlet-61413 .

We can use the git remote command to check if a Heroku remote Git repository has been set for our app correctly:

$ git remote -vheroku  https://git.heroku.com/thawing-inlet-61413.git (fetch)
heroku  https://git.heroku.com/thawing-inlet-61413.git (push)

Now, we have to tell Heroku to install the devDependencies of our project (to be able to launch npm run build):

$ heroku config:set NPM_CONFIG_PRODUCTION=false

Also, we want our application to listen on the host 0.0.0.0 and run in production mode:

$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

🚀 Deploy our app

Finally, we can push the app on Heroku with:

$ git push heroku master

and open it on the browser:

$ heroku open

We have successfully deployed our basic Nuxt.js app on Heroku!