maslick / angularchik

runtime-configurable static angular web-app

angular-chik

runtime-configurable static angular web-app

Docker multistage build

Here I'm using node:12 image as build image and nginx:stable as runtime image. This reduces image size from ~500MB to 50MB (zipped).

• Build yourself:

docker build -t angularchik -f docker/Dockerfile .
docker image prune --filter label=stage=intermediate -f
docker run -d \
   -e URL=maslick.io \
   -e USER=test \
   -e KEY=54321 \
   -p 8081:8080 \
   angularchik:latest
open http://`docker-machine ip`:8081

• Download from Dockerhub:

docker run -d \
   -e URL=maslick.ru \
   -e USER=test \
   -e KEY=12345 \
   -p 8082:8080 \
   maslick/angularchik:latest
open http://`docker-machine ip`:8082

Kubernetes

kubectl apply -f k8s/deployment.yaml
kubectl apply -f k8s/ingress_dns.yaml

• Update environment settings:

k set env deployment/angularchik \
   URL=www.yandex.ru \
   USER=maslick \
   KEY=987654321

Use in your projects

• Add env variable names to variables.ini, e.g.:

$ cat docker/variables.ini
URL
USER
KEY

• Add this code snippet to your main index.html (put in to <header></header>):

<script>
  window.ENV = {
      backendUrl: "${URL}",
      user: "${USER}",
      key: "${KEY}"
  };
</script>

• Add an environment file:

$ cat src/environments/runtimeEnvironment.ts
declare var ENV;

export const runtimeEnvironment = {
  backendUrl: ENV.backendUrl === '${URL}' ? 'www.google.com' : ENV.backendUrl,
  user: ENV.user === '${USER}' ? 'user' : ENV.user,
  key: ENV.key === '${KEY}' ? '12345' : ENV.key
};

• Use the injected env vars in your code (see settings.component.ts for a complete example):

import { runtimeEnvironment } from '@env/environment.runtime';
console.log(runtimeEnvironment.backendUrl);