Using OpenAPI Generator in Frontend Projects with .NET Backend Swagger

00:02:53:59

Introduction

In modern web projects, ensuring correct, sustainable, and error-free communication between frontend and backend is critical. Especially in REST API-based projects, managing this process manually can lead to serious problems over time.

In this article, we'll walk through step by step how to use the API documentation generated by Swagger on the .NET backend to automatically produce a client on the frontend side using OpenAPI Generator.

Why OpenAPI Generator?

In most projects, we encounter this scenario:

Backend changes an endpoint
Frontend doesn't notice
It breaks in production

OpenAPI Generator solves this problem at its root.

Benefits

Automatic API client generation
Type-safe code
100% alignment with the backend
Fewer bugs
Faster development

1. Swagger Setup in .NET Backend

First, Swagger/OpenAPI documentation must be active on the backend side.

Package Installation

bash

dotnet add package Swashbuckle.AspNetCore

Program.cs Configuration

csharp

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

app.UseSwagger();
app.UseSwaggerUI();

After running the application, if the Swagger UI is visible at https://localhost:5001/swagger, everything is ready.

2. Getting the OpenAPI JSON File

OpenAPI Generator uses the JSON document produced by Swagger. It's typically found at https://localhost:5001/swagger/v1/swagger.json. This file is our API contract.

3. OpenAPI Generator Installation

We'll use OpenAPI Generator as a CLI tool.

Installation via NPM

bash

npm install @openapitools/openapi-generator-cli -g

To verify the installation:

bash

openapi-generator-cli version

4. Generating the Frontend Client

Let's assume we're using Vue + TypeScript as an example.

Project Structure

src/
 ├─ api/
 ├─ services/
 └─ main.ts

We'll generate the client under src/api.

Client Generation Command

bash

openapi-generator-cli generate \
  -i https://localhost:5001/swagger/v1/swagger.json \
  -g typescript-axios \
  -o src/api

Parameter Descriptions

| Parameter | Description | | --------- | -------------------- | | -i | Swagger JSON address | | -g | Generator type | | -o | Output directory |

Popular Generators

| Framework | Generator | | --------- | ------------------ | | React | typescript-axios | | Vue | typescript-axios | | Angular | typescript-angular | | Node | typescript-fetch |

5. Generated Files

After running the command, we should see this structure:

src/api/
 ├─ apis/
 ├─ models/
 ├─ index.ts
 └─ configuration.ts

What Do They Do?

apis/ → Endpoint functions
models/ → DTO types
configuration.ts → Base config
index.ts → Export file

6. Configuring Axios Settings

The generated client usually comes with an empty config.

configuration.ts

tsx

import { Configuration } from './configuration';

export const apiConfig = new Configuration({
  basePath: 'https://localhost:5001',
  accessToken: localStorage.getItem('token') || '',
});

7. API Usage

Now we can use the endpoints directly.

Example Usage:

tsx

import { UserApi } from '@/api';
import { apiConfig } from '@/api/config';

const userApi = new UserApi(apiConfig);

const getUsers = async () => {
  const res = await userApi.apiUserGet();
  console.log(res.data);
};

Now you get:

Type safety
Auto-completion
Error-free parameters

8. Automatic Updates via Script

If the API changes frequently, running the command manually every time gets tedious.

package.json

json

{
  "scripts": {
    "generate-api": "openapi-generator-cli generate -i https://localhost:5001/swagger/v1/swagger.json -g typescript-axios -o src/api"
  }
}

Now you can simply run:

bash

npm run generate-api

to update the API client whenever the docs change.

9. CI/CD Integration

In real-world projects, the following setup is very useful:

yaml

- name: Generate API Client
  run: npm run generate-api

Backend deploys → Client gets updated → Frontend builds.

Conclusion

With this setup:

Backend and frontend work in full alignment
No more manually writing API clients
Type errors are reduced
The project becomes scalable