SPA Reloader Demo

This is a demo application that uses SPA Reloader and SPA Reloader Vue Plugin.

Use SPA Reloader Plugin in you Vue Application

npm i spa-reloader-vue

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import spaReloader from "spa-reloader-vue";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;
Vue.use(spaReloader, {
  spaReloaderURL: "ws://" + location.hostname + "/ws",
});

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

...
  mounted() {
    this.$spaSubscribe(this.callbackFunction);
  },
  methods: {
    callbackFunction: function(image) {
      this.showDialog = true;
      if (image !== undefined && image !== null) {
        this.dialogText = `Image changed from: ${image.previous_image.name}, to: ${image.current_image.name}`;
      } else {
        this.dialogText = "Image change detected.";
      }
    }
  }
...

Build demo docker images

Buil v1 image

docker build -t docker.io/toucansoftware/spa-reloader-demo:v1 .

Buil v2 image

git checkout v2
docker build -t docker.io/toucansoftware/spa-reloader-demo:v2 .

Deploy the demo application in your Kubernetes Cluster

We are deploying the application as Kubernetes Deployment which exposes the container port 80 as ClusterIP Service. This port is exposed to clients outside the cluster through an Ingress.

Install Ingress

Please follows the install steps of NGINX Ingress Controller to install the corresponding Ingress Controller for your settings.

In this demo we are using Docker for Mac Kubernetes, so we need to run the following commands to install the Ingress Controller.

kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v0.41.1/deploy/static/provider/cloud/deploy.yaml

Install SPA Reloader

kubectl apply -f https://raw.githubusercontent.com/ToucanSoftware/spa-reloader-demo/main/deploy/01-spa-reloader.yaml

Install Demo Application

kubectl apply -f https://raw.githubusercontent.com/ToucanSoftware/spa-reloader-demo/main/deploy/02-demo.yaml

Update demo image

kubectl set image deployment/spa-demo spa-demo=docker.io/toucansoftware/spa-reloader-demo:v2 -n spa-demo

Clean up

kubectl delete -f https://raw.githubusercontent.com/ToucanSoftware/spa-reloader-demo/main/deploy/02-demo.yaml
kubectl delete -f https://raw.githubusercontent.com/ToucanSoftware/spa-reloader-demo/main/deploy/01-spa-reloader.yaml
kubectl delete -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v0.41.1/deploy/static/provider/cloud/deploy.yaml