Unable to have access to swagger UI when launching my app

Question

I am using ASP.NET core 6 and i created my application with the react option ( so i have a ClientApp in my folder).

When i run the application, i will see my react UI and unable to see the swagger UI.

Usually when u choose to build frontend and backend from two different folder, you will see the swagger UI if u run the backend on visual studio.

BUT right now i only see my react app UI. I am trying to access the swagger with https://localhost:44434/swagger or https://localhost:44434/swagger/index.html but it just stays on my react app UI page.

This is the video i followed to try to set it up :

https://www.youtube.com/watch?v=RvwvFmO-56E

Any idea ? Thanks a lot !

This is my program.cs code :

    using BugTracker.Context;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

// Add services to the container.

builder.Services.AddControllersWithViews();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

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();
}
app.UseSwagger();
app.UseSwaggerUI();

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


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

app.MapFallbackToFile("index.html"); ;

app.Run();

This is my controller code :

using Microsoft.AspNetCore.Mvc;
using System;

namespace BugTracker.Controllers
{
    [ApiController]
    [Route("api/authentication")]
    public class AuthController : Controller
    {
        [HttpGet]
        public IActionResult Test()
        {
            return Ok("success");
        }
    }
}

Answer 1

In addition to adding EndpointsApiExplorer and SwaggerGen services, you also have to modify the setupProxy.js file in the client app and add the swagger endpoint.

Your Program.cs file should look something like this:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

app.UseSwagger();
app.UseSwaggerUI();

// 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();
}

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


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

app.MapFallbackToFile("index.html");

app.Run();

and your useProxy.js file should look like this:

const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:37316';

const context =  [
  "/swagger",
  "/weatherforecast",
];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};

Answer 2

I had the exact same issue. Nothing worked (Angular SPA with NET 6). For the heck of it I commented out the 2 lines the instructions said to use and it started working!

app.UseSwaggerUI(options =>
{
// options.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");
// options.RoutePrefix = String.Empty;
});

Answer 3

If you are creating WebAPI + React UI:

1. In Program.cs file you should add builder.Services.AddControllers();

2. Your AuthController class should inherit ControllerBase instead of Controller.

3. After app.UseRouting(); try using app.UseEndpoints(endpoint => endpoint.MapControllers());