Image

scaling

6 min read
Last update: December 19, 2021

This course was created with Nuxt 2.3.4. Please check the Nuxt docs if you run into any issues using a newer version.

Universal Mode Deployment

Up until now, we’ve only been developing locally. At some point we’ll need to deploy our application to the internet. In this lesson we’ll move our API onto the internet, build our application to ensure it’s ready for production, and deploy our application in Universal Mode.

Remembering Universal Mode

Back in lesson 3 we discussed what it means for Nuxt to run in Universal Mode. To review, once we have our application hosted on the Internet, here’s what it’ll look like when we start sending requests:

Notice that the page we’ve requested gets rendered on the server (Server-Side Rendering), and the resulting index.html is sent to the browser where it loads and displays even before Vue is started up. Once Vue is started up our application gets “Hydtrated” and goes into normal SPA (Single Page Application) mode:

This is how our application will be working once we deploy it. However, first we need to move our API server into the cloud.

Moving our API Server

Up until now we’ve been using JSON-SERVER to mock out our API locally. That’s not going to work if our server is on the internet. We need to move our API server onto the Internet.

If this website was called Laravel Mastery, Rails Mastery, Firebase Mastery, or Node Mastery we might teach you how to create a complex API server. Those are all great solutions for building an API, which you’ll want to use for a production level app. However, since this is Vue Mastery we’ll use a Typecode project called my-json-server, which lets us create fake online APIs.

All we have to do is have a github project with a db.json. We can use ours for our project:

https://github.com/Code-Pop/real-world-nuxt/blob/master/db.json

We’ll use the organization (Code-Pop) and the repo name (real-world-nuxt), in a URL we’ll construct on my-json-server:

http://my-json-server.typicode.com/Code-Pop/real-world-nuxt/

Try going to that URL, and you’ll find a link to fetch our JSON events from the db.json file, and you can even access individual events.

Perfect. To make this work with our application we only need to change one piece of code:

📃 /services/EventService.js

import axios from 'axios'

const apiClient = axios.create({
baseURL: `https://my-json-server.typicode.com/Code-Pop/real-world-nuxt`,

All we have to do is change the baseURL, and now if we run our local server, it’ll work except now using our API on the Internet.

Building our Production App

Before we deploy our application it’d be good to ensure it works locally in production mode. This is a two step process.

npm run build

Nuxt builds your application, running it through various webpack configurations, taking all your nuxt.config.js configuration into account, and finally building a very streamlined bundle that is appropriate for production.

After running nuxt build you’ll find that the .nuxt directory, a hidden directory, has been generated and has everything that you need to run Nuxt as a server side application.

Next we’ll run our Nuxt application in production mode using node by running:

npm run start

This runs a node server in production from our /.nuxt/dist directory using the files it generated there. Unlike the development server if we make a change we’ll need to build and start the server again.

In this lesson we’ll focus on deploying your application. We’ll review how to deploy your Nuxt application to a server, and the tools that Nuxt gives you to help with that.

Deploying Nuxt in Universal Mode

Nuxt can be deployed on any server that can run Node. Our server needs to be able to run:

  • npm install
  • npm run build
  • npm run start

To effectively install the dependencies, build our project using webpack, and start the node server in production mode.

Depoying Nuxt on Heroku

Heroku is one of the few hosts that you can deploy and run a node server completely free, that’s why I chose to use it for this tutorial. We’ll be deploying using the following steps:

  1. Install the Heroku-cli if needed, and create the app on Heroku.
  2. Set node server configuration.
  3. Add command to package.json, so Heroku knows to run npm run build
  4. Add Procfile so Heroku knows to start our server with: npm run start
  5. Push git repo to Heroku so it deploys our code.

1. Install Heroku CLI & Create App

You can follow these instructions to download and install the Heroku CLI. Once installed we need to create our application on Heroku. We do this with heroku create:

Notice Heroku gave us back two things. First is the URL where our application will be deployed (when we deploy it), and the second is the git repo we need to push our code into which will trigger Heroku to deploy it.

2. Set node server configuration

We need to tell Heroku to install the devDependencies of the project (to be able to launch npm run build) so we’ll run this from the command line:

heroku config:set NPM_CONFIG_PRODUCTION=false

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

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

3. Tell Heroku to run npm run build

After this initial setup, we need to tell Heroku to run npm run build via special command in the package.json file called heroku-postbuild.

📃 /package.json

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

4. Add Procfile

Next, Heroku uses a what’s called a Procfile (a file literally named Procfile with no extension) in order to execute and run your application. The contents of the Procfile should contain the following:

📃 /Procfile

web: npm run start

This will tell Heroku to start your application and to direct external HTTP traffic to it.

5. Push git repo to Heroku to deploy

Finally, we can push the app on Heroku with:

git push heroku master

Our Nuxt app is now live and hosted on Heroku and we can see it in action on the Internet with our API also on the Internet!

Customizing your app build with nuxt.config.js

Nuxt and webpack give you lots of ways to customize and tweak the way your application is deployed. Inside the nuxt.config.js file you’ll find two configuration options you might want to learn about.

There is the build property which lets you customize the webpack configuration for how your application is built. You can tweak things like webpack loaders & plugins, minify, filenames, and directory output. There’s also the server property that lets you define the server connection variables for your application, like port, https, socket, and using the timing API.

To learn more about the build and server inside the Nuxt documentation.

⏪ To ReVue

In this lesson we moved both our API and server onto the Internet, and learned about deployment in Universal Mode. In the next lesson we’ll review static generation, another deployment mode.