DEV Community: Nicolas Beaussart

Docker a Angular application with dynamic environement

Nicolas Beaussart — Tue, 09 Jul 2019 17:00:06 +0000

As we have seen in my previous post, we can do dynamic configuration in angular. A great use of it is in a docker container ! We will create a multi step docker build to have minimal size possible and have with dynamic configuration. But first, we need to create the nginx config for our application.

Prerequisites

NodeJS +8
Angular CLI (npm i -g @angular/cli@latest or yarn global add @angular/cli@latest)
Anguler runtime configuration as seen in my previous post
Docker +17.05
Basic understanding of Docker and Angular CLI commands

NGINX config

Our first step will be to configure our NGINX server to serve our application and gzip it so we have a better performance :

# ./docker/nginx/default.conf

server {
  listen 80;

  sendfile on;

  default_type application/octet-stream;

  gzip              on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   1100;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;


  root /usr/share/nginx/html;


  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

Once we have it, we can make the docker container !

Dockerfile

Our dockerfile will have two stages. One will build our application and the other stage will have the build application with only NGINX running on it.

This is how we can achieve that :

### STAGE 1: Build ###

# We label our stage as 'builder'
FROM node:9 as builder

COPY package.json yarn.lock ./

## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN yarn install && mkdir /ng-app && mv ./node_modules ./ng-app/

## Move to /ng-app (eq: cd /ng-app)
WORKDIR /ng-app


# Copy everything from host to /ng-app in the container
COPY . .

## Build the angular app in production mode and store the artifacts in dist folder

RUN yarn build --prod --output-path=dist


### STAGE 2: Setup ###

FROM nginx:1.13.3-alpine

## Copy our default nginx config
COPY docker/nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

Our final step will be to create a docker-compose with the config !

Docker compose

Here is our docker-compose.yml :

version: '3.1'

services:
  web-app:
    build: .
    ports:
      - 8090:80
    volumes:
      - ./front-config/local.json:/usr/share/nginx/html/assets/config.json

Here, I build a local image, but you can use the image tag instead to use a build image.

Here we have it! A fully configurable docker image with an Angular application!

Runtime config with Angular

Nicolas Beaussart — Mon, 17 Jun 2019 18:08:47 +0000

In angular, there is by default a buildtime config, it works well, but it have some disadvantages :

To change a config, you have to rebuild your application
Doesn't respect the "Build once, deploy everywhere" devops philosophy

For example, if you want to build your angular project into a docker image and use only the buildtime config, you will need to build every time the docker in order to point to another back-end !

The solution is Runtime config.

Runtime config is a config file, usually fetched at startup, containing configs like the server URL or other details.

Luckily, Angular have a hook to run something at startup, APP_INITIALIZER and we can use this to fetch the config at startup !

First, let's make the config.json file, in the assets folder :

{
  "API_URL": "http://localhost:3000"
}

Then we can make the service that will fetch the configs :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class AppConfigService {
  private appConfig;

  constructor(private http: HttpClient) {}

  loadAppConfig() {
    return this.http
      .get('/assets/config.json')
      .toPromise()
      .then(data => {
        this.appConfig = data;
      });
  }

  getServerUrl(): string {
    return this.appConfig.API_URL;
  }
}

As you can see, you have to return a promise and not an observable, as APP_INITIALIZER needs a promise and not an observable.

Once we have this service, we have to edit the app.module.ts with a function to load the config

const initializerConfigFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

And provide it in the main module :

@NgModule({
  imports: [
    ...
    HttpClientModule,
    ...
  ],
  providers: [
    ...
    {
      provide: APP_INITIALIZER,
      useFactory: initializerConfigFn,
      multi: true,
      deps: [AppConfigService],
    },
    ...
  ],
})
export class AppModule {}

Here we have it ! Your application will be run after the fetch of the config.json.

Bonus : auto http prefixer

With that, we can make a auto http prefixer using our previously fetch settings :

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { AppConfigService } from '../services/app-config.service';

 /**
 * Prefixes all requests not starting with `http[s]` with the dynamic config.
 */
@Injectable()
export class ApiPrefixInterceptor implements HttpInterceptor {
  constructor(private readonly appConfig: AppConfigService) {}

   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!/^(http|https):/i.test(request.url) && !request.url.startsWith('/assets/')) {
      request = request.clone({ url: this.appConfig.getServerUrl() + request.url });
    }
    return next.handle(request);
  }
}

Then provide it in our AppModule :

@NgModule({
  imports: [
    ...
    HttpClientModule,
    ...
  ],
  providers: [
    ...
    {
      provide: APP_INITIALIZER,
      useFactory: initializerConfigFn,
      multi: true,
      deps: [AppConfigService],
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiPrefixInterceptor,
      multi: true
    },
    ...
  ],
})
export class AppModule {}

There you have it ! Automatic url prefixer from a dynamic url fetch from a config.json !

So I've been sorting my Github stars

Nicolas Beaussart — Thu, 09 Nov 2017 13:54:09 +0000

This post was first written on my blog.

I'm a big fan of github stars, I use it to keep projects in hand if needed, like a cool library, or a software I want to try. It's a nice way to store project, plus it gives value to the project!

But the github way of doing it is quite simple : you can make a basic search, sort them, and that's it! It gets more complicated when you have a lot of them...

I have 453 github stars and I wanted to find a way to sort them in folders and categories, that's when I found Astral on github trending system.

Astral is a tool that hooks on your github and let you add tags to them, and it's open source too! :D

A new feature is the ability to sort by language, based on the language inside the repository, and it's working great!

Thanks to it, it's easier to find the one project you stared one year ago so you can finally test it! And you, what do you use to manage project you want to try out?