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");
        }
    }
}

Codon

I create a new .net 6 react project with the default template. Then Swagger ui isn't intetgrated by default. So I install package Swashbuckle.AspNetCore, and then in Program.cs I added builder.Services.AddSwaggerGen(); and app.UseSwagger(); app.UseSwaggerUI();, then after running the application, visiting https://localhost:port/swagger/index.html, I can see Swagger Ui – Brownout

@TinyWang Ok so i must be doomed, i have all of the things you listed. When i access the first home page there's the text of the default app with the navbar, but when i go to swagger/index.html, only the navbar stays and the text disappear and it's a blank page. – Codon

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

Robertaroberto

the problem was to not have "/swagger" in setupProxy.js, Thanks. – Codon

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

Specimen

You saved my day. Thank you! – Maiga

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

Laverty

Thanks for reply, i still get the same behavior. I really don't get it haha. – Codon

Unfortunately there are multiple conflicted lines in your code. I suggest you should get a tutorial from the web. Les Jackson is good if you want to learn how to build .net core apis and such. – Laverty