K
Q

configurable vue frontend application

12/13/2019

Im working on a Vue frontend that consumes a backend API that are both being deployed to the same kubernetes cluster. I would like to make the vue frontend application configurable so I can assign the address to the backend service on container startup instead of during build time.

I've been trying to do this by following Hendriks answer to this thread: Pass environment variable into a Vue App at runtime

Due to my lack of Node and Javascript experience, I do not understand the following:

  1. Where in the filestructure the files should be placed?
  2. Why the config.js describes a function, and not just as export default { configObj: var } an object with the variables?
  3. How I can access the variable in config.js through /config.js in the rest of my app? I can see the file in my browser at /config.js, but imports does not work.

I've currently placed the files like so: 

/app
    /public
        index.html << I put the script tag in the head of this file.
        ...
    /src
        /config
            config.js
        main.js << setting axios.defaults.baseURL here. import config from '@/config/config.js' results in the str 'config.js'.
        ...
    vue.config.js

Even though I know my backend service IPs/addresses are not supposed to change in production, setting these values before build seems like a very static and manual way to do it. During development running the app and backends locally on minikube, waiting for long builds quickly becomes very time consuming.

Very greatful for any insight in how I can achieve this, or any insight into why I can't seem to get Hendriks proposal to work.

-- Mertzi
configuration
javascript
kubernetes
node.js
vue.js

Similar Questions

not able to load static content in ingress resource
Can skopeo copy handle multiple images at once?
unable to push docker image to gcr.io
Jenkins behind apache proxy

1 Answer

12/13/2019

It's important to note that what you are trying to do doesn't have anything to do with node. The execution environment of your Vue app is going to be the browser and not node (even if you are serving it with node). This is also why you can't do export default of your config, as some browsers won't understand that.

But here is a method you can use in order to get the config to your app using k8s. Create a k8s config map, which will contain your config.js, something like:

apiVersion: v1
kind: ConfigMap
metadata:
    name: vue-config
data:
    config.js: |
        function config () {
            return { serverAddress: "https://example.com/api" };
        }

Then in your pod/deployment embed the file:

apiVersion: v1
kind: Pod
spec:
  containers:
    - name: your-vue-app
      image: your-vue-app:1.0.0
      volumeMounts:
      - name: config-volume
        mountPath: /app/public/config.js
  volumes:
    - name: config-volume
      configMap:
        name: vue-config

Note that you are putting the config in the public directory. After that you can add the script tag in the index, which loads the config.js. Having the config as a function is useful, because you ensure some level of immutability, also I think it looks a bit better that a global config var.

When you want to use the configuration, you just call the config function anywhere in your configuration:

const conf = config();
-- todinov
Source: StackOverflow