Streamline Angular Development with Docker: Live Changes Without Rebuilding

Introduction: Why Angular and Docker?

1. Importance of Combining Angular with Docker

   • Brief overview of Angular's role in modern web applications.

   • Docker's capability to provide consistent development environments.

   • Highlight: "Stop wasting time on repeated builds. With this setup, your changes are instantly reflected!"

2. What Will This Blog Cover?

   • Creating a new Angular project.

   • Setting up a Dockerized development environment.

   • Running the Angular app inside a Docker container with live changes.

Step 1: Creating the Angular Project

1. Command to Create an Angular App

    ng new hr-tool --ssr false --routing true --style scss
   

   • Explain:

     • --ssr false: No server-side rendering.

     • --routing true: Adds Angular routing by default.

     • --style scss: Using SCSS for styling.

Now we will run the application with the command below.

Step 2: Writing the Dockerfile

1. Purpose of the Dockerfile

   • Explain how this file sets up the environment for Angular in Docker.

2. The Dockerfile Code

   Create a Dockerfile in the root folder of your project and write the following code inside it.

    FROM node:alpine
   
    WORKDIR /app
   
    COPY package*.json ./
   
    RUN npm install -g @angular/cli
    RUN npm install
   
    COPY . .
   
    CMD ["ng", "serve", "--host", "0.0.0.0", "--poll", "500", "--disable-host-check"]
   

   • Step-by-step breakdown:

     • node:alpine: Lightweight Node.js image.

     • WORKDIR /app: Sets /app as the working directory.

     • COPY and RUN: Installing Angular CLI and dependencies.

     • CMD: Ensures the Angular app runs in development mode, polling for changes.

Step 3: Writing the Docker Compose File

1. Purpose of Docker Compose

   • Manage multiple services (here, just the Angular app).

2. The docker-compose.yml Code

   Create a docker-compose.yml file in the root folder of your project and write the following code inside it.

    version: '3.8'
    services:
      hr-tool:
        build:
          context: .
          dockerfile: Dockerfile
        ports:
          - "4201:4200"
        volumes:
          - .:/app
          - /app/node_modules
        environment:
          - CHOKIDAR_USEPOLLING=true
   

   • Breakdown:

     • volumes: Syncs local files to the container for live changes.

     • environment: Enables polling for file changes in the container.

Step 4: Running the Application

1. First-Time Setup or After Dependency Changes

    docker-compose up --build
   

2. Subsequent Runs

    docker-compose up
   

   • Explain how volumes and polling make this process seamless.

Step 5: Folder Structure

1. Root Directory

2. src/ - Source Code Directory

   • app/ - Angular Application Code

   • assets/ - Static Assets

   • environments/ - Environment-Specific Configurations

3. node_modules/ - Installed Dependencies

4. e2e/ - End-to-End Testing Files

5. Configuration Files

   • angular.json

   • package.json

   • tsconfig.json

   • .editorconfig

6. Docker and Compose Files

   • Dockerfile

   • docker-compose.yml

Step 6: Testing Live Changes

1. Modifying the Angular App

   • Update a file, such as src/app/app.component.html.

   • Save the changes and see them reflected in the browser.

Conclusion: Why This Setup Matters

• Key Takeaways:

  • Saves development time with live updates.

  • Consistent and reproducible environment across systems.

• Next Steps:

  • Explore adding a backend service.

  • Deploy the app using Docker Compose in production.