Dockerize an Angular Application

Photo by Rubaitul Azad on Unsplash

Docker allows the easy transport and execution of apps by developers on all types of operating systems without having to install anything except for the Docker service.

Today let's learn how to “dockerize” our Angular application to make it easy to to run by others and packaged ready for deployment.

Below is an example simple Dockerfile that will containerize our Angular application:

You can copy and paste the above in a file named Dockerfile in the same folder as your code.

Now let’s build our docker image with the following:

docker build -t myApp -f Dockerfile .

• -t flag specifies the tag name of the image you are building
• -f flag specifies the Dockerfile location to use to generate the image
• . at the end of the above command specifies the context to send to the docker builder. For example, if you had your code in a code folder, you could say docker build -t myApp -f Dockerfile code instead

Awesome! Now we have a built image with our Angular code. To run the image use the following:

docker run --rm -it -p 4200:4200 myApp

• --rm will stop the image and remove it when you hit Ctrl + C
• -p is mapping the port from the external (local computer) to the internal image port. You can leave the first 4200 off to let docker select a random port for you

You should now see your app running at localhost:4200 !

If you prefer learning from videos, checkout the tutorial below:

Feel free to leave a response if you have any questions and click the 👏 button if you like the article. Don’t forget to follow me so you don’t miss out on future Angular and Docker articles!