This project offers several examples of single page applications (SPA)
communicating with APIs in a service-oriented architecture (SOA)
. The resources are provisioned on DigitalOcean with infrastructure as code (IaC)
using Terraform.
Our goal is to define a technology stack with minimal costs to host MVPs and prototypes for hobby projects. We also want to offer real-world examples that go beyond basic tutorials that showcase technologies or features in overly simplified scenarios.
We decided to gear this tech stack towards commercial projects which meant opting for a private container registry and code repository.
The current running cost for the stack is 4$ USD
.
DISCLAIMER: It is your responsibility to review, assess and address any security, performance or other concerns related to your specific context before moving this stack into production.
This sample builds on the well-known weather forecast scenario from the ASP.NET Core
project templates. We have modified the generated single-page application (SPA) and REST API in order to showcase other technologies and advanced scenarios.
Categories | Features | Tools/Technologies | Cost |
---|---|---|---|
Cloud Native | Containers | Docker | Free |
Orchestration | Docker Compose | Free | |
Infrastructure as Code (IaC) | Terraform | Free | |
DevOps | CI/CD Pipelines | Azure Pipelines | Free |
GitHub Actions | Free | ||
Web | Hosting | DigitalOcean - Droplets | 4$ USD |
Reverse Proxies | nginx-proxy/nginx-proxy | Free | |
SSL Certificates | Let's Encrypt | Free | |
nginx-proxy/acme-companion | Free | ||
Frontends | SPA (React) | React | Free |
TypeScript | Free | ||
Backends (APIs) | REST API (.NET 7) | .NET 7 | Free |
ASP.NET Core - Web API | Free | ||
C# | Free | ||
Databases | Relational | PostgreSQL | Free |
Key-Value | Redis | Free | |
Repositories | Code Repositories | Azure DevOps | Free |
GitHub | Free | ||
Docker Registry | JFrog | Free | |
Terraform Remote Backend | JFrog | Free | |
Development | IDEs | Visual Studio Community | Free* |
Visual Studio Code | Free |
* Visual Studio Community
is free for some commercial projects under specific conditions. Please consult Microsoft's EULA to confirm whether you meet these conditions.
- Docker Engine
- Docker Compose
- .NET SDK
dotnet-ef
Tool- Terraform
- Visual Studio Community
- Visual Studio Code
In order to provision the infrastructure on DigitalOcean you will need:
- DigitalOcean Account:
- If you don't have one, create your free DigitalOcean account.
- API Token created for your account:
- If you don't have one, create an API Token for your DigitalOcean account.
- SSH Key uploaded to your account:
- If you don't have one, upload an SSH Key to your DigitalOcean account.
In order to store Docker images and Terraform remote states you will need:
- JFrog Account:
- If you don't have one, create your free JFrog account.
- API Token created for your account:
- If you don't have one, create an API Token for your JFrog account.
In order to run the API
integration tests locally you will need to create/configure the following files:
- secrets.json:
- Location :
src/api/hobbystacks-api-dotnet-integration-tests/secrets.json
.
- Location :
{
"DB_DRIVER": "pgsql",
"DB_HOST": "localhost",
"DB_PORT": "5432",
"DB_NAME": "hobbystacks",
"DB_USER": "placeholder",
"DB_PASSWORD": "SuperDuperPassword1"
}
- .env:
- Location :
src/docker-compose/.env
.
- Location :
DB_DRIVER=pgsql
DB_HOST=localhost
DB_PORT=5432
DB_NAME=hobbystacks
DB_USER=placeholder
DB_PASSWORD=SuperDuperPassword1
Once you have created the necessary configuration files, you can simply run the following commands from the project's root directory:
cd src/docker-compose
docker compose -f docker-compose.yml -f docker-compose.override.yml up -d db &&
dotnet test ../HobbyStacks.sln &&
docker compose -f docker-compose.yml -f docker-compose.override.yml down
Alternatively, you can open the Test Explorer
window in Visual Studio
to run the test suites after launching the Database Services
.
In order to run the React
tests locally you will need to create/configure the following files:
- .env.test:
- Location :
src/web/hobbystacks-web-react-dotnet/ClientApp/.env.test
.
- Location :
REACT_APP_API_WEATHER_BASEURL=https://valid.url.format
Once you have created the necessary configuration files, you can simply run the following commands from the project's root directory:
cd src/web/hobbystacks-web-react-dotnet/ClientApp
npm test
In order to run the Docker Compose
services you will need to create/configure the following files:
- .env:
- Location :
src/docker-compose/.env
.
- Location :
DB_DRIVER=pgsql
DB_HOST=localhost
DB_PORT=5432
DB_NAME=hobbystacks
DB_USER=placeholder
DB_PASSWORD=SuperDuperPassword1
Once you have created the necessary configuration files, you can simply run the following commands from the project's root directory:
cd src/docker-compose
# Start the services
docker compose -f docker-compose.yml -f docker-compose.override.yml up -d
# Stop the services
docker compose -f docker-compose.yml -f docker-compose.override.yml down
More details.
- Philippe Turcotte - Initial work
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE file for details.