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
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:
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.
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:
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]
andlocalhost:[be-port]
, and you must uselocalhost:[be-port]
as base URL for accessing swagger documentation.