https://github.com/tilt-dev/tilt-vuejs-demo
Demo Vue.js app with Tilt
https://github.com/tilt-dev/tilt-vuejs-demo
Last synced: 7 months ago
JSON representation
Demo Vue.js app with Tilt
- Host: GitHub
- URL: https://github.com/tilt-dev/tilt-vuejs-demo
- Owner: tilt-dev
- Created: 2020-01-31T01:13:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T15:55:12.000Z (over 3 years ago)
- Last Synced: 2025-02-21T23:18:31.025Z (over 1 year ago)
- Language: Vue
- Homepage: https://docs.tilt.dev/nodejs_microservice_hotreloading.html
- Size: 672 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://tilt.dev/).
This [docs page](https://docs.tilt.dev/nodejs_microservice_hotreloading.html) provides additional context for hot reloading in Tilt, as well as a walkthrough of a [demo React app using Tilt](https://github.com/windmilleng/tilt-frontend-demo). This project is similar, but for folks interested in using Vue.js instead.
This project was bootstrapped with [Vue CLI](https://cli.vuejs.org/).
## Instructions
- Install [Tilt](https://tilt.dev/) and a [local Kubernetes environment](https://docs.tilt.dev/choosing_clusters.html).
- Optional: Read the beginner [Tilt tutorial](https://docs.tilt.dev/tutorial.html).
- With the local Kubernetes environment running, `cd` into the root directory of this project, and run `tilt up`.
- Navigate to [http://localhost:8080/](http://localhost:8080/) in your browser.
- Make any changes to the app, such as saving new text in [HelloWorld.vue](src/components/HelloWorld.vue).
- Observe the changes reflected immediately in your browser, without refreshing.
## Dockerfile
The [Dockerfile](Dockerfile) contains `npm run serve`, thus running a dev server within the container used by Kubernetes. Tilt uses [live_update](https://docs.tilt.dev/live_update_tutorial.html) (as specified in the [Tiltfile](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](https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html).