Generating Frontend Interfaces using Swagger - integra-tema-blue-spring-2026/urban-explore-app GitHub Wiki

Swagger / OpenAPI

The frontend uses the OpenAPI generator to automatically generate API client services and models based on the backend's OpenAPI specifications

Prerequisites

Before running the code generation, ensure:

• node.js and npm are installed
• backend running or the openapi.yaml.json file
• you have navigated to the 'frontend' directory

cd frontend

Generating API Code

1. Start the backend

First, start your backend application. The backend must be running to expose the OpenAPI specification at http://localhost:8080/api/v3/api-docs.

cd backend
./gradlew bootRun  # On Windows: gradlew.bat bootRun

Wait until you see: Tomcat started on port(s): 8080 (http)

2. Generate frontend API Code

Option A: Generate from Running Backend

cd frontend
npm run generate:api

Option B: Generate from Local Fallback Spec

cd frontend
npm run generate:api:local

This command will:

• Connect to the backend's OpenAPI specification endpoint
• Generate TypeScript Angular service classes and models
• Place generated files in src/app/core/api/generated/

3. Verify

After successful generation, you should see new generated files in src/app/core/api/generated/

4. Using Generated API Services

Once generated, you can import and use the services in your other components like this:

import { CityService } from '@app/core/api/generated';

export class MyComponent {
  constructor(private cityService: CityService) {}

  loadCities() {
    this.cityService.getAllCities().subscribe(cities => {
      console.log(cities);
    });
  }
}

5. Debug

If generation fails, check that http://localhost:8080/api/v3/api-docs is accessible. You can do this by running the command:

curl http://localhost:8080/api/v3/api-docs

Accessing Swagger UI

Once the backend is running, you can view the API specification in a browser:

• Swagger UI: http://localhost:8080/api/swagger-ui.html
• OpenAPI JSON: http://localhost:8080/api/v3/api-docs