Generate Angular environment.ts dynamically at the build time in AWS Code Build with AWS Parameter Store

  1. Have read my article ‘How to deploy Angular Web App from GitHub to AWS S3 in AWS Pipeline
  2. Knowledge on Angular Environment.ts file
  3. Knowledge on AWS Systems Manager and Parameter Store
  4. Familiar with NodeJS running environment
function generateEnvironmentContent() {return `export const environment = {production: ${process.env.IS_PRODUCTION || false},environment: "${process.env.ENVIRONMENT || "local"}",sampleText: "${process.env.SAMPLE_PARAM_STORE || "I am from Dynamic Environment :D"}"};`}(function generateEnvironment() {const fs = require('fs');const fileName = 'environment.ts'; // you can this as hard coded name, or you can use your own unique nameconst content = generateEnvironmentContent();process.chdir(`src/environments`); // This is the directory where you created the environment file. you can use your own path, but for this I used the Angular default environment directoryfs.writeFile(fileName, content, (err) => { (err) ? console.log(err) : console.log('env is generated!') });})();
  • SAMPLE_PARAM_STORE is an Environment Variable I added in AWS parameter store.
  • ENVIRONMENT is also an Environment Variable I added in AWS CI/CD Environment Variable
"fileReplacements": [],
"scripts": {"generate-env": "node environment-generate.js",.....}
Parameter Store
Codebuild
Select Environment
  1. SAMPLE_PARAM_STORE is read from Parameter Store.
  2. ENVIRONMENT is read from pipeline it self, as it is set as PLAINTEXT.
Set Environment Variables
      - echo Generate Environment File
- npm run generate-env // newly added command
- echo Env file is generated
- echo Build the project
- npm run build
- echo Finished the build project
import { environment } from 'src/environments/environment';.....sampleText = environment.sampleText;constructor() {console.log(this.sampleText);}
Access Denied
AWS Roles
Policies Attached
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"ssm:GetParameters"
],
"Resource": "<Your resource Id>:parameter/*"
}
]
}
Final output

--

--

--

Technopreneur | Lone Geek Wolf | Monkey Monk

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Ethereum dApp Tutorial 2/2: Frontend (React) Section

Testing Smart-contract with java-script and mocha

To-do app with React and Redux

Speed Up Your Angular Application and Development with Angular CLI and Ahead of Time Compilation

Building a Basic Javascript Synth

Bringing JSX to Template Literals

Add a soft ui design to your site (neumorphism)

credit: https://www.pinterest.com/pin/455074737350700472/

How to Backup Your Medium Publication to a JSON Bucket

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tharaka Madhusanka

Tharaka Madhusanka

Technopreneur | Lone Geek Wolf | Monkey Monk

More from Medium

Angular Component Lifecycle Hooks Explained

Create your first Angular APP

LAZY LOADING IN ANGULAR

Getting started with Angular