https://github.com/maslick/angularchik
runtime-configurable static angular web-app
https://github.com/maslick/angularchik
angular docker k8s nginx npm
Last synced: 2 months ago
JSON representation
runtime-configurable static angular web-app
- Host: GitHub
- URL: https://github.com/maslick/angularchik
- Owner: maslick
- Created: 2019-11-10T21:14:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T13:21:14.000Z (over 3 years ago)
- Last Synced: 2025-01-26T18:47:44.221Z (over 1 year ago)
- Topics: angular, docker, k8s, nginx, npm
- Language: TypeScript
- Size: 3.6 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-chik
runtime-configurable static angular web-app
[](https://hub.docker.com/r/maslick/angularchik)
## Docker multistage build
[Here](docker/Dockerfile) 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:
```zsh
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:
```zsh
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.:
```zsh
$ cat docker/variables.ini
URL
USER
KEY
```
* Add this code snippet to your main index.html (put in to ````):
```html
window.ENV = {
backendUrl: "${URL}",
user: "${USER}",
key: "${KEY}"
};
```
* Add an environment file:
```zsh
$ 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](src/app/settings/settings.component.ts) for a complete example):
```typescript
import { runtimeEnvironment } from '@env/environment.runtime';
console.log(runtimeEnvironment.backendUrl);
```