Dockerize Angular application

Dockers aren’t really a new thing around, but in many cases developers are spending time to create proper image or trying different Dockerfile configurations, or simply they don’t pay attention to re-usability and multi environment build.

Therefore I will try to explain step by step how to make reusable docker file where you can send different flags to get different angular builds.

*All mentioned files below, are into Angular project root folder

Dockerfile

Intent of the result is to work with a standalone frontend , that will communicate with backend over API or similar.

*You might need to modify some minor things inside the Dockerfile e.g node-alpine version or destination folder etc.

Running this file in summary will do following things:

• it will copy your project to a tmp directory
• it will execute new ng build command and create fresh build of your angular app.
• it will copy dist folder to new app folder from where docker image server will run
• it will remove all global libraries and then run new static nodejs server.

Package2.json ?

In order to be able to complete all this operations locally, without having a docker (for test purposes), inside the angular project, most likely you will add devDependency libraries to your package.json file where you will install …

• express *use other libraries by your preference

… that will serve you for the purpose of running static nodejs server.
But after build is made on docker side everything outside /dist folder is no longer needed, meaning that all angular node_modules that were used for the build process itself are also not needed. So to be able to run the static server inside the docker image, you will need express* to be present in the package.json dependencies and also have it installed in node_modules. For this purpose we create new package2.json file which will have only the libraries needed for nodejs server to run, and it will have it copied to the app folder , then installed all dependencies from that file.

Server.js

Server.js or the main file that will be executed for running up the nodejs server is very simple JavaScript file, with just few lines of code that will be executed.

You can expand this file with many different functionalities/libraries, which you will also have to have them in package2.json as dependencies.

Actual build commands

After you made all configurations/files it is time to execute the command for making the new docker build.

1. docker build -t image:name — build-arg port=8080 — build-arg host=”0.0.0.0" — build-arg envr=”test” — build-ard angular=”8.3.26" .
   * you should provide your own image:name, port that will be exposed, IP on which nodejs server will listen and version of angular that should be installed.
   * “test” environment should be also set in angular.json file under build property
2. docker run -p 8080:8080 -d <image-name>
   *<image-name> should be replaced with image:name that you will provide when executing `docker build` command, also port number should match to your build args and port on which docker image will listen externally

Additional commands that you might find helpful

1. docker image ls
   *to list all docker images
2. docker ps -a -q — filter ancestor=<image-name>
   *to find the container ID by image name
3. docker stop <ID>
   *to stop container from running by its ID (from the command 2 in this list)
4. docker history — human — format “{{.CreatedBy}}: {{.Size}}” <image-name>
   *to see the size of the docker image and which part of the image is the biggest in case you want to reduce image size.

Original files are placed at: https://github.com/igorjos/medium/tree/master/docker-story
you can download them and modify by your needs.

*Further variations and modifications are definitely possible, while this is only one of the approaches how to have reusable build script.

Thanks for reading, hope this post will help you.
Read more from me at: https://medium.com/@yoshevski