How to configure environment specific parameters with Vue.js and Amplify
Tags: amplify, aws, programming, vue
Published: 2021-03-20 10:36:34

---
title: How to configure environment specific parameters with Vue.js and Amplify
published: true
date: 2021-03-02 23:37:37 UTC
tags: Amplify,AWS,Programming,Vue
canonical_url: https://theburningmonk.com/2021/03/how-to-configure-environment-specific-parameters-with-vue-js-and-amplify/
---

When you start a new Vue.js project that needs to interface with APIs running in AWS, there’s a good chance you will have these lines of code:

```
import Amplify from 'aws-amplify'

Amplify.configure({
  Auth: {
    region: 'us-east-1',
    userPoolId: 'xxx',
    userPoolWebClientId: 'xxx',
    mandatorySignIn: true
  }
})
```

These few lines of code let you use the `aws-amplify` library to authenticate the user against a Cognito User Pool and support common flows such as sign-up, sign-in, sign-out, forgotten passwords and change passwords.

But, as you provide your Vue.js project across the different environments—`dev`, `test`, `staging` and `production`—these settings have to change.

So instead of hardcoding them, you should inject them via environment variables. And fortunately for us, Vue.js supports the use of `.env` files out-of-the-box. However, a caveat that stomped me for a few hours today was that these environment variables need to be prefixed with `VUE_APP_`.

This was mentioned in the [docs](https://cli.vuejs.org/guide/mode-and-env.html#modes) but unless you knew what you were looking for, it wasn’t easy to find.

```
Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the 
client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that 
could have the same name.
```

So, you change your code to something like this:

```
import Amplify from 'aws-amplify'

Amplify.configure({
  Auth: {
    region: process.env.VUE_APP_REGION,
    userPoolId: process.env.VUE_APP_USER_POOL_ID,
    userPoolWebClientId: process.env.VUE_APP_CLIENT_ID,
    mandatorySignIn: true
  }
})
```

And assuming you’re using the [AWS Amplify](https://aws.amazon.com/amplify/) service to deploy this Vue.js application, you need to configure these as environment variables in the Amplify console.

![](https://theburningmonk.com/wp-content/uploads/2021/03/img_603ecb84b2d27.png)

And pull them into a `.env` file during the build process. Again, the environment variables in the `.env` file needs to be prefixed with `VUE_APP_`.

So, in the `amplify.yml` file, add these lines to the `build` phase, just before the `npm run build` step.

```
- echo "VUE_APP_REGION=$REGION" >> .env 
- echo "VUE_APP_USER_POOL_ID=$COGNITO_USER_POOL_ID" >> .env 
- echo "VUE_APP_CLIENT_ID=$COGNITO_CLIENT_ID" >> .env
```

Your amplify.yml will probably look something like this.

```
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - echo "VUE_APP_REGION=$REGION" >> .env 
        - echo "VUE_APP_USER_POOL_ID=$COGNITO_USER_POOL_ID" >> .env 
        - echo "VUE_APP_CLIENT_ID=$COGNITO_CLIENT_ID" >> .env 
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

Now they’ll be bundled into the app when Amplify builds and deploys it.

---

Hi, my name is **Yan Cui**. I’m an **[AWS Serverless Hero](https://aws.amazon.com/developer/community/heroes/yan-cui/)** and I specialise in rapidly transitioning teams to serverless and building production-ready services on AWS.

Are you struggling with serverless or need guidance on best practices? Do you want someone to review your architecture and help you avoid costly mistakes down the line? Whatever the case, I’m here to help.

You can contact me via [Email](mailto:theburningmonk.com), [Twitter](https://twitter.com/theburningmonk) and [LinkedIn](https://www.linkedin.com/in/theburningmonk/).

[Hire me.](https://theburningmonk.com/hire-me)

The post [How to configure environment specific parameters with Vue.js and Amplify](https://theburningmonk.com/2021/03/how-to-configure-environment-specific-parameters-with-vue-js-and-amplify/) appeared first on [theburningmonk.com](https://theburningmonk.com).