Cómo usar variables de entorno dinámicas en VueJS

Dani J. Pérez — Thu, 20 Sep 2018 14:06:21 +0000

Imaginad que necesitais hacer una aplicación que depende de una API para recoger sus datos, y nuestro desarrollo se divide en 3 fases de despliegue:

Test
Dev
Prod

Lo que queremos conseguir es que, depende de la fase en la que nos encontremos, la aplicación pueda llamar al servicio correspondiente, y no queremos tener que desplegar la aplicación cada vez que cambian las URLs o cambiamos de fase y por tanto de URLs.
Lo que haremos será crear un archivo json en nuestra carpeta de estáticos, la estructura del ejemplo quedaría así:

/static/config.json

El archivo para el ejemplo contendrá la URL que se usará por defecto:

{
    "URL": "https://pordefecto.algo"
}

Ahora en nuestra aplicación Vue donde usemos la url declararemos en la función created() una falsa llamada GET al archivo, en este ejemplo usaremos axios:

created: function() {
    axios.get("static/config.json").then(response => {
      this.URL = response.data.URL;
    });
  }

Así nuestra aplicación recuperará dinamicamente esa url, pudiendo modificarla más tarde sin necesidad de volver a hacer el build.

Bien, ahora tendremos que definir un archivo por cada fase, en nuestro caso 3 fases, 3 archivos en la carpeta environments (más el por defecto que ya hemos definido antes en static), la estructura quedaría así:

/environments/test/config.json

/environments/dev/config.json

/environments/pro/config.json

Así que tenemos ya los 3 archivos para cada fase (más el por defecto) y la aplicación llama dinamicamente al archivo para coger la URL, ahora nos tenemos que asegurar de que cuando la aplicación se despliegue (npm run build) también se copie la carpeta environments al destino del mismo. Esto podemos hacerlo de muchas maneras automaticamente (CopyWebpackPlugin, npm run script...) o nosotros manualmente copiando la carpeta donde corresponda, como ejemplo usaré el plugin para webpack CopyWebpackPlugin que nos permite copiar archivos añadiendo lo siguiente a nuestro archivo de configuración en este caso, /build/webpack.base.conf.js (cambialo según tu configuración):

output: {
    path: path.resolve(__dirname, '../dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static/js'),
        to: path.resolve(__dirname, '../dist/js')
      },
      {
        from: path.resolve(__dirname, '../static/config.json'),
        to: path.resolve(__dirname, '../dist/static')
      },
      {
        from: path.resolve(__dirname, '../config/environments/'),
        to: path.resolve(__dirname, '../dist')
      }
    ])]

Finalmente, nuestra estructura después de hacer el build quedaría así:

/dist/index.html

/dist/static/config.json

/dist/environments/test/config.json

/dist/environments/dev/config.json

/dist/environments/pro/config.json

/dist/static/js/...

Ahora cada vez que despleguemos nuestra aplicación nos aseguraremos de reemplazar el /static/config.json con el de la fase que corresponda, pudiendo hacerlo nosotros manualmente o si contamos con algún proceso de CI (Integración Continua) como Jenkins, podremos configurarlo para que copie el archivo que corresponda según la fase que despliegue.

Thanks to the entire dev.to community!

How to use dynamic environment variables in VueJS

Dani J. Pérez — Tue, 04 Sep 2018 14:39:18 +0000

Leer en español

This is my first post to DEV.TO community and the first one in English so I'll try to do my best :D

Imagine that you need an app based in an API to fetch the data, and we have 3 different development stages:

Test
Dev
Prod

What we want is, depending on the stage we are, the app can call the right API and don't want to deploy our app every time we change between stages or change URLs.
What we will do is create a new file in our statics folder, this example structure is:

/static/config.json

The example file will have the URL used by default:

{
    "URL": "https://bydefault.something"
}

Now in our Vue app where we use the URL, declare in created() function a false API GET call to that file, in this example, we use axios:

created: function() {
    axios.get("static/config.json").then(response => {
      this.URL = response.data.URL;
    });
  }

Now our app will fetch that URL dynamically, and we can change it later without
the need to deploy it.

Well, now we have to create a file for every stage we need, in this case, we have 3 stages, so we need to create 3 files in the environments directory (plus the default created before), the example structure will be:

/environments/test/config.json

/environments/dev/config.json

/environments/pro/config.json

So, we have the 3 files for every stage (plus the default) and the app can call dynamically at the file to fetch the URL, now we have to make sure to copy the environment folder to the same destination when we deploy the app (npm run build). We can do this done in multiple automatic forms (CopyWebpackPlugin, npm run script...) or can we do it manually by copying the folder to the destination, in this example will use the CopyWebpackPlugin plugin, what let us copy files automatically by adding the following to our config file, in this case, /build/webpack.base.conf.js (change it based on your configuration):

output: {
    path: path.resolve(__dirname, '../dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static/js'),
        to: path.resolve(__dirname, '../dist/js')
      },
      {
        from: path.resolve(__dirname, '../static/config.json'),
        to: path.resolve(__dirname, '../dist/static')
      },
      {
        from: path.resolve(__dirname, '../config/environments/'),
        to: path.resolve(__dirname, '../dist')
      }
    ])]

Finally, our structure after deploy will be:

/dist/index.html

/dist/static/config.json

/dist/environments/test/config.json

/dist/environments/dev/config.json

/dist/environments/pro/config.json

/dist/static/js/...

Now every time we deploy our app, we have to make sure to replace /static/config.json with the right environment file, we can do this manually or if we have any CI (Continuous Integration) process such as Jenkins, we can configure it to automatically copy the right file based on deployment stage.

DEV Community: Dani J. Pérez

Cómo usar variables de entorno dinámicas en VueJS

/static/config.json

/environments/test/config.json

/environments/dev/config.json

/environments/pro/config.json

/dist/index.html

/dist/static/config.json

/dist/environments/test/config.json

/dist/environments/dev/config.json

/dist/environments/pro/config.json

/dist/static/js/...

Thanks to the entire dev.to community!

How to use dynamic environment variables in VueJS

This is my first post to DEV.TO community and the first one in English so I'll try to do my best :D

/static/config.json

/environments/test/config.json

/environments/dev/config.json

/environments/pro/config.json

/dist/index.html

/dist/static/config.json

/dist/environments/test/config.json

/dist/environments/dev/config.json

/dist/environments/pro/config.json

/dist/static/js/...

Thanks to the entire dev.to community!