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.
Table of Contents
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 clicking
Return. After the installation finished, continue installing Homebrew by hitting
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]
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
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.
First of all, we have to tell Heroku to launch
npm run build via the
heroku-postbuild script in our
"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
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
heroku createCLI 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
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
devDependenciesof 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.0and 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!