Skip to content

Instantly share code, notes, and snippets.

@jigneshkhokhani
Created April 11, 2023 14:35
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jigneshkhokhani/ec3db17ffc59813492c05f2982254d09 to your computer and use it in GitHub Desktop.
Save jigneshkhokhani/ec3db17ffc59813492c05f2982254d09 to your computer and use it in GitHub Desktop.
angular-new-docker-app-creator : Create new angular app from docker it-self. It will create full angular directory without installing anything in local system.

How to create new angular app using Dockerfile

  1. Create a new folder for your new angular app

    $ mkdir blog-front-app
    $ cd blog-front-app
  2. Create a new Docker.angular file with the below content

    FROM node:16.20.0-alpine as angular-app-creator
    
    # You can change app folder name as per your wish
    WORKDIR /blog-front-app
    
    # fetch dependencies
    RUN apk update && npm install -g @angular/cli
    

    You can use the different node image file as per your requirement.

  3. After creating the Dockerfile.angular Run below command to build the Docker image.

    $ docker build -f Dockerfile.angular -t angular-app-creator:latest .
  4. Now you can check the created image by running docker image ls command.

  5. Use newly created image to generate new angular app by running container using that image.

    $ docker run --rm -it -v $(pwd):/angular-app -v blog-front-app-bundle-cache:/bundle angular-app-creator

    It will open bash shell to run ubuntu command. Now run the ng new . command in container bash shell to generate new angular app.

    $ ng new blog-front-app --directory ./

    Pass --directory option with app name to generate app directory structures in current folder. So in our case, it will not create new folder blog-fornt-app and just generate all directory structures in current directoy and use app name in configuration file.

  6. Now you can check created directory structure in your local system in the same folder(eg, /blog-front-app).

version: '3.8'
services:
front:
build:
context: .
container_name: angular_app
ports:
- 4200:4200
volumes:
- .:/front-app
tty: true
FROM node:16-alpine
WORKDIR /front-app
COPY package*.json ./
RUN npm install
# Mentioned exposed port for documentation
EXPOSE 4200
CMD ["npm", "start"]
FROM node:16.20.0-alpine as angular-app-creator
WORKDIR /front-app
# fetch dependencies
RUN apk update && npm install -g @angular/cli
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment