Over the years the way we build, ship and run our applications has changed, thanks to Docker. It offers a consistent environment, making it easier to develop and deploy applications across different platforms. In this article, we’ll see how Dockerizing an Angular application is straightforward, allowing you to encapsulate your application and its dependencies into a container for easy deployment.
If you are not familiar with Docker I highly suggest you to check out this article before jumping into this one. Now let’s dive into the process.
Building the project
First of all make sure you have both Node.js and Angular CLI installed. After that initialize the project.
ng new
Now let’s run the server.
ng serve
Ready! Try to access the URL http://localhost:4200/ and check if the application is working.
Creating the Dockerfile
A Dockerfile is a text file that includes instructions for building a Docker image. Create the Dockerfile in your project’s root directory:
FROM node:20.16-alpine as build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:stable-alpine COPY --from=build /app/dist/docker-angular/browser /usr/share/nginx/html EXPOSE 80
We separated our configuration in two stages. In the first stage we use as base image node.js and we assign it an alias that we’ll be using later, in the second stage. Using the command WORKDIR we set the base path, then using the command COPY we copy our package.json, then with the command RUN we to dowlonad the dependencies, again we use COPY but this time we move the entire source code and at last we use RUN to build the project.
In the second stage we use nginx, which is a web server, as base image. Using the command COPY we copy the result of the previous build into nginx special directory where it will serve our application. Finally we use the EXPOSE command to expose nginx’s port to the outside and complete our configuration.
Building the image
At this point it’s time to build the image. Run the following command:
docker build -t docker-angular .
With the above command we tell Docker to create an image from our Dockerfile and with the parameter -t we also specify a tag.
Running the container
Now that we have our image ready we can start the container. Run the following command:
docker run -p 80:80 -d docker-angular
In our Dockerfile we exposed the port 80 and now we’re mapping it to our OS port 80 to make it reachable. With the parameter -d we’re starting our container in detech mode, which means that the Docker container runs in the background of your terminal and it doesn’t receive input or display output.
Testing the application
We’ve finally come to the last step, testing the application and see if it works as it should. Open your browser and access http://localhost:80.
Conclusion
In this article we’ve seen how dockerizing an Angular application offers a range of benefits, including increased portability, isolation, scalability, and ease of deployment. The source code of this project is on GitHub.
