How to create a Docker container of an AngularJS app?

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 nginxCOPY ./ /usr/share/nginx/htmlEXPOSE 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

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 builderCOPY 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 buildRUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-appWORKDIR /ng-appCOPY . .## Build the angular app in production mode and store the artifacts in dist folderRUN $(npm bin)/ng build --prod --build-optimizer### STAGE 2: Setup ###FROM nginx:1.13.3-alpine## Copy our default nginx configCOPY nginx/default.conf /etc/nginx/conf.d/## Remove default nginx websiteRUN rm -rf /usr/share/nginx/html/*## From 'builder' stage copy over the artifacts in dist folder ## to default nginx public folderCOPY --from=builder /ng-app/dist /usr/share/nginx/htmlCMD ["nginx", "-g", "daemon off;"]

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.