JumiaPay

# Deploy & Env vars all projects

All our applications are built on top of Docker (opens new window) and deployed through Jenkins (opens new window) and Kubernetes (opens new window). However, Frosty, Bloopers and Toadsworth are hosted on Amazon S3 (opens new window).

# Deploying on environments chompkamek

Different configurations means different deploys on client side Frontend Applications.

To avoid that, and use the same artifact for every environment and country, in the public/index.html it was added the highlighted code:




 
 
 





<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      // CONFIGURATIONS_PLACEHOLDER
    </script>

    <meta charset="utf-8">
    ...
</html>

Then, on the entrypoint of the dockerfile we run the file entrypoint.sh, which will replace the comment // CONFIGURATIONS_PLACEHOLDER by the environment variables for the current environment(dev0, staging or production) and country (ng, ke, eg, ...).





 
 
 
 
 






<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      window.configs = {
        "VUE_APP_I18N_LOCALE":"en"
        "VUE_APP_AUTH_URL":"auth_url",
        ...
      }
    </script>

    <meta charset="utf-8">
    ...
</html>

Now, we can access the configurations writing window.configs.VUE_APP_I18N_LOCALE.

# Developing Locally chompkamek

Locally we still want to use the environment variables like Vue.js provide. To do that we simply do not run the entrypoint.sh script and access the variables using instructions like this:

var locale = window.configs.VUE_APP_I18N_LOCALE || process.env.VUE_APP_I18N_LOCALE

Utility function

In each project there is available an utility function to load the correct value based on the one filled.

function getEnv(name) {
  return window.configs && window.configs[name]
    ? window.configs[name]
    : process.env[name]
}

Once we did not run the entrypoint.sh script window.configs.VUE_APP_I18N_LOCALE will be empty and process.env.VUE_APP_I18N_LOCALE will be used.

This strategy allow us to don't loose the functionalities provided by Vue.js and to use the same artifact in our several environments.

← Error Tracking →