Azure Fullstack CI/CD Pipeline (GitHub Actions)
Azure Fullstack CI/CD Pipeline is a learning-focused repository that demonstrates how to design and implement CI/CD pipelines for a fullstack application using GitHub Actions and Microsoft Azure.
The project focuses on deployment workflows rather than application complexity, making it a clean and practical reference for understanding real-world CI/CD structures.
What This Project Demonstrates
• Separate CI/CD pipelines for frontend and backend.
• Path-based GitHub Actions triggers (client/** and server/**).
• Frontend deployment to Azure Static Web Apps.
• Backend deployment to Azure App Service.
• Environment variable injection during build time.
• Secure secret management using GitHub Actions secrets.
CI/CD Architecture
Frontend Pipeline
The frontend pipeline is triggered when changes occur under the client/ directory.
It installs dependencies, injects the backend API URL into environment variables, builds the Vite + React
application, and deploys the generated dist/ files to Azure Static Web Apps.
Backend Pipeline
The backend pipeline runs when changes occur under the server/ directory.
It builds the NestJS application, prepares a clean production bundle, installs production-only dependencies,
packages the app into a ZIP archive, and deploys it to Azure App Service using ZIP deploy.
Azure Setup (Simplified)
Frontend: Azure Static Web App connected to GitHub (main branch).
Backend: Azure App Service (Node.js, Linux).
Deployment credentials and tokens are securely stored as GitHub Actions secrets.
Local Development
The project can be run locally using two terminals. The NestJS backend runs on
http://localhost:3000, while the Vite + React frontend runs on
http://localhost:5173. Environment variables are injected using .env files.
Learning Focus
This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to keep the focus purely on CI/CD concepts, deployment automation, and Azure integration.
Source Code
View the complete repository on GitHub:
https://github.com/lochana0513/azure-fullstack-cicd-pipeline
Related Projects
View all projects →
Fullstack Containerized Deployment with Azure ACR
Azure Fullstack CI/CD Pipeline is a learning-focused repository that demonstrates how to design and implement CI/CD pipelines for a fullstack application using GitHub Actions and Microsoft Azure. The project focuses on deployment workflows rather than application complexity, making it a clean and practical reference for understanding real-world CI/CD structures. What This Project Demonstrates • Separate CI/CD pipelines for frontend and backend. • Path-based GitHub Actions triggers (client/** and server/**). • Frontend deployment to Azure Static Web Apps. • Backend deployment to Azure App Service. • Environment variable injection during build time. • Secure secret management using GitHub Actions secrets. CI/CD Architecture Frontend Pipeline The frontend pipeline is triggered when changes occur under the client/ directory. It installs dependencies, injects the backend API URL into environment variables, builds the Vite + React application, and deploys the generated dist/ files to Azure Static Web Apps. Backend Pipeline The backend pipeline runs when changes occur under the server/ directory. It builds the NestJS application, prepares a clean production bundle, installs production-only dependencies, packages the app into a ZIP archive, and deploys it to Azure App Service using ZIP deploy. Azure Setup (Simplified) Frontend: Azure Static Web App connected to GitHub (main branch). Backend: Azure App Service (Node.js, Linux). Deployment credentials and tokens are securely stored as GitHub Actions secrets. Local Development The project can be run locally using two terminals. The NestJS backend runs on http://localhost:3000, while the Vite + React frontend runs on http://localhost:5173. Environment variables are injected using .env files. Learning Focus This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to keep the focus purely on CI/CD concepts, deployment automation, and Azure integration. Source Code View the complete repository on GitHub: https://github.com/lochana0513/azure-fullstack-cicd-pipeline
Hotel Booking Application (State Management - Redux Toolkit)
Azure Fullstack CI/CD Pipeline is a learning-focused repository that demonstrates how to design and implement CI/CD pipelines for a fullstack application using GitHub Actions and Microsoft Azure. The project focuses on deployment workflows rather than application complexity, making it a clean and practical reference for understanding real-world CI/CD structures. What This Project Demonstrates • Separate CI/CD pipelines for frontend and backend. • Path-based GitHub Actions triggers (client/** and server/**). • Frontend deployment to Azure Static Web Apps. • Backend deployment to Azure App Service. • Environment variable injection during build time. • Secure secret management using GitHub Actions secrets. CI/CD Architecture Frontend Pipeline The frontend pipeline is triggered when changes occur under the client/ directory. It installs dependencies, injects the backend API URL into environment variables, builds the Vite + React application, and deploys the generated dist/ files to Azure Static Web Apps. Backend Pipeline The backend pipeline runs when changes occur under the server/ directory. It builds the NestJS application, prepares a clean production bundle, installs production-only dependencies, packages the app into a ZIP archive, and deploys it to Azure App Service using ZIP deploy. Azure Setup (Simplified) Frontend: Azure Static Web App connected to GitHub (main branch). Backend: Azure App Service (Node.js, Linux). Deployment credentials and tokens are securely stored as GitHub Actions secrets. Local Development The project can be run locally using two terminals. The NestJS backend runs on http://localhost:3000, while the Vite + React frontend runs on http://localhost:5173. Environment variables are injected using .env files. Learning Focus This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to keep the focus purely on CI/CD concepts, deployment automation, and Azure integration. Source Code View the complete repository on GitHub: https://github.com/lochana0513/azure-fullstack-cicd-pipeline
Real-Time Dashboard with WebSockets (NestJS + React)
Azure Fullstack CI/CD Pipeline is a learning-focused repository that demonstrates how to design and implement CI/CD pipelines for a fullstack application using GitHub Actions and Microsoft Azure. The project focuses on deployment workflows rather than application complexity, making it a clean and practical reference for understanding real-world CI/CD structures. What This Project Demonstrates • Separate CI/CD pipelines for frontend and backend. • Path-based GitHub Actions triggers (client/** and server/**). • Frontend deployment to Azure Static Web Apps. • Backend deployment to Azure App Service. • Environment variable injection during build time. • Secure secret management using GitHub Actions secrets. CI/CD Architecture Frontend Pipeline The frontend pipeline is triggered when changes occur under the client/ directory. It installs dependencies, injects the backend API URL into environment variables, builds the Vite + React application, and deploys the generated dist/ files to Azure Static Web Apps. Backend Pipeline The backend pipeline runs when changes occur under the server/ directory. It builds the NestJS application, prepares a clean production bundle, installs production-only dependencies, packages the app into a ZIP archive, and deploys it to Azure App Service using ZIP deploy. Azure Setup (Simplified) Frontend: Azure Static Web App connected to GitHub (main branch). Backend: Azure App Service (Node.js, Linux). Deployment credentials and tokens are securely stored as GitHub Actions secrets. Local Development The project can be run locally using two terminals. The NestJS backend runs on http://localhost:3000, while the Vite + React frontend runs on http://localhost:5173. Environment variables are injected using .env files. Learning Focus This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to keep the focus purely on CI/CD concepts, deployment automation, and Azure integration. Source Code View the complete repository on GitHub: https://github.com/lochana0513/azure-fullstack-cicd-pipeline