Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hamedfathi/typescriptclientgeneratormiddleware
An ASP.NET Core middleware to generate TypeScript client code for sharing between Backend and Frontend teams.
https://github.com/hamedfathi/typescriptclientgeneratormiddleware
asp-net-core aspnet-core aspnetcore backend csharp dotnet frontend generator javascript middleware nswag rest-api swagger typescript
Last synced: about 2 months ago
JSON representation
An ASP.NET Core middleware to generate TypeScript client code for sharing between Backend and Frontend teams.
- Host: GitHub
- URL: https://github.com/hamedfathi/typescriptclientgeneratormiddleware
- Owner: HamedFathi
- License: mit
- Created: 2023-03-13T13:23:04.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-17T17:54:28.000Z (10 months ago)
- Last Synced: 2024-10-11T18:13:37.463Z (3 months ago)
- Topics: asp-net-core, aspnet-core, aspnetcore, backend, csharp, dotnet, frontend, generator, javascript, middleware, nswag, rest-api, swagger, typescript
- Language: C#
- Homepage:
- Size: 28.3 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> [!IMPORTANT]
> Introducing **HamedStack**! For all my latest libraries, visit: [Explore HamedStack](https://github.com/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](https://github.com/HamedStack/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](https://github.com/RicoSuter/NSwag/wiki/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](https://www.nuget.org/packages/TypeScriptClientGeneratorMiddleware)
[](https://opensource.org/licenses/MIT)
```
Install-Package TypeScriptClientGeneratorMiddleware
dotnet add package TypeScriptClientGeneratorMiddleware
```
### Usage
```cs
// SERVICES
builder.Services.AddTypeScriptClientGenerator(options =>
{
options.Options = new List
{
// 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)**
