Free Swagger Tool to Generate Code

Swagger has an online utility that will help you to easily generate frontend and backend code to connect or build your APIs, and is available for many languages and frameworks. Here we’ll have a look at how to easily generate code for an Angular application by using the swagger file contents from a C# .NET Web API Backend.

GENERATE CLIENT

1. Go to editor.swagger.io and paste your swagger file contents (or upload using the File > Upload option)
2. Click ‘Generate Client’ from the top menu, and select ‘typescript-angular’
3. Create a new folder called ‘api’ in the ‘src’ folder of your angular project to store all the generated code there
4. Unzip the downloaded file, and copy the contents to the newly created ‘src/api’ folder

Click on Generate Server and choose any language you require

Following is the configuration that you can do in Angular.

SETUP ANGULAR CONFIG

Import the generated ApiModule inside the app.module.ts file under the imports section:

...
import { ApiModule } from 'src/api';
...
@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        ...
        ApiModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

If you want to configure it further, like setting a different basePath, create a new apiConfig function and update any of the parameters available:

export function apiConfig() {
    return new Configuration({
        withCredentials: true,
        basePath: 'https://local.test/api',
    });
}

Finally, pass the new ‘apiConfig’ function to the ApiModule’s forRoot method as follows:

ApiModule.forRoot(apiConfig)

You can do this for almost many different frontend and backend frameworks.

Do you have any time-saving tips that you already use?

#TimeSavers