How to auto generate .net 6 web api client code in typescript during build

With .Net 6 microsoft has introduced the minimal hosting model. In other words, the new .NET 6 minimal hosting model for ASP.NET Core apps requires only one file and a few lines of code.

NSwag is a Swagger 2.0 API (OpenAPI) toolchain for .NET, Web API, TypeScript, and many more technologies.

In this article we will configure a .Net 6 web api to add Swagger support and then generate the client source code using NSwag automatically whenever the web api is compiled. The client code will be generated in Typescript language. The advantage is that we avoid the hassle of manually writing typescript code for consuming the api and maintaining it manually every time the Web API changes.

Steps

Add Nuget Packages to the project

Add the following lines to your code in the Program.cs file

Add only the highlighted lines in the snippet below

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddSwaggerDocument();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseOpenApi();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

Add the NSwag configuration file

  • Create a file named nswag.json and copy the json configuration from this webpage. Make the following changes to the json.
    Change the runtime version in the json to match you project .Net version, for example “Net60” for .Net 6.0
  • change the flag ‘isAspNetCore’ to true
  • change the typescript version to the one matching your client app
  • change the assembly path to point to the assembly in the bin folder
  • remove all other code generators and keep only the ‘openApiToTypeScriptClient’ one
  • change the output to point to the desired folder
  • change the ‘defaultPropertyNameHandling’ to align with the Typescript object property naming
{
  "runtime": "Net60",
  "documentGenerator": {
    "isAspNetCore": true,
    "assemblyPaths": [
        "bin/debug/net6.0/MyProject.dll"
      ],
    "defaultPropertyNameHandling": "CamelCase",
    // ...
  },
  "codeGenerators": {
    "openApiToTypeScriptClient": {
      "typeScriptVersion": 4.7,
      "output": "Scripts/apiClient.ts",
      // ...
    }
   // remove any other code generators
  }
}

Add the following configuration to the .csproj file of your project.

<Target Name="NSwag" AfterTargets="Build">
	<Exec Command="$(NSwagExe_Net60) run nswag.json" />
</Target>

Change the Command variable NSwagExe_Net60 to a match your project .Net version.

Build the project

Make sure that your project compiles and build the solution. You should see the apiClient.ts file generated at your specified location.

Optional

By default the generator generates more code which you may not need. If you are only interested in the models that can be consumed by the Web API and the response types you can change the following settings in the nswag.json file

generateClientClasses: false,
typeStyle = "Interface"

Leave a Reply