10. Deployment

Nuxt.js comes with a set of useful commands, both for development and production purpose. Nuxt.js lets your choose between three modes to deploy your application: Server Rendered, SPA or Static Generated.

Server Rendered Deployment (Universal)

To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands:

$ nuxt build
$ nuxt start

The package.json like follows is recommended:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

¡Run now to deploy. Every time you run now, you get a new deployment!

Static Generated Deployment (Pre Rendered)

Nuxt.js gives you the ability to host your web application on any static hosting.

To generate our web application into static files:

$ nuxt generate

It will create a dist folder with everything inside ready to be deployed on a static hosting site.

As our project has dynamic routes, it is necessary to add a special configuration to our nuxt.confi.js file, particularly in this case our dynamic routes would be the details of each Gist.

// Dynamic routes are ignored by the generate command.
const axios = require('axios')

module.exports = {
  generate: {
    routes: function () {
      return axios.get('https://api.github.com/users/khriztianmoreno/gists')
        .then((res) => {
          return res.data.map((gist) => {
            return '/post/' + gist.id
          })
        })
    }
  }
}

To see these steps complete, you can change to the 10-deployment branch in this repository.