ReactFullStackDemo

Full-stack demo (React + ASP.NET Core + MongoDB). This phase contains the API and the standalone frontend.

Local API (Docker)

docker compose -f infra/docker-compose.api.yml up -d --build

API: http://localhost:5069 Health: http://localhost:5069/api/health

Local API (CLI)

dotnet run --project src/ReactFullStackDemo.Api

Tests

dotnet test ReactFullStackDemo.slnx -c Release

Frontend (Local Dev)

cd src/ReactFullStackDemo.Web
npm install
npm test
npm run dev

Vite dev server: http://localhost:5173

Angular Frontend (Local Dev)

cd src/AngularFullStackDemo.Web
npm install
npm start

Angular dev server: http://localhost:4200

React Frontend (Docker)

docker compose -f infra/docker-compose.web.yml up -d --build

Web: http://localhost:8080

Note: /api is proxied to the api container. For a full stack run, use the compose file below.

React Full Stack (Docker)

docker compose -f infra/docker-compose.full.yml up -d --build

Web + API via Nginx: http://localhost:8080 Health: http://localhost:8080/api/health

Angular Full Stack (Docker)

docker compose -f infra/docker-compose.angular.full.yml up -d --build

Angular Web + API via Nginx: http://localhost:8081 Health: http://localhost:8081/api/health

Angular Frontend (Docker)

docker compose -f infra/docker-compose.angular.web.yml up -d --build

Angular Web: http://localhost:8081

Angular Frontend (Docker, reuse React backend)

docker compose -p angular -f infra/docker-compose.angular.web.local.yml up -d --build

Angular Web: http://localhost:8081 Backend: http://localhost:5069 (from infra/docker-compose.full.yml)

Azure (Terraform + Container Apps)

This deploys a single Container App with three containers: web, api, and a MongoDB sidecar.

1. Authenticate

az login

2. Bootstrap Terraform state storage (one-time)

cd infra/bootstrap
terraform init
terraform apply

3. Provision infrastructure

cd infra/terraform
terraform init
terraform apply

4. Build and push images

az acr login -n <acr-name-from-output>
docker build -t <acr-login-server>/react-fullstack-demo-api:v1 -f src/ReactFullStackDemo.Api/Dockerfile .
docker push <acr-login-server>/react-fullstack-demo-api:v1
docker build -t <acr-login-server>/react-fullstack-demo-web:v1 -f src/ReactFullStackDemo.Web/Dockerfile .
docker push <acr-login-server>/react-fullstack-demo-web:v1

5. Deploy the images

cd infra/terraform
terraform apply -var="api_image_tag=v1" -var="web_image_tag=v1"

6. Get the URL

terraform output container_app_url
terraform output angular_app_url

CI/CD Triggers

• ci.yml: runs on push to main.
• deploy-azure-dispatch.yml: runs automatically after ci succeeds on main, and can also be run manually via workflow_dispatch.

Architecture Diagrams

• English: docs/architecture-en.md