🧮 Angular Calculator App

A lightweight, responsive web calculator built with Angular 17, developed and deployed on AWS EC2 instances with Nginx hosting.
This project demonstrates a complete build-and-deploy pipeline using Node.js, Angular CLI, and secure SSH transfer between servers.

---

📘 Project Overview

This project involves:

• Setting up two EC2 servers (Build & Deploy)
• Building the Angular application using Node.js and Angular CLI
• Transferring production build artifacts to the deployment server
• Hosting the Angular app using Nginx

---

🧱 Infrastructure Setup

Server	Role	Purpose
Build Server	Development & Build	Compiles the Angular app and produces the production-ready build files
Deploy Server	Hosting	Serves the static files using Nginx
Communication	Secure Copy (SCP)	.pem key used for SSH and file transfer between instances

---

⚙️ Build Server Configuration (Ubuntu EC2)

1️⃣ Update & Install Essentials

```bash sudo apt -y update sudo apt-get install -y nodejs sudo apt install npm -y ````

2️⃣ Clone the Application

git clone https://github.com/Ai-TechNov/AngularCalculator.git
cd AngularCalculator

3️⃣ Update Project Files

Manually edited:

• package.json → updated to latest Angular dependencies
• angular.json → adjusted for modern Angular schema compliance

4️⃣ Install Angular CLI & Dependencies

npm install
sudo npm install -g @angular/cli@latest

5️⃣ Fix Node.js Version Compatibility

When the build showed:

Node.js version v18.19.1 detected.
The Angular CLI requires a minimum Node.js version of v20.19 or v22.12.

Updated Node to the latest version:

sudo apt remove -y nodejs
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

Verify:

node -v   # v20.19.5
npm -v    # 10.8.2

Clean cache and verify Angular CLI:

sudo npm cache clean -f
ng version

Enable autocompletion:

ng completion

---

🏗️ Build Process

Build the Angular app for production:

ng build --configuration production

The build output is generated inside:

/home/ubuntu/AngularCalculator/dist/angularCalc

---

🚀 Deployment Server Configuration (Ubuntu EC2)

1️⃣ Secure File Transfer from Build Server

Transfer build files using .pem SSH key:

sudo chmod 400 Linux-Practice.pem
scp -i Linux-Practice.pem /home/ubuntu/AngularCalculator/dist/angularCalc/* ubuntu@13.51.160.159:/home/ubuntu/

2️⃣ Install and Configure Nginx

sudo apt update -y
sudo apt install nginx -y

3️⃣ Move Build Files to Web Directory

sudo mv * /var/www/html/

4️⃣ Start and Verify Nginx

sudo systemctl status nginx

Expected output:

nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; preset: enabled)
Active: active (running)

Optional cleanup:

sudo rm -rf /var/www/html/index.nginx-debian.html

✅ The Angular app is now hosted and accessible via:

http://<Deploy-Server-Public-IP>/

---

🌐 Example Directory Structure

AngularCalculator/
├── dist/
│   └── angularCalc/
│       ├── index.html
│       ├── main.js
│       ├── runtime.js
│       ├── styles.css
│       ├── polyfills.js
│       └── assets/
├── src/
├── package.json
├── angular.json
└── README.md

---

🔒 Security Considerations

• Only ports 22 (SSH) and 80 (HTTP) were opened.

• .pem key permissions restricted using:

  chmod 400 Linux-Practice.pem

• No sensitive environment variables are stored in the codebase.

---

🧰 Tech Stack

Component	Version	Purpose
Angular	17.3.x	Frontend Framework
Node.js	20.19.x	JavaScript Runtime
NPM	10.8.x	Package Manager
Nginx	Latest	Web Server for static hosting
Ubuntu	22.04 LTS	OS for EC2 servers

---

🧪 Testing the App

Run the app locally:

ng serve

Build for production:

ng build --configuration production

Deploy and test via browser:

http://<your-server-ip>/

---

🧩 Troubleshooting

Issue	Cause	Solution
ng: command not found	Angular CLI not installed globally	sudo npm install -g @angular/cli@latest
Node.js version too low	Node < 20	Reinstall Node 20 LTS
Schema validation failed	Old angular.json	Replace with Angular 17 schema
Port already in use	Nginx already running	sudo systemctl restart nginx

---

👨‍💻 Author

Sivaiah Jagadapi Power BI Developer | Cloud & DevOps Enthusiast 📍 Hyderabad, India 🌐 GitHub: Ai-TechNov

---

🏁 License

This project is open-source under the MIT License. You are free to modify, distribute, and reuse the code with attribution.

---

---

✅ **Now do this:**
1. Copy everything above (from `# 🧮 Angular Calculator App` to the end).  
2. Paste into your project’s `README.md`.  
3. Commit and push:  
   ```bash
   git add README.md
   git commit -m "Added detailed project documentation"
   git push

Would you like me to add a visual architecture diagram (Build → SCP → Deploy → Nginx) as Markdown image placeholder at the top of your README?