Merge pull request #2 from Tazminia/feat/app-configuration

feat(deploy): enable dynamic runtime configuration

README.md

@@ -1,29 +1,33 @@
 # simple-vuejs-helloworld
 
-## Project setup
+## Purpose
 
-```console
-npm install
-```
+This project is for learning purposes. It was created to understand how vuejs works in a kubernetes environment.
 
-### Compiles and hot-reloads for development
+## Description
 
-```console
-npm run serve
-```
+A simple vuejs application that is capable of reading configuration at runtime from a configmap.
 
-### Compiles and minifies for production
+## How to use
+
+### Build docker image in minikube context
 
 ```console
-npm run build
+eval $(minikube docker-env)
+docker build --rm -t vuejs-app:0.0.2 .
 ```
 
-### Lints and fixes files
+### Test image in minikube
 
 ```console
-npm run lint
+eval $(minikube docker-env)
+kubectl apply -f minikube.yaml
+kubectl port-forward svc/vuejs 8080:80
 ```
 
-### Customize configuration
+### Change config
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+```console
+kubectl edit cm fe-config
+# Now change the value of VUE_APP_ENV_envName "minikube-dev" to whatever value you want
+```

minikube.yaml

@@ -0,0 +1,65 @@
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: fe-config
+data:
+  config.js: |
+    var config = (() => {
+      return {
+        "VUE_APP_ENV_envName": "minikube-dev",
+      };
+    })();
+
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  creationTimestamp: null
+  labels:
+    app: vuejs
+  name: vuejs
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: vuejs
+  strategy: {}
+  template:
+    metadata:
+      creationTimestamp: null
+      labels:
+        app: vuejs
+    spec:
+      containers:
+        - image: vuejs-app:0.0.2
+          name: vuejs-app
+          ports:
+            - name: nginx
+              containerPort: 80
+              protocol: TCP
+          volumeMounts:
+            - name: config-volume
+              mountPath: /usr/share/nginx/html/config.js
+              subPath: config.js
+          imagePullPolicy: Never
+      volumes:
+        - name: config-volume
+          configMap:
+            name: fe-config
+
+---
+apiVersion: v1
+kind: Service
+metadata:
+  creationTimestamp: null
+  labels:
+    app: vuejs
+  name: vuejs
+spec:
+  ports:
+    - port: 80
+      protocol: TCP
+      targetPort: 80
+  selector:
+    app: vuejs