Running a full-stack application locally with Docker Compose streamlines development by providing a consistent and isolated environment. This article explores how to set up a multi-container application using Docker Compose, featuring a .NET API, Angular or React front-end, and a SQL Server database.
What We Will Cover:
✅ Set up Docker Compose for .NET API + Angular/React + SQL Server
✅ Configure multi-container services
✅ Automate local development workflow
1. Setting Up Docker Compose
1.1 Prerequisites
Before we begin, ensure you have:
- Docker Desktop installed
- .NET SDK installed
- Node.js and npm (for Angular/React development)
- Basic knowledge of Docker and containerization
1.2 Creating a docker-compose.yml File
Docker Compose allows us to define multi-container applications in a single YAML file. Below is a sample docker-compose.yml configuration:
version: '3.8'
services:
api:
build: ./backend
container_name: dotnet_api
ports:
- "5000:5000"
depends_on:
- db
environment:
- ConnectionStrings__DefaultConnection=Server=db;Database=AppDb;User Id=sa;Password=YourPassword;
frontend:
build: ./frontend
container_name: react_angular_app
ports:
- "3000:3000"
depends_on:
- api
db:
image: mcr.microsoft.com/mssql/server:2019-latest
container_name: sql_server
environment:
SA_PASSWORD: "YourPassword"
ACCEPT_EULA: "Y"
ports:
- "1433:1433"
2. Configuring Multi-Container Services
2.1 Backend - .NET API
Navigate to the backend folder and create a Dockerfile:
FROM mcr.microsoft.com/dotnet/aspnet:8.0
WORKDIR /app
COPY . .
RUN dotnet restore
RUN dotnet build -c Release -o out
CMD ["dotnet", "out/YourApi.dll"]
2.2 Frontend - Angular or React
For Angular, create a Dockerfile:
FROM node:18-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build --prod
CMD ["npm", "start"]
For React, modify the CMD:
CMD ["npm", "run", "start"]
2.3 Database - SQL Server
The database service is configured in docker-compose.yml, and no additional setup is required beyond running migrations.
3. Automating Local Development Workflow
3.1 Running the Application
Run the following command to start all services:
docker-compose up --build
This will build and launch the backend, frontend, and database containers.
3.2 Stopping and Cleaning Up
To stop the application, run:
docker-compose down
To remove all images and volumes:
docker system prune -a
3.3 Debugging and Logs
Check container logs:
docker logs dotnet_api
Access the SQL Server database:
docker exec -it sql_server /opt/mssql-tools/bin/sqlcmd -S localhost -U sa -P YourPassword
Conclusion
In this guide, we covered:
✅ Setting up Docker Compose for .NET API, Angular/React, and SQL Server
✅ Configuring multi-container services
✅ Automating the local development workflow
By using Docker Compose, you can create a reproducible development environment, reducing configuration issues and streamlining your workflow. 🚀