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 but unless you knew what you were looking for, it wasn’t obvious.

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 service to deploy this Vue.js application, you need to configure these as environment variables in the Amplify console.

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.

Originally published at on March 2, 2021.

AWS Serverless Hero. Independent Consultant . Author of . Speaker. Trainer. Blogger.

AWS Serverless Hero. Independent Consultant https://theburningmonk.com/hire-me. Author of https://productionreadyserverless.com. Speaker. Trainer. Blogger.