Dockerize Angular App for Dev

Hi Friends, This is Lakshman here.

Welcome back to the Series Angular Best Practices

Today, We will Dockerize your angular app for Development.

Now as days, we develop application with multiple developers. Each one have there own Node.JS Environment.

To Solve this issue we can containerize your application to run inside Docker.

Pre-requisites:

The pre-requisites are

• Install Docker - Click Here
• Node.JS - Click Here
• Angular CLI - Click Here

Once Install Docker & Node.JS install Angular CLI via NPM Package Manager.

Implementation:

On your Existing Angular Application, Create a File Called Dockerfile.Dev

• Dev indicates for Development Docker File.

Inside that Dockerfile.Dev, Copy the below code

#  Create a new image from the base nodejs 12.7 image.
FROM node:12.7-alpine
# Create the target directory in the image
RUN mkdir -p /usr/src/app
# Set the created directory as the working directory
WORKDIR /usr/src/app
# Copy the package.json inside the working directory
COPY ./package.json /usr/src/app
# Install required dependencies
RUN  npm install;

# Copy the client application source files. You can use .dockerignore to exlcude files. Works just as .gitignore does.
COPY ./ /usr/src/app
# Open port 4200. This is the port that our development server uses
EXPOSE 4200
# Start the application. This is the same as running ng serve.
CMD ["npm", "start"]

Once finished Add File called .dockerignore, inside that file copy code below

.dockerignore node_modules

Now we need to modify your package.json to set the Host for ng serve command as below,

{
    ...
    Scripts: {
        "start": "ng serve --host 0.0.0.0"
        ...
    }
}

After Added these files now we need to build that Application via below command,

docker build -t <appN-name>:dev -f Dockerfile.Dev .

Once Build is completed, we can run that app via below command,

docker run -it --rm -p 9001:4200 -v ${PWD}/src:/usr/src/app/src --name <container-name> <app-name>:dev

On Every Source code change it will reload the App in browser.

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.