DEV Community

Cover image for How to integrate Swagger UI in a .NET Core Web API application | Amoenus Dev
Romans Pokrovskis
Romans Pokrovskis

Posted on • Edited on • Originally published at amoenus.dev

3 2

How to integrate Swagger UI in a .NET Core Web API application | Amoenus Dev

Swagger tooling allows you to generate beautiful API documentation, including a UI to explore and test operations, directly from your routes, controllers and models.
Setting it up is simple but requires some code changes.
To enable swagger integration for your .NET Core Web API project you will need to:

  • Install Swashbuckle.AspNetCore package from NuGet
  • Change the Startup.cs class of your Net Core Web API application.
    • Add using statement for OpenApiInfo
    • Modify Configure(IApplicationBuilder app, IWebHostEnvironment env)
    • Modify ConfigureServices(IServiceCollection services)

Changes for Startup.cs

Installing Swagger

From your project folder install the Swagger Nuget package (6.1.4 for this instance)

dotnet add package Swashbuckle.AspNetCore --version 6.1.4
Enter fullscreen mode Exit fullscreen mode

Using statement

using Microsoft.OpenApi.Models;
Enter fullscreen mode Exit fullscreen mode

Changes for ConfigureServices()

In the ConfigureServices() method you should add

services.AddMvc();
services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo
    {
        Title = "My Awesome API",
        Version = "v1"
    });
});
Enter fullscreen mode Exit fullscreen mode

Changes for Configure()

In the Configure() method you should add

app.UseSwagger();
app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "My Awesome API V1");
});
Enter fullscreen mode Exit fullscreen mode

I prefer to enable it only for development

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "My Awesome API V1");
    });
}
Enter fullscreen mode Exit fullscreen mode

Taking it for a spin

After all these changes, we are finally ready to test our new integration.

dotnet run
Enter fullscreen mode Exit fullscreen mode

Navigate to localhost:4200/swagger to see the SwaggerUI

Note: your port may be different

Bonus: Customisation

Now that you have Swagger configured, you might want to change the default theme.
You can learn how to do this in this blog post

Did you have any questions or feedback? Please share them in the comments 🤗

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (1)

Collapse
 
treva123mutebi profile image
David Mutebi

thanks

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay