Full-stack projektopsætning med dotnet

At samle Blazor og Web API i én solution

Formålet er at samle to projekter i den samme solution, så der kan deles model-klasser på tværs af projekterne.

Man har disse to projekter:

• Blazorwasm - En klient-app
• Web API - Selve API´en der persisterer data

De faktiske projektnavne kan variere, men jeg kalder dem bare “web api” og “blazor” i det følgende.

1. Lav en solution

Tag de to projektfoldere, og læg dem i en overordnet folder:

Solution /
    Blazor-app /
    Web-api /

Du kan kalde folderne lige hvad du har lyst til - det er ikke vigtigt.

Stil dig i solution-folderen med din terminal og gør følgende for at lave en ny solution-fil:

$ dotnet new sln --name MinSolution

Sørg for at vælge et godt navn til din solution der afspejler dit samlede projekt.

2. Tilføj projekter

Du har nu en solution i den øverste folder. De to underprojekter skal tilføjes til solution-filen. Dette gøres med disse to kommandoer. Her er det vigtigt at bruge filnavnene på de to csproj-filer der ligger i underfolderne.

$ dotnet sln add Blazor-app/Blazor-app.csproj 
$ dotnet sln add Web-api/Web-api.csproj 

Du kan nu se projekterne med:

$ dotnet sln list

3. Flyt model til shared projekt

Model-klasserne skal bruges både i API og Blazor. Det nemmeste er at lave et tredje projekt kun til model-klasserne. Her bruger man skabelonen “classlib”.

Stil dig i solution-folderen med din terminal. Lav nu et nyt projekt i projektfolderen sådan her:

$ dotnet new classlib -o shared

Flyt hele din Model-folder over i shared-projektet. Ændrer namespacet på alle dine klasser så de nu ligger i “shared.Model” i stedet for “Model”.

Lav en “dotnet build” i “shared”-folderen for at se at koden stadig bygger som den skal.

4. Tilføj shared til API-projekt

Gå tilbage til API-projektet i din terminal. Brug følgende kommando for at tilføje en reference til shared i API-projektet:

$ dotnet add reference ../shared

Gå herefter dit projekt igennem, og udskift alle referencer fra “Model” til “shared.Model”. Herefter burde du igen kunne bygge din “web api” med “dotnet build” selvom at model-klasserne nu er flyttet over i et andet projekt.

5. Tilføj shared til Blazor-projekt

Flyt nu din terminal ind i Blazor-folderen. Tilføjet shared med samme kommando som i trin 4. Du kan nu bruge dine model-klasser i Blazor-projektet med “using shared.Model” i din kode, akkurat som i API-projektet.

6. Afsluttende bemærkninger

Du kan nu bygge alle tre projekter, blot ved at stå i solution-folderen og skrive “dotnet build”.

Du er stadig nødt til at starte API-projektet og Blazor-projektet op hver for sig. Dette kræver at du har åbnet to terminaler.

Ved deployment, findes der flere strategier. Da Blazor jo er en statisk web-app, kan du lave et færdigt “build” med “dotnet deploy”-kommandoen og smide den op i skyen. Der er ingen backend.

API-projektet kan så efterfølgende deployes på en app service, fx “Azure App Service”.

En helt anden strategi er at bruge API-projektet som en web-server, der indeholder blazor-filerne. Fordelen ved denne løsninge er, at der kun skal deployes ét projekt i skyen, og ikke to. Dette kræver dog en udvidelse af koden i API-projektet, som ikke er dækket af denne guide.