app.UseEndpoints in .NET 8's top-level program.cs with combination of Areas

I have an ASP.NET Core MVC web app where ASP.NET Core Identity is within an area called Identity, and the main web app is without an area. On top of this, I want a custom frontend set of pages that come with their npm packages and gulped JS and CSS files that I do not want to mix with main application. So I want another area called Landing. It will be a single endless scroll page, and security is not needed in that area.

I have this in my program.cs:

app.UseEndpoints(endpoints =>
{
    endpoints.MapAreaControllerRoute(name: "Identity", areaName: "Identity", pattern: "Identity/{controller=Home}/{action=Index}");
    endpoints.MapControllerRoute("default", "{controller=Dashboard}/{action=DashboardV3}");
    endpoints.MapRazorPages();
});

Because I couldn't figure out the new app.MapGet("/", () => "Hello World!"); syntax.

Issue:

Issue is that if I go the the root URL such as localhost:20202/ or myap.com/, I get an error/404 page. I have to explicitly hit a controller in either under Identity Area or in the base application.

I'm not sure at this stage if it is wise to move everything to areas but I do have to add the Landing area now and my routing is not working as expected. I assumed that if a user just goes to localhost:20202, he's be redirected to the default page (controller/action) which will be marked Authorized and he'll be sent to Identity/*/Login. But I have to explicitly specify the url for base app as: localhost:20202/Revenue/AssetList to trigger everything.

Required

Ultimately, base URL should point to /Landing/Home/index.html
Login button there will redirect to /Revenue/Dashboard (no area)
Authorize will intercept and send to /Identity/*/Login

That is what I want to map in routes.

Solution

Issue is that if I go the the root URL such as localhost:20202/ or myap.com/, I get an error/404 page. I have to explicitly hit a controller in either under Identity Area or in the base application.

According to your scenario here is the thing, since your Landing area is a custom frontend set of pages that come with their npm packages and gulped JS and CSS files which mostly a static file, so you don't need controller routing.

Instead of that, you should configure static file serving for the Landing area's assets like HTML, CSS, and JS. Use MapFallbackToDirectory with the appropriate directory path for your Landing files.

For instance, you can do as following:

endpoints.MapAreaFallbackToDirectory(name: "Landing", areaName: "Landing", directory: "Landing/dist");

And then configure your static file resource:

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "Landing")
    ),
    RequestPath = "/Landing"
});

Note: Check the static file configuration.

Therefore, your Identity, dashboard, and landing page route configuration should all be as follows:

app.UseEndpoints(endpoints =>
{
   
    endpoints.MapAreaControllerRoute(name: "Identity", areaName: "Identity", pattern: "Identity/{controller=Home}/{action=Index}");
    endpoints.MapControllerRoute(
        name: "landing",
        pattern: "Landing/{controller=Home}/{action=Index}"
    );
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Dashboard}/{action=DashboardV3}"
    );
    endpoints.MapRazorPages();
    endpoints.MapFallbackToFile("/Landing/{**slug}", "Landing/Home/index.html");
});

Note: "/Landing" is the literal path prefix. Requests that start with "/Landing" will match this route. keep in mind, {**slug} parameter placeholder would capture the rest of the URL as a single parameter named "slug." You can refer to this official document.