OrdersApp/
Pick any file or folder on the left to see what it is, why it exists, when you add it and the mistakes people make with it. Switch the stage to watch the project grow.
.NET with Angular project structure
# Easiest on Windows: the Visual Studio template creates both projects and wires them
Visual Studio > Create a new project > Angular and ASP.NET Core# Or with the CLI on any OS: create the solution
mkdir OrdersApp && cd OrdersApp && dotnet new sln -n OrdersApp# Create the Web API project with controllers
dotnet new webapi -n OrdersApp.Server --use-controllers && dotnet sln add OrdersApp.Server# Create the Angular app next to it
npx @angular/cli@latest new ordersapp.client --routing --style=css --ssr=false# Let the API start the Angular dev server
dotnet add OrdersApp.Server package Microsoft.AspNetCore.SpaProxy# Run everything (the https profile is required)
dotnet run --project OrdersApp.Server --launch-profile https# Growing: tests, shared build files and local tools
dotnet new xunit -n OrdersApp.Server.Tests && dotnet sln add OrdersApp.Server.Tests && dotnet new buildprops && dotnet new packagesprops && dotnet new globaljson && dotnet new tool-manifest# Growing: linting and the generated API client in the Angular app
cd ordersapp.client && ng add angular-eslint && npm install -D ng-openapi-gen# Production: Playwright end-to-end tests
cd ordersapp.client && npm init playwright@latest# Expert: Aspire AppHost and ServiceDefaults
dotnet new aspire-apphost -n OrdersApp.AppHost && dotnet new aspire-servicedefaults -n OrdersApp.ServiceDefaults