How to Install Angular CLI and Bootstrap4 Inside Docker Container

Cloud Native is a term created by the devops community to describe the ecosystem to run containers in a distributed environment.  In this tutorial we will install Angular CLI and Bootstrap4 inside a docker container that can be used in a Cloud Native environment.

Installing Angular CLI Container

Install Angular2 CLI on your machine:

npm install -g angular-cli
ng new awesome-app --style=scss
cd awesome-app

Install Bootstrap sass and its dependencies

npm install --save bootstrap@next;

npm install –save node-sass; npm rebuild node-sass;

Open up package.json and change –host 0.0.0.0 to npm start:

{
  "name": "awesome-app",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "node-sass": "^4.3.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.25.5",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

Then add the needed script files to apps[0].scripts:

"scripts": [
	"../node_modules/jquery/dist/jquery.js",
	"../node_modules/tether/dist/js/tether.js",
	"../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array:

"styles": [
	"../node_modules/bootstrap/dist/css/bootstrap.css",
	"styles.scss"
],

Create a Dockerfile:

FROM node:alpine

MAINTAINER <username@emailaddress.com>

# Install bash
RUN apk add --update bash && rm -rf /var/cache/apk/*

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install 

# Bundle app source 
COPY . /usr/src/app 

EXPOSE 4200 
CMD [ "npm", "start" ]

Now we can build our docker image:

docker build -t <yourusername>/ng-frontend-container .

Run a Docker container using the image:

docker run  -it -p 4200:4200 -v "$PWD":/usr/src/app --name ng-frontend-container  -d <yourusername>/ng-frontend-container

See the containers logs, we see that we are getting an error with node-sass:

docker logs ng-frontend-container -f

To fix node-sass bindings, log into the containers bash shell by typing:

docker exec -it ng-frontend-container /bin/bash

Once your in the container’s bash shell, run this command and exit:

npm rebuild node-sass
exit

Restart the container:

docker restart ng-frontend-container

Create docker-compose.yml file and put this into its contents:

version: '3'
services:
  ng-frontend-container:
    container_name: ng-frontend-container
    image: <yourusername>/ng-frontend-container
    build: .
    ports:
     - "4200:4200"
    volumes:
     - .:/usr/src/app

Now you can use docker-compose to launch your container:

docker-compose up -d

If you check the logs of the container and follow it, you’ll see that it takes quite awhile for the container to download all of NPM’s packages and dependencies:

docker logs ng-frontend-container

After a few moments, you check localhost port 4200 to see that the app is successfully running inside the docker container.

http://localhost:4200/

Congratulations! You now have a Docker container with Angular CLI app inside of it.