Deploy a Nuxt app with Express to Heroku

I discovered Nuxt three months ago. I searched a way to develop a webapp and its backend at the same time in the same project. In fact, Nuxt lets you develop a backend with Express. It forces me to forget the amazing world of jQuery to learn VueJS : an open source JavaScript framework which didn’t stop growing for few years.

Finally, I met one problem with my nuxt app : how to deploy a nuxt app with its backend on a IaaS or a Paas (Infrastructure & Plateform as a service ) like Azure, Amazon Web Services , Google Cloud or Heroku. In fact, these plateforms let you to deploy your frontend and your backend. I choose Heroku because of its simplicity ,ease to use ( It’s free :=) ) and its integration with git. It’s perfect for a mockup.

Prepare the groundwork

First, you have to create an empty repository in github (so, if you don’t have a github account and git installed on your computed, go to get it ).

Go to your account page and create a repository.

Call it as you want and click on ‘Create repository’.

You could see your git URL linked to your repository.

Now, on your computer, open a cmd and type

git clone “your git URL”

It will create a folder with the same repository’s name. This is in this folder that we will put our Nuxt app.

Create a Nuxt App

Now, I consider that you have Node.js installed on your computer. If not, go installed it now.

You have to install Vue CLI, type :

npm install -g @vue/cli

Also, you have to install an addon called cli-init

npm install -g @vue/cli-init

Finally, install the nuxt app :

vue init nuxt-community/express-template NuxtToHeroku
( The prompt will ask you some questions so take my exemple )

Now, as the output shows you, go into your folder, and type :

npm install

Your treefolder should looks like mine

Some files like package-lock.json and yarn.lock will be removed later

If you would develop your backend, you could do it in the api folder. The index.js is the root of your backend server.

Just before launch your app, we have to change the code, replace this part of code in the nuxt.config.js file

extend (config, ctx) {
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}

by

extend (config, { isDev }) {
if (isDev && process.client) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}

Now run your app

npm run dev

And go to localhost:3000.

You could see your webapp.

Now we will push our new files to github and deploy it to Heroku.

Push it to Github

We have to add new files and commit it before, so

git add .

and commit it

git commmit -m "Push Nuxt app to github"

Now push it by typing

git push -u origin master

You could see your source code on GitHub.

OK, this seems to be long ? Now the interessant part!

Push it to Heroku

Like Github, install Heroku CLI and go create a Heroku account now.

Type this command to create an app on Heroku

heroku apps:create "your app name"

Now, type this following commands to configure your webapp in Heroku

heroku config:set NPM_CONFIG_PRODUCTION=false
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production

Next, add this line to your package.json, in the script part

"heroku-postbuild": "npm run build"

Now commit the modifications

git commit -m "add run to build app" package.json

and push it

git push -u origin master

Before deploy to Heroku, just remove this file of the repository by tiping

git rm yarn.lock
git rm package-lock.json
git commit -m "remove useless file for Heroku"

OMG, we have soon finished !

git push heroku master

It will upload your app on Heroku.

Wait 2 minutes while it’s loading and open it with :

heroku open

You could also open it by using the Heroku plateform or by knowing your heroku url.

Github : https://github.com/kristof94/NuxtToHeroku