Demo Vue.js app with Tilt

This is a demo Vue.js app showing how to do frontend development in a local Kubernetes environment with Tilt.

This docs page provides additional context for hot reloading in Tilt, as well as a walkthrough of a demo React app using Tilt. This project is similar, but for folks interested in using Vue.js instead.

This project was bootstrapped with Vue CLI.

Instructions

• Install Tilt and a local Kubernetes environment.
• Optional: Read the beginner Tilt tutorial.
• With the local Kubernetes environment running, cd into the root directory of this project, and run tilt up.
• Navigate to http://localhost:8080/ in your browser.
• Make any changes to the app, such as saving new text in HelloWorld.vue.
• Observe the changes reflected immediately in your browser, without refreshing.

Dockerfile

The Dockerfile contains npm run serve, thus running a dev server within the container used by Kubernetes. Tilt uses live_update (as specified in the Tiltfile) to dynamically inject changes into the container, as you make them, allowing you a realtime frontend development experience, similar to as if you were running the app directly locally. In production, you should not use npm run serve in the container, but build the app instead. See examples of this in the Vue.js Cookbook.