Add .NET example for web api with Angular client

This commit is contained in:
James Skemp 2023-09-02 11:49:44 -05:00
parent 6451bfa905
commit 653a644408
1 changed files with 106 additions and 0 deletions

View File

@ -40,3 +40,109 @@ dotnet tool list -g
# Search for tools matching `searchTerm`.
dotnet tool search searchTerm
```
## Add SQLite
```powershell
dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package Microsoft.EntityFrameworkCore.Design
```
### appsettings.json
```json
{
"ConnectionStrings": {
"DefaultConnection": "Data source=./Database/name.db"
}
}
```
### Data/DataContext.cs
```csharp
using API.Models;
using Microsoft.EntityFrameworkCore;
namespace API.Data
{
public class DataContext : DbContext
{
public DbSet<Thing> Things { get; set; }
public DataContext(DbContextOptions options) : base(options) { }
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
base.OnModelCreating(modelBuilder);
}
}
}
```
### Program.cs
```csharp
// Add near the top.
builder.Services.AddDbContext<DataContext>(options =>
{
options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection"));
});
// Optional: apply migrations on startup. Add after builder.Build().
using (var scope = app.Services.CreateScope()) {
var db = scope.ServiceProvider.GetRequiredService<DataContext>();
db.Database.Migrate();
}
```
### Create Initial Migration
```powershell
dotnet ef migrations add InitialCreate -o Data/Migrations
dotnet ef database update
```
## Example: .NET API with Angular Frontend and XUnit Testing
This example sets up a new .NET webapi project with XUnit testing and an Angular frontend.
```powershell
# From repo root:
dotnet new sln
dotnet new webapi -o API
dotnet sln add API
dotnet new gitignore
git init
git add .
git commit -m "Add new .NET webapi project and solution"
# XUnit project.
dotnet new xunit -o API.Tests
dotnet add .\API.Tests\API.Tests.csproj reference .\API\API.csproj
dotnet sln add API.Tests
git add .
git commit -m "Add new XUnit project"
# Create Angular application.
ng new client
git add .
git commit -m "Add new Angular application"
```
## Running via Windows Terminal
```powershell
wt -d .\ --title 'Repo Root' `; nt -d .\client\ --title 'ng serve' `; split-pane -H -d .\API\ --title 'dotnet watch run' `; nt -d .\client\src\app\ --title 'ng g ...'`; nt -d .\client\ --title 'ng test' `; split-pane -H -d .\ --title 'dotnet test'
```
### Alternatively
```powershell
# From repo root:
cd .\API\
dotnet run
# From repo root:
dotnet test
# From repo root:
cd .\client\
ng serve
# From repo root:
cd .\client\
ng test
```