How to create a Docker container of an AngularJS app?

Question

I have an AngularJS app that has this structure:

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html

How do I go about creating my own image out of this and running it on a container? I've tried running it with no success with a Dockerfile and I'm relatively new to Docker so apologies if this is simple. I just want to run it on a http server (using nginx perhaps?)

I've tried these for help, to no success:

• https://www.quora.com/Can-I-have-an-Angular-app-on-Docker-container
• AngularJS and NodeJS app in Docker
• Dockerize your Angular NodeJS application

Answer 1

First of all, follow this best practice guide to build your angular app structure. The index.html should be placed in the root folder. I am not sure if the following steps will work, if it's not there.

To use a nginx, you can follow this small tutorial: Dockerized Angular app with nginx

1.Create a Dockerfile in the root folder of your app (next to your index.html)

FROM nginx
COPY ./ /usr/share/nginx/html
EXPOSE 80

2.Run docker build -t my-angular-app . in the folder of your Dockerfile.

3.docker run -p 80:80 -d my-angular-app and then you can access your app http://localhost

Answer 2

building on @adebasi answer I want to highlight this Dockerfile to be used with current Angular CLI application.

It uses Dockers' multi-stage build feature introduced in 17.05. In Step 1 the Node container is only used to create a build. The final image will use Nginx and statically deliver the built files.

### STAGE 1: Build ###    
# We label our stage as 'builder'
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

## Storing node modules on a separate layer will prevent 
## unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --prod --build-optimizer


### STAGE 2: Setup ###

FROM nginx:1.13.3-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder 
## to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

Answer 3

Generally,

Docker is used to dockerize applications. Now an application merely does not consists of JavaScript only (as AngularJS is a JS framework) unless you choose a back end framework like Node, ASP.NET Core, Python etc. So if you have only straightforward HTML application, use a reversed-proxy or a web server container as mentioned by Robbie. For a simple case (Nginx example):

• Download the Nginx Docker image from the Hub.
• Use Volumes or create your own image to hold your configurations
• Expose a port from the container to the host.