Angular with Docker

First, you’ll need to install docker if you haven’t already installed. You can download and install them from the official website:
https://www.docker.com/products/docker-desktop

Now, you can follow these steps to add docker in angular:

1. Create a Docker file in the root directory of your Angular project with name “Dockerfile”. This file will be used to define the Docker image that will be used to run your Angular application. Here’s an example Dockerfile:

# Use an official Node.js runtime as a parent image
FROM node:14 AS build

# Set the working directory to /app
WORKDIR /app

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

# Install dependencies
RUN npm install

# Copy the rest of the application files to the container
COPY . .


# Build the application
RUN npm run build

# Serve the application using a simple HTTP server
FROM node:14-alpine
WORKDIR /app
COPY --from=build /app/dist/first-angular /app
RUN npm install -g http-server
CMD ["http-server", "-p", "4200", "-c-1", "."]  
# HTTP server using the http-server package, with the -p 4200 option to specify the port and the -c-1 option to disable caching.

2. Build the Docker image by running the following command in the terminal , while in the same directory as the Dockerfile:

docker build -t my-angular-app .

This will build a Docker image with the tag my-angular-app.

Get shubham mishra’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

3. Run the Docker container by running the following command in the terminal:

docker run -p 4200:4200 my-angular-app

This will start the container and map port 4200 of the container to port 4200 on the host machine. You should now be able to access your Angular application by navigating to http://localhost:4200 in a web browser.

Refer https://github.com/iamshubhammishra/login-registration/blob/master/Dockerfile

In the next article, we will see how to create login & registration form.

If you found this article helpful, please consider giving it a like and sharing it with your friends and colleagues to help spread the word!