learn-nuxt-ts

Deployment

Universal vs Pre-rendered vs SPA

Nuxt offers three different ways to “build” our application (more on Nuxt docs):

I will not use SPA here as pre-rendered does all the hard work to generate all routes for us, which is one of SPA weakness.

To deploy an universal build:

yarn build
yarn start

To deploy a pre-rendered build:

yarn generate
# deploy /dist/ folder

You will find relevant documentation on NuxtJS FAQ. I have tested some deployments for my personal usage so I will cover these in the following paragraphs.

Surge

Surge is a very easy to use static website hosting accessible via CLI only, which is quite cool for continuous deployment.

Install Surge:

# Install globally
npm install --global surge
# Add locally as a devDependency
yarn add --dev surge

For some reasons, I could not install Surge globally with yarn

Then simply build and deploy a static website:

# Generate
yarn generate
# Deploy
surge --project ./dist/

Output:


   Running as xxxx@xxxx.xxx (Student)

        project: ./dist/
         domain: lively-quiver.surge.sh
         upload: [====================] 100% eta: 0.0s (12 files, 256921 bytes)
            CDN: [====================] 100%
             IP: 45.55.110.124

   Success! - Published to lively-quiver.surge.sh

That’s it!

For more details, check:

AWS S3

S3 bucket offers the possibility to host a static website (AWS docs):

For those who prefer to use AWS CLI:

# Create your bucket. Replace "nuxt-ts" with your bucket name
aws s3 mb s3://nuxt-ts
# Enable static website hosting with default values
aws s3 website s3://nuxt-ts --index-document index.html --error-document error.html
# Create a bucket policy files
touch s3_policy.json
# Edit accordingly. Use VS Code!
vim s3_policy.json
# Apply policy file to bucket
aws s3api put-bucket-policy --bucket nuxt-ts --policy file://s3_policy.json
# Generate and upload dist/ content
yarn generate
aws s3 cp dist/ s3://nuxt-ts --recursive
# Tadaa!!
firefox nuxt-ts.s3-website.eu-west-3.amazonaws.com

Docs references:

Heroku

Configure first your package.json. By convention, Nuxt uses build and start scripts which is properly triggered by Heroku after a git push. For the sake of the tutorial, let’s use Heroku specific hooks in package.json:

"scripts": {
    "build": "nuxt build", // this will not run
    "heroku-postbuild": "nuxt build", // this will run instead
    "start": "nuxt start" // this will run after a successful build
  }

# == no app == : create app
heroku create nuxt-ts
# == app exists ==: add remote
heroku git:remote --app nuxt-ts
# check your remotes
git remote -v
# configure your app
heroku config:set NPM_CONFIG_PRODUCTION=false --app nuxt-ts
heroku config:set HOST=0.0.0.0 --app nuxt-ts
heroku config:set NODE_ENV=production --app nuxt-ts
# simply push your desired branch to Heroku
git push heroku master

Docs references:

Travis CI

Thanks to providers, including those deployment into Travis is easy. Please check .travis.yml for the complete configuration file.

When encrypting values, I prefer to copy paste the secured values into my .travis.yml rather than having the CLI doing it for me because it sometimes breaks my formatting.

Surge

Configure Surge:

# Generate a token
surge token
# Encrypt SURGE_LOGIN
travis encrypt "SURGE_LOGIN={your email}" --com -r {your Github user}/{your repo}
# Encrypt SURGE_TOKEN
travis encrypt "SURGE_TOKEN={your token}" --com -r {your Github user}/{your repo}

Then add a Surge provider to your .travis.yml:

deploy:
  - provider: surge
    project: ./dist
    domain: nuxt-ts.surge.sh # optional
    skip-cleanup: true

Please check Travis docs for more.

AWS S3

Similary to Surge, encrypt your AccessKeyId and your SecretAccessKey. Then add the S3 provider:

deploy:
  - provider: s3
    access_key_id:
      secure: '...'
    secret_access_key:
      secure: '...'
    bucket: nuxt-ts
    region: eu-west-3
    skip-cleanup: true
    local_dir: dist

Don’t forget to specify the bucket region and the folder (local_dir) to upload

Please check Travis docs for more.

Heroku

Encrypt your Heroku API key and add the Heroku provider:

deploy:
  - provider: heroku
    api_key: secure: '...'
    app: nuxt-ts
    on:
      branch: master
      node_js: node

Please check Travis docs for more.

Circle CI

When Travis is using providers, Circle CI uses Orbs. I will not focus on Circle CI orbs in this tutorial. Please check .circleci/config.yml for the complete configuration

Surge

As mentioned earlier, you can either install Surge globally or as a devDependency. Having SURGE_LOGIN and SURGE_TOKEN environment variables defined, it is as simple as executing the surge command:

jobs:
  deploy-surge:
    docker:
      - image: circleci/node:11-browsers-legacy
    working_directory: ~/repo
    steps:
      - checkout
      - run: npm ci
      - run: npm run generate
      - run: ./node_modules/.bin/surge --project ~/repo/dist --domain nuxt-ts.surge.sh

Reference: Surge doc

AWS S3

Circle CI offers a S3 orb to ease S3 deployment, especially regarding AWS CLI configuration. Three environments variables are needed:

Then, add the orb and execute it in a job:

orbs:
  aws-s3: circleci/aws-s3@1.0.4

jobs:
  deploy-s3:
    docker:
      - image: circleci/python:2.7
    steps:
      - checkout
      - run: npm ci
      - run: npm run generate
      - aws-s3/copy:
          from: ~/repo/dist
          to: 's3://nuxt-ts'
          arguments: '--recursive'

Reference: Circle CI doc

Heroku

Configure first required environment variables:

Once done, deploying to Heroku is a simple git push:

jobs:
  deploy-heroku:
    docker:
      - image: buildpack-deps:trusty
    steps:
      - checkout
      - run:
          name: Deploy Master to Heroku
          command: |
            git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master

Reference: Circle CI doc