Using Heroku environment variables with angular-cli, deployed through Node server

Since your server is a NODE server, it has the potential to do processing, rather than only serve static files. This gives you a number of options.

1. You could use a templating language processed by your NodeJS server to embed environment variables into your HTML before serving it

2. You could have a CONFIG type endpoint that contains configuration normally stored in your environment variables. Your app, upon launch, can hit this endpoint and grab configuration data that it can then use later.

These are the first two options that come to mind - but there are numerous ways you can handle this.

The important thing to note is that Angular is a client side javascript framework, meaning there is NO security - anything you send down to Angular can be read by anyone using your Angular app. Therefore, it's important that you don't depend on confidentiality in terms of what you send down to Angular to use.

WARNING: This is not the most secure way to access config vars from heroku. If you have very sensitive keys that you don't want to be vulnerable then find a more secure way to do this.

I used the Heroku-Client API to pull in Config Vars from a specific heroku app using node.js and use a get request to send them to the front-end.

//server.js
const express = require('express');
const http = require('http');
const path = require('path');
const Heroku = require('heroku-client')
const heroku = new Heroku({ token: process.env.API_TOKEN })
const app = express();

let API_KEY = '';

app.use(express.static(path.join(__dirname, 'dist')));

heroku.request({
  method: 'GET',
  path: 'https://api.heroku.com/apps/name-of-app/config-vars',
  headers: {
  "Accept": "application/vnd.heroku+json; version=3",
  "Authorization": "Bearer "+process.env.API_TOKEN
},
  parseJSON: true
}).then(response => {
  //console.log(response, "heroku api...");
  API_KEY = response.API_KEY;
})

app.get('/heroku-env', function(req, res){
    res.json(TOKEN);
});


app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'dist/index.html'))
});

const port = process.env.PORT || '3001';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost:${port}`));

Then use a service with HTTP to get the response to the frontend.

//EnvService.js
import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpHeaders, HttpRequest } from '@angular/common/http'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class EnvService{

  env:Observable<any> = null;

  constructor(private http:HttpClient){}

  getEnv() {
    console.log("trying to get heroku env...");
    this.env = this.http.get('/heroku-env')
    return this.env;
  }
}  

Import the service into app.module then subscribe for the res in your component to access the config vars.

//my.component.js
import { Component, ViewChild, Inject } from '@angular/core';
import { EnvService } from './env.service';

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})

export class MyComponent {
   defineToken: string = '';

   constructor(private envService: EnvService) {}

   loadEnv() {
      this.envService
        .getEnv().subscribe(res => {
          this.token = res; 
    })
   }

  ngOnInit() {
    this.loadEnv();
   }
 }

references: https://github.com/heroku/node-heroku-client