fbpx

How to Dockerize an AngularJS App

Do you have an AngularJS project that you would like to build into a Docker container? If   yes, you will have to start with making a Dockerfile inside your projects base folder.

### STAGE 1: Build the AngularJS app ###

FROM node:8-alpine as builder
COPY package.json package-lock.json ./
RUN npm set progress=false && npm config set depth 0 && npm cache clean --force
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app
WORKDIR /ng-app
COPY . .
## Production mode build
RUN $(npm bin)/ng build --env=staging --prod --build-optimizer


### STAGE 2: Add Nginx for hosting the AngularJS app ###

FROM nginx:1.13.3-alpine
## Removes the default nginx html files
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /ng-app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
Place the above contents in a filed called Dockerfile, and place this file in your projects base folder

Once you have the Dockerfile placed, you can use Docker itself to build the AngularJS project. You do not need to build your AngularJS project separately.

Building the Docker container

Run the following command from your project’s base folder. This is the same location as where you placed your Dockerfile.

docker build .

You can also build your container by naming and tagging it, with the following command

docker build -t blobcity/angular-app:latest .

This will create the container blobcity/angular-app with the tag latest

Running the Docker container

You can start the container using the following docker run command. When the container is started, the AngularJS app is deployed and ready to use.

docker run blobcity/angular-app:latest

If you are running this command on your own computer, then open the browser at the following URL to use your AngularJS application

http://localhost:80

If you have started the Docker container on a remote server, you will need a public IP address to that server for using your AngularJS app

http://<server-ip>:80

 

%d bloggers like this: