skip to Main Content

Adding swagger to blank ASP.NET+React solution

Good day.

I am creating just a blank solution by codegenerator by command

dotnet new react -o MyReactApp

and I am trying to add Swagger here. So I installed nugets and edited Program.cs. OS is Windows 10, .NET 7.

Progam.cs now is

using Microsoft.OpenApi.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();
builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API", Version = "v1" });
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
} else
{
    /*app.MapEndpoints(endpoints =>
    {
        // ...
        endpoints.MapSwagger();
    });*/
    app.MapSwagger();
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("v1/swagger.json", "My API V1");
    });
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();


app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html");

app.Run();

and I do not see any Swagger. I am trying to run usual URL at localhost, adding ‘/swagger’ at the end. Nothing is happen, and I see in client console that this URL does not exist. I have a feeling (correct or not), that react-router (that is used here) is intercepting URL to swagger.

What should I do?

2

Answers


  1. In Visual Studio there is an option to enable OpenAPI support in the template. Maybe there is also a similar option in the dotnet cli to enable OpenAPI support. However I created a project using this option and its Program.cs looks like this:

    var builder = WebApplication.CreateBuilder(args);
    
    // Add services to the container.
    
    builder.Services.AddControllers();
    // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
    builder.Services.AddEndpointsApiExplorer();
    builder.Services.AddSwaggerGen();
    
    var app = builder.Build();
    
    app.UseDefaultFiles();
    app.UseStaticFiles();
    
    // Configure the HTTP request pipeline.
    if (app.Environment.IsDevelopment())
    {
        app.UseSwagger();
        app.UseSwaggerUI();
    }
    
    app.UseHttpsRedirection();
    
    app.UseAuthorization();
    
    
    app.MapControllers();
    
    app.MapFallbackToFile("/index.html");
    
    app.Run();
    

    But this template doesn’t support api versioning by default which you want to use in your code. How you achieve this can you learn here.

    Login or Signup to reply.
  2. When you are running frontend (what you see in browser, i.e. JavaScript and all) and backend (usually REST API, i.e. ASP.NET Core app), there are two server involved actually:

    • one serving JS bundles to render in browser,
    • your backend API responding to HTTP requests from frontend.

    Swagger documentation is specific to ASP.NET Core application, so you need to make sure you don’t try to access swagger documentation with base URL of your server for frontend.

    Locally, it means that you have localhost:[fe-port] and localhost:[be-port], and you must use localhost:[be-port] as base URL for accessing swagger documentation.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search