CODEWITHSUNDEEP
angularenvironment-variablesaws-amplify
Elliot Jimeno
Elliot Jimeno

Reputation: 41

How can I access AWS Amplify environment variables from my Angular Application?

Not too experienced with environment variables within app and system frameworks, but I was wondering how I could go about accessing my AWS Amplify environment variable from my code? I followed the steps under Set Environment Variables on AWS's docs at (https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html), but am stumped trying to figure out how to access them from my typescript code. The contents under the Access Environment Variables section of the same link provided makes some sense to me, but the environment variable is only available at build time. I know this because when I include 'echo "ENV_VAR_NAME=$ENV_VAR_NAME"' as a command within the yml file it prints out the corresponding value. What must I add to my amplify.yml build file in order for me to be able to successfully retrieve the variable when I try running-

console.log(process.env.ENV_VAR_NAME)

within my typescript code after it has been deployed?

Currently, the build section of my yml file looks something like this (similar to the snippet of code in the aws amplify docs):

build:
  commands:
    - npm run build
    - echo "ENV_VAR_NAME=$ENV_VAR_NAME" >> backend/.env

But when I run the console.log within my angular component, it shows as undefined. Additionally, later on I would like to store secrets with the systems manager parameter store provided by AWS (details of this also provided in the above link), I assume accessing those should be somewhat similar. Not sure what I may be misunderstanding or unaware of but hopefully someone can provide me with some helpful feedback.

Upvotes: 2

Views: 1340

Answers (1)

Elliot Jimeno
Elliot Jimeno

Reputation: 41

After further research and trial & error, I was able to figure out a solution. When it comes to angular applications, environment variables are configured using the provided environment.ts and environment.prod.ts files instead of a .env file. Because of this, AWS results in a build error when it sees that src/.env is not a file or directory. Also, using the '>>' (append) linux command will add the line to the end of the file. Because the angular environment files include closing tags, a simple append will not work as they will be broken and give you syntax errors.

To fix this, you must append the line of text before the last closing tag. Under the build section of my yaml file I added:

sed -i '$i'"ENV_VAR_NAME:\"$ENV_VAR_NAME\"," src/environments/environment.prod.ts

By using the sed command, I am able to add, edit, and save my amplify environment variable in a new line (before the closing tag) without causing any syntax errors.

To access the variables from your code, you simply import your environment into the corresponding component

import { environment } from 'src/environments/environment.prod'
// prints variable
// @ts-ignore
console.log(environment.ENV_VAR_NAME);

As doing only this makes the variable available at build time, your code will still show a "Property 'ENV_VAR_NAME' does not exist on type..." error. To bypass this, I just ignored the lines from being checked by the compiler by adding "// @ts-ignore"

Keep in mind you will still need to find another way to provide these values when testing locally since the variables are only provided after deploying.

Upvotes: 1

Related Questions