Getting Started with Vue.js

A live example is available at https://vue.nullstone.dev.

This quickstart launches a Vue.js static site to AWS via Nullstone. In production, this configures your static site with a CDN so that static assets are served close to your users.

This quickstart contains a walkthrough for generating a Vue.js app. A working example is available to fork at nullstone-io/vue-quickstart.

TIP

This quickstart is based off the official Vue.js Quick Start guide.

Create Vue.js app

Create app

In this example, we are creating a Vue.js app in the current directory.

npm init vue .

Launch to Nullstone

Create app

When launching to Nullstone, we're going to be creating an app in the Nullstone UI and attaching capabilities that automatically configure our app. Follow these steps in the Nullstone UI.

1. Create a static site.
   • Name: In this example, we're naming our app vue-quickstart
   • Framework: vuejs
   • App Type: Static Site
2. From the Domains tab for the application, add a subdomain. (This will automatically attach a CDN capability)

Provision

Our application is ready to launch. Click "Launch" through the UI or issue up through the CLI.

nullstone up --wait --app=vue-quickstart --env=dev

Build

Once your application is provisioned, build your app into the ./dist directory.

npm run build

Deploy

Run launch to push your static assets and deploy the service with a new version.

nullstone launch --source=./dist --app=vue-quickstart --env=dev

Troubleshooting

Auto-versioning

When pushing your image, Nullstone performs auto-versioning if you are in a git-tracked directory. Nullstone selects the short commit SHA (a unique 8-character token) from the git repository to tag the docker image.

To use a manual version, issue launch with --version (this example uses 1.0.0).

nullstone launch --source=./dist --app=vue-quickstart --env=dev --version=1.0.0

Rollback

All static assets from your deployments are stored in your cloud account. When you want to rollback, you issue nullstone deploy with the desired version. This will cause your CDN to use an older version of your static site.

nullstone deploy --app=vue-quickstart --env=dev --version=0.1.1