Angular Docker Setup Tutorial: Step-by-Step Guide for Beginners

by

Setting up Angular applications with Docker can streamline your development process and simplify deployment. This step-by-step guide is designed for beginners to get started with Angular and Docker integration effectively.

Prerequisites

  • Basic knowledge of Angular framework
  • Docker installed on your machine
  • Node.js and npm installed
  • Angular CLI installed

Creating a New Angular Application

Start by creating a new Angular project using Angular CLI. Open your terminal and run:

ng new my-angular-app

Navigate into the project directory:

cd my-angular-app

Creating a Dockerfile

In the root of your project, create a file named Dockerfile with the following content:

FROM node:14-alpine AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build --prod

FROM nginx:stable-alpine
COPY --from=build-stage /app/dist/my-angular-app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Building the Docker Image

Run the following command in your terminal to build your Docker image:

docker build -t my-angular-app .

Running the Docker Container

Start a container from your image with this command:

docker run -d -p 80:80 –name angular-container my-angular-app

Accessing Your Angular App

Open your web browser and navigate to http://localhost. You should see your Angular application running inside the Docker container.

Additional Tips

  • Use docker ps to check running containers.
  • Use docker stop angular-container to stop the container.
  • Update your code, rebuild the image, and rerun the container as needed.

Integrating Angular with Docker simplifies deployment and ensures consistency across environments. With these steps, even beginners can set up their Angular applications efficiently using Docker.