Configure yaml file for circle CI including envionment variables for an Angular project

Question

I have a project I'm trying to build, but my .api-keys document is being gitignored.

So, I added my keys as environment variables to the project on circle CI.

My problem is I'm not quite sure where/how to let my yaml config script know what they are:

old config script:

version: 2.1
orbs:
  cypress: cypress-io/[email protected]
workflows:
  build:
    jobs:
      - cypress/install:
          build: 'npm run build'
      - cypress/run:
          requires:
            - cypress/install
          start: 'npm start'

Line I'd like to add (I think?):

environment: 
    masterFirebaseConfig: $masterFirebaseConfig

Is this the correct thing to do? Where should this line go in the yaml above?

Many thanks for any tips!

Update 29 December, 2018:

I updated my api-keys.ts file to this:

export var masterFirebaseConfig = {apiKey: $fireBaseApiKey, authDomain: 'dataJitsu.firebaseapp.com',databaseURL: 'https://datajitsu.firebaseio.com',storageBucket: '',messagingSenderId: '495992924984'};
export var masterStripeConfig = {publicApiTestKey: $masterStripePublicApiKey,secretApiTestKey: $masterStripeSecretApiKey,publicApiKey: '',secretApiKey: ''};

Where $fireBaseApiKey, $masterStripePublicApiKey, and $masterStripeSecretApiKey are environmental variables I've added to the project.

This doesn't seem to working, either:

ERROR in src/app/api-keys.ts(1,44): error TS2304: Cannot find name '$fireBaseApiKey'. src/app/api-keys.ts(2,52): error TS2304: Cannot find name '$masterStripePublicApiKey'. src/app/api-keys.ts(2,96): error TS2304: Cannot find name '$masterStripeSecretApiKey'.

Answer 1

if you already added your keys as environment variables in CircleCI, they are already available for your build jobs. Just reference them by name, (eg $MY_PRECIOUS_KEY).

You only need to set an environment variable in your config script if you want to override an existing value or to set a new one.

Answer 2

I implemented this kind of CI-CD for my angular project on VSTS and deploy it using below way.

Here is the configuration of build.yaml file

resources:
- repo: self
queue:
  name: Hosted VS2017
  condition: succeeded()
  demands: npm

steps:
- task: Npm@1
  displayName: npm install
  inputs:
    verbose: false

- task: Npm@1
  displayName: npm custom
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build'

- task: ArchiveFiles@2
  displayName: Archive dist
  inputs:
    rootFolderOrFile: dist
    includeRootFolder: false

- task: PublishBuildArtifacts@1
  displayName: Publish Artifact: drop
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'

I created the deployment file environment specifically as following. This is a QA instance.

apiVersion: v1
kind: Service
metadata:
  name: portal
  labels:
    app: portal
spec:
  loadBalancerIP: 104.210.66.49
  type: LoadBalancer
  ports:
  - port: 80
    name: http
  selector:
    app: portal
---
apiVersion: apps/v1 
kind: Deployment
metadata:
  name: portal
spec:
  selector:
    matchLabels:
      app: portal
  replicas: 1 
  template: 
    metadata:
      labels:
        app: portal
    spec:
      containers:
      - name: portal
        image: yourdomain.azurecr.io/portal
        ports:
        - containerPort: 80
        env:
        - name: IdentityServerAuthentication__Authority
          value: http://id.qa.yourdomain.com  # Identity URL
        - name: env
          value: qa
      imagePullSecrets:
        - name:  projectqaregistry  # Registry file name
---

To setup a build for Circle CI you can take a reference from here