Runtime variables with Vue CLI

When building an distributable version of a project, it should be relatively easy to swap out some variables at runtime. The benefit of this is that you can build the code once and then deploy it across your stack without the need to rebuild. There’s nothing more frustrating than building for test and then having to rebuild for production – it technically means you’re playing a guessing game as to whether what worked and was signed off, will actually work next time around!

Vue CLI doesn’t cope with this concept very well. Recently, we have been using nuxt.js and there has been an introduction of runtimeConfig as a concept in their nuxt.config.js file. This is a new release as of v2.13 and works very well. There were workarounds before, but this is the next level of easy environment swapping.

To do something similar with a Vue CLI setup is more complicated. There’s a great article on Medium on runtime environment variables. This is a great concept, and we’ve extended it ourselves recently to improve our deployment efficiency.

To implement this, we make the most of our Docker environment and the entrypoint concept. Our compiled distribution is a standard HTML package served by Nginx, and we want to copy the config file based on an argument provided at runtime into the public directory on the webserver.

1. Create a new folder called config in the root of your project. This will house the configs for all except your default environment.
2. Create a js file for each environment. EG: staging.js and production.js
3. In the file, simply populate window.config with an object that matches your standard .env.{environment} file. EG:
   window.config = {
"VUE_APP_API_URL": "https://api.example.com",
"VUE_APP_BASE_URL": "https://app.example.com"
}
4. In your entry index.html file add a new script source to the head
   <script src="<%= BASE_URL %>runtimeConfig.js"></script>
5. Create an empty file called runtimeConfig.js in your public directory. (This will be overwritten by the appropriate file)
6. Setup a new utility function runtimeConfig that detects if the variable exists in the window.config scope, and if not, tries to use the .env version.
   export default function runtimeConfig(name) {
return window.config && window.config[name] ? window.config[name] : process.env[name];
}
7. Import this new runtimeConfig method anywhere you wish to use environment variables.
8. Alternatively, if you’re using environment variables within Vue contexts, you can set a Vue.mixin to export the variables.
   Vue.mixin({
data() {
return window.config
}
})
   This is then available as a data property in Vue: this.VUE_APP_API_URL
9. Finally, to bring in the correct configuration, we created an entrypoint.sh file that copies the correct config file into the runtimeConfig.js.
   #!/bin/bash
rm /usr/src/app/runtimeConfig.js
cp /usr/src/config/${environment}.js /usr/src/app/runtimeConfig.js
10. And we updated our Dockerfile to call this entrypoint. Our Nginx Docker image was based on 19-Alpine and this had it’s own entrypoint we had to trigger. This was achieved with: /docker-entrypoint.sh "$@" at the bottom of our entrypoint.sh file.