Important

Introducing HamedStack! For all my latest libraries, visit: Explore HamedStack. Replacements and updates are available at the link. Thank you for your support! The new version of this library is accessible via HamedStack.CodeBridge.AspNetCore

---

For a long time, I have been looking for a way to connect the back-end and front-end teams working on the same APIs.

In this use case, the back-end team provides a bunch of APIs, then the front-end team should follow them to call APIs correctly, but how is it possible to get the correct info from the back-end side or update the front-end side after some changes frequently?

One good solution is using Swagger as a source of truth. Still, the front-end team needs help accessing client definitions like TypeScript interfaces inside thier applications. Can the process be more straightforward?

Recently, I made an ASP.NET Core middleware based on NSwag TypeScriptClientGenerator for sharing more fine-grained data from the back-end side to front-end side, so, front-end team can get more info, update their side based on it or even make sure some changes happened or no.

Nuget

Install-Package TypeScriptClientGeneratorMiddleware

dotnet add package TypeScriptClientGeneratorMiddleware

Usage

// SERVICES
builder.Services.AddTypeScriptClientGenerator(options =>
{
    options.Options = new List<TypeScriptClientGeneratorOption>
    {
        // You can set array of endpoints.
        new()
        {
            // The URI you want to see the generated result and share it.
            Endpoint = "my_ts_client",  
            // Absolute URI of Swagger/Open API JSON file.
            SwaggerJsonEndpoint = "https://localhost:7031/swagger/v1/swagger.json", 
            // You can pass your own source code processor to customize final result, If don't you will get full source code which is generated by NSwag.
            // ExtractInterfacesAndEnums is a method provided by the library to extract just interfaces and enums to share with others.
            // At first line always you can see SHA256 hash of the content, after changing, by comparing with the old one you will understand part of the code changed.
            Process = GeneratedSourceProcessor.ExtractInterfacesAndEnums,
            // You can change the content type if you want. default is "text/plain".
            // ContentType = "application/json"
            // You can customize NSwag generator too
            // Settings = ...
        },
        new()
        {
            Endpoint = "petstore_ts_client",
            SwaggerJsonEndpoint = "https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/petstore.json",
            Process = GeneratedSourceProcessor.ExtractInterfacesAndEnums
        }
    };
});

// APP
app.UseTypeScriptClientGenerator();

With Process (ExtractInterfacesAndEnums)

Without Process (Full Source Code)