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.

Create Vue.js app ​

Create app ​

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

npm init vue .

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

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

Build ​

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

npm run build

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

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

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

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