This repository contains a starter template for an Angular and React application, along with a CI/CD pipeline setup using GitHub Actions. The project is designed to facilitate the development and deployment of modern web applications.

• Angular-React-Starter
  • Table of Contents
  • Project Overview
  • Getting Started
    • Prerequisites
    • Cloning the Repository
  • Running the Application
    • Local Development
    • Running with Docker
  • GitHub Actions Pipeline
    • Workflow Details
  • Building and Running with Docker

This project consists of three main applications:

• Angular: The Angular frontend application.
• Node: The Node.js backend API.
• React: The React frontend application.

It is based on the project granatan/angular-react-starter.

The goal of this project is to provide a robust foundation for developing and deploying web applications using Angular with an emphasis on CI/CD practices.

• Node.js (version 22 or higher)
• Docker (for containerization)

Clone the repository to your local machine and checkout the branch with the pipeleine:

git clone https://github.com/The18thHuman/angular-react-starter.git cd angular-react-starter git checkout feature/ci-pipeline 

1. Install Dependencies: Navigate to each application folder (Angular, Node, React) and run:

npm install

2. Start the Development Server:

• For Angular:

cd angular ng serve

• For Node:

cd node node index.js

• For React:

cd react npm start

You can run the angular application using Docker Compose:

1. Build and Start Services:

cd angular docker-compose up -d

2. Access the Application: Open your web browser and go to http://localhost:8080 to access the Angular application.

The project includes a GitHub Actions pipeline for continuous integration and deployment. The pipeline runs tests for Angular, Node.js, and React applications, builds the Angular application, creates a Docker image, and pushes it to the GitHub Container Registry.

• Trigger: The pipeline is triggered on push events to the dev branch or any feature branches and on pull requests to the main branch.
• Jobs:
  • run-tests: Executes unit tests for all applications.
  • build-angular: Builds the Angular application.
  • docker: Builds and pushes the Docker image.
  • notify: Sends email notifications based on the job status.

1. Build Docker Image: The pipeline builds the Docker image for the Angular application and pushes it to the GitHub Container Registry.

2. Pull Docker Image: You can pull the Docker image using the following command:

docker pull ghcr.io/the18thhuman/angular-react-starter:feature-ci-pipeline

3. Run Docker Container: To run the Docker container, use the following command:

docker run -p 8080:80 ghcr.io/the18thhuman/angular-react-starter:feature-ci-pipeline