Generating clients for APIs is a tremendous way to reduce the amount of work you have to do when you're building a project. Why handwrite that code when it can be auto-generated for you quickly and accurately by a tool like NSwag? To quote the docs:
The NSwag project provides tools to generate OpenAPI specifications from existing ASP.NET Web API controllers and client code from these OpenAPI specifications. The project combines the functionality of Swashbuckle (OpenAPI/Swagger generation) and AutoRest (client generation) in one toolchain.
There's some great posts out there that show you how to generate the clients with NSwag using an
nswag.json file directly from a .NET project.
However, what if you want to use NSwag purely for its client generation capabilities? You may have an API written with another language / platform that exposes a Swagger endpoint, that you simply wish to create a client for. How do you do that? Also, if you want to do some special customisation of the clients you're generating, you may find yourself struggling to configure that in
nswag.json. In that case, it's possible to hook into NSwag directly to do this with a simple .NET console app.
This post will:
- Create a .NET API which exposes a Swagger endpoint. (Alternatively, you could use any other Swagger endpoint; for example an Express API.)
- Create a .NET console app which can create both TypeScript and CSharp clients from a Swagger endpoint.
- Create a script which, when run, creates a TypeScript client.
- Consume the API using the generated client in a simple TypeScript application.
We'll now create an API which exposes a Swagger / Open API endpoint. Whilst we're doing that we'll create a TypeScript React app which we'll use later on. We'll drop to the command line and enter the following commands which use the .NET SDK, node and the
We now have a .NET API with a dependency on NSwag. We'll start to use it by replacing the
Startup.cs that's been generated with the following:
The significant changes in the above
- Exposing a Swagger endpoint with
UseSwaggerUi3. NSwag will automagically create Swagger endpoints in your application for all your controllers. The .NET template ships with a
- Allowing Cross-Origin Requests (CORS) which is useful during development (and will facilitate a demo later).
Back in the root of our project we're going to initialise an npm project. We're going to use this to put in place a number of handy
npm scripts that will make our project easier to work with. So we'll
npm init and accept all the defaults.
Now we're going add some dependencies which our scripts will use:
npm install cpx cross-env npm-run-all start-server-and-test
We'll also add ourselves some
scripts to our
Let's walk through what the above scripts provide us with:
npm installin the root of our project will not only install dependencies for our root
package.json, thanks to our
install:server-appscripts it will install the React app and .NET app dependencies as well.
npm run buildwill build our client and server apps.
npm run startwill start both our React app and our .NET app. Our React app will be started at http://localhost:3000. Our .NET app will be started at http://localhost:5000 (some environment variables are passed to it with
npm run start has been run, you will find a Swagger endpoint at http://localhost:5000/swagger:
Now we've scaffolded our Swagger-ed API, we want to put together the console app that will generate our typed clients.
We now have a console app with dependencies on the code generation portions of NSwag. Now let's change up
Program.cs to make use of this:
We've created ourselves a simple .NET console application that creates TypeScript and CSharp clients for a given Swagger URL. It expects three arguments:
url- the url of the
swagger.jsonfile to generate a client for.
generatePath- the path where the generated client file should be placed, relative to this project.
language- the language of the client to generate; valid values are "TypeScript" and "CSharp".
To create a TypeScript client with it then we'd use the following command:
However, for this to run successfully, we'll first have to ensure the API is running. It would be great if we had a single command we could run that would:
- bring up the API
- generate a client
- bring down the API
Let's make that.
In the root of the project we're going to add the following
Let's walk through what's happening here. Running
npm run generate-client:server-app will:
- Use the
start-server-and-testpackage to spin up our server-app by running the
start-server-and-testwaits for the Swagger endpoint to start responding to requests. When it does start responding,
generate-client:server-app:generatescript which runs our APIClientGenerator console app and provides it with the URL where our swagger can be found, the path of the file to generate and the language of "TypeScript"
If you were wanting to generate a C# client (say if you were writing a Blazor app) then you could change the
generate-client:server-app:generate script as follows:
Let's run the
npm run generate-client:server-app command. It creates a
clients.ts file which nestles nicely inside our
client-app. We're going to exercise that in a moment. First of all, let's enable proxying from our
client-app to our
server-app following the instructions in the Create React App docs and adding the following to our
Now let's start our apps with
npm run start. We'll then replace the contents of
React.useEffect above you can see we create a new instance of the auto-generated
WeatherForecastClient. We then call
weatherClient.get() which sends the
GET request to the server to acquire the data and provides it in a strongly typed fashion (
get() returns an array of
WeatherForecast). This is then displayed on the page like so:
As you an see we're loading data from the server using our auto-generated client. We're reducing the amount of code we have to write and we're reducing the likelihood of errors.
This post was originally posted on LogRocket.