How to dockerize angular application?

Ayyaz Zafar
2 min readFeb 20, 2023

--

Dockerizing an Angular app involves packaging your application code and dependencies into a Docker container, which allows you to run your app on any machine with Docker installed, without worrying about installing and configuring dependencies on the host machine.

Here are the general steps to dockerize an Angular app:

  1. Install Docker: If you haven’t installed Docker on your system, you can download and install it from the Docker website.
  2. Create a Dockerfile: The Dockerfile is a configuration file that describes how to build the Docker image. In the root folder of your Angular app, create a file named “Dockerfile” with the following contents:
# Use an official Node.js runtime as a parent image
FROM node:14-alpine

# Set the working directory to /app
WORKDIR /app

# Copy package.json and package-lock.json to /app
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy app source code to /app
COPY . .

# Build the app for production
RUN npm run build --prod

# Expose port 80 for the container
EXPOSE 80

# Start the app
CMD ["npm", "start"]

This Dockerfile uses the official Node.js Docker image as the base image and copies the app’s source code and dependencies to the image. It then builds the app for production and sets the default command to run the app.

3. Build the Docker image: In the same directory as the Dockerfile, run the following command to build the Docker image:

docker build -t my-angular-app .

This command builds a Docker image with the tag “my-angular-app” using the Dockerfile in the current directory. Make sure to include the dot at the end of the command, as it specifies the build context as the current directory.

4. Run the Docker container: After the Docker image is built, you can run it using the following command:

docker run -p 8080:80 my-angular-app

This command runs the Docker container and maps the container’s port 80 to the host machine’s port 8080. You can then access the Angular app by navigating to “http://localhost:8080" in your web browser.

That’s it! Your Angular app is now dockerized and can be deployed and run on any machine with Docker installed.

Please subscribe to my Youtube Channel to keep learning: AyyazTech

--

--

Ayyaz Zafar
Ayyaz Zafar

Written by Ayyaz Zafar

Enrol my Angular 18 course | Build FullStack Blog with CMS in Angular, Node, MySQL, Angular Material, Tailwind CSS https://bit.ly/angular-18-course

Responses (1)