CAAI-Front End #3 Git & Docker Push

🚀 Deploying Your Angular App with Docker – The Fun Way!

Prerequisite: Installation of 

1. Docker Desk top 
2. Visual Studio Code, (with or w/o your angular project)
3. Node.js,  
4. Docker Extension for VS. 

Let’s break it down into two easy stages. No boring explanations—just simple, fun, and straight to the point! 🎉

---

🎨 Step 1: Create Your Angular Project

First things first, let’s create our Angular project and get things rolling. Open your terminal and type:

ng new front-end  # This creates a new Angular app Skip this if u have already project
cd front-end      # Move into the project folder
ng serve          # Start the app on localhost:4200

Now, check if your app is running in the browser. If yes, you’re awesome. If not, well… double-check the steps above. 😆

---

🐳 Step 2: Create the Dockerfile

Docker loves instructions, so we’ll create a Dockerfile to tell it what to do. Create a file named Dockerfile in your project root and add the following:

🔨 Stage 1: Build Angular Code

# Use the latest Node.js for building
FROM node:latest AS build

WORKDIR /usr/local/app

COPY ./ /usr/local/app/

RUN npm install  # Install dependencies
RUN npm run build  # Build the Angular app

What’s happening here? We:

1. Pulled the latest Node.js image
2. Set our working directory
3. Copied all our project files into the container
4. Installed dependencies & built the project (Boom! 🎆)

🌐 Stage 2: Serve with Nginx

# Use the latest Nginx image for serving the app
FROM nginx:latest

COPY --from=build /usr/local/app/dist/front-end /usr/share/nginx/html  # Change 'front-end' if needed

EXPOSE 80  # Open port 80 for the webserver

Now, we:

1. Pulled the latest Nginx image
2. Copied the compiled Angular app to the Nginx web root
3. Exposed port 80 so the world can see our masterpiece 🌎

---

🚢 Step 3: Build & Run the Docker Image

Build the Angular project before creating the image:

ng build  # This will generate the 'dist' folder

Now, let’s build the Docker image and run it:

docker build -t my-angular-app .  # Replace 'my-angular-app' with your preferred name
docker run -p 80:80 my-angular-app  # Runs your app on port 80

🎉 Open your browser and visit http://localhost:80—your Angular app is now running inside a Docker container! 🚀

---

📌 Step 4: Push Your Project to GitHub (With Git hub account for immbizsoft)

Let’s store our project in a GitHub repository. First, initialize Git:

git init  # Initialize a new Git repository
git add .  # Stage all files
git commit -m "Initial commit"  # Commit the files

Now, connect your project to GitHub:

git remote add origin https://github.com/immbizsoft/front-end.git  # Replace with your actual repository URL
git branch -M main  # Set the default branch to main
git push -u origin main  # Push your code to GitHub

Boom! 🎆 Your Angular project is now safely stored on GitHub.

---

🏁 That’s It!

Now you’ve officially dockerized your Angular app AND pushed it to GitHub! You can share it, deploy it, or just feel cool knowing you’re a DevOps pro. 😎

Got any questions? Drop them in the comments below! Happy coding! 💻🎈