How to Setup Default Page in ASP.NET Core

Since we will be starting from scratch with our discussion, let’s create a new ASP.NET Core Empty Application. Click the Create a new project tab in Visual Studio 2022, as indicated in the image below, to start a new Empty ASP.NET Core Web Application.

The Create a new project window will open when you select the Create a new project tab. As indicated in the image below, you must choose the ASP.NET Core Empty project template from this window and click the Next button.

Upon selecting the Next button, the Configure Your New Project window will open. In order to start a new project, you must fill in this information. First, choose the location where you want to create the project, the name of the ASP.NET Core Web application solution, and an appropriate project name (FirstCoreWebApplication). Lastly, select the “Create” button, as indicated in the illustration below.

The Additional Information window will open after you click the Next button. Here, the Framework must be set to.NET 6.0. Additionally, you must check the boxes for “Configure for HTTPS” and “Do not use top-level statements.” Lastly, as indicated in the picture below, click the Create button.

That is all. The project will be created using the Empty template as soon as you click the Create button. The wwwroot folder is not found by default when using the Empty project template. The ASP.NET Core Web Application’s project structure using the Blank Project template is displayed below.

Default access to the webroot folder, also known as the wwwroot folder, is not provided by the ASP.NET Core Empty Project Template. So let’s update the project root directory to include the wwwroot folder. To accomplish this, right-click on the project, choose Add => New Folder from the context menu, and enter wwwroot as the folder name. After creating the wwwroot folder, the structure of your project should look like this.

Adding an HTML page to an ASP.NET Core application’s wwwroot folder:

Let’s add a single HTML page to the wwwroot folder called index.html. To accomplish this, open the add new item window by performing a right-click on the wwwroot folder and choosing add => new item. Search for HTML in the new item window, pick the HTML page, enter “index.html” as the HTML Page name, and then click the Add button, as seen in the example below.

After adding the HTML Page to the wwwroot folder, the structure of your project’s folders should resemble the illustration below.

The following code should now be copied and pasted into the index.html file, which is located inside the wwwroot folder.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1> This is Index HTML File</h1>
</body>
</html>

Modifying the Main Method of the Program Class:

To serve the static files in ASP.NET Core Web Applications, we need to use the UseStaticFiles Middleware Component in the Request Processing Pipeline. So, let us modify the Main Method of the Program class as shown below to use the UseStaticFiles Middleware Component.

namespace FirstCoreWebApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);
            var app = builder.Build();
            //Adding Static Files Middleware Component to serve the static files
            app.UseStaticFiles();
            //Adding Another Middleware Component to the Request Processing Pipeline
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Request Handled and Response Generated");
            });
            //This will Run the Application
            app.Run();
        }
    }
}

Now run the application and navigate to the URL: http://localhost:<portnumber>/index.html, and you will see the expected output coming from the static Index.html file, as shown in the image below.

Assume you expel index.html from the URL or explore to the base URL. In that case, the ending middleware will handle the ask enlisted utilizing the Run strategy. The Run strategy will serve the default ask, as appeared within the picture underneath.

But what we need is, when we explore to the base URL as appeared over, we need our index.html page to serve the ask. We have to be set the index.html page as our default page.

Setting the Default Page in ASP.NET Core Application:

Most Web Applications have a default page such as index.htm(l) or default.htm(l) as their startup page because it is easy to remember. This is often the Net Page that will be displayed when a client visits the root URL of that application. For illustration, on the off chance that you have got a page with the title index.html and need that page to be your default page at whatever point any client visits your root URL, that page ought to be displayed.

To serve the index.html page, which is display interior the wwwroot envelope as the default page of your application, you would like to include another middleware component, i.e., UseDefaultFiles() middleware, into the Ask Preparing Pipeline. So, adjust the Most() Strategy of the Program course as appeared underneath to utilize the UseDefaultFiles() middleware component to set your application’s default page.

namespace FirstCoreWebApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);
            var app = builder.Build();
            //Setting the Default Files
            app.UseDefaultFiles();
            //Adding Static Files Middleware Component to serve the static files
            app.UseStaticFiles();
            //Adding Another Middleware Component to the Request Processing Pipeline
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Request Handled and Response Generated");
            });
            //This will Run the Application
            app.Run();
        }
    }
}

With the over changes in put, presently run the application, and you ought to see the yield as anticipated, as appeared underneath. That index.html page serves as your default page.

Note: To serve the default record, you would like to include the UseDefaultFiles() middleware before the UseStaticFiles() middleware. You would like to keep in mind that the UseDefaultFiles() middleware is fair a URL rewriter, and it never serves the inactive records. The work of this middleware is to rework the approaching URL to the default record, which the Inactive Records Middleware will at that point serve.

How to Set Custom HTML Page as the Default Page?

The UseDefaultFiles() middleware will search the wwwroot folder for the following files.

index.htm
index.html
default.htm
default.html

This is often the default behavior. But on the off chance that you need, at that point you’ll be able moreover alter this default behavior. For case, let us include another HTML page into the project’s wwwroot envelope named MyCustomPage1.html. Once you include the MyCustomPage1.html record, at that point the wwwroot envelope contains two HTML records, as appeared within the underneath picture.

Now, open the MyCustomPage1.html file and copy and paste the following code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1> This is MyCustomPage1 HTML File</h1>
</body>
</html>

Setting MyCustomPage1.html as Default Page:

Presently, we need the MyCustomPage1.html page to be our default page rather than the index.html page. To do this, you would like to adjust the Most() strategy of the Program lesson as takes after. Here, we create an instance of the DefaultFilesOptions course, including the default record title as MyCustomPage1.html, and after that passing the DefaultFilesOptions instance to the UseDefaultFiles middleware component. The taking after code is self-explained, so if it’s not too much trouble go through the comment lines for distant better;a much better;a higher;a stronger;an improved”>a much better understanding.

namespace FirstCoreWebApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);
            var app = builder.Build();
            //Specify the MyCustomPage1.html as the default page
            //First Create an Instance of DefaultFilesOptions
            DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
            //Clear any DefaultFileNames if already there
            defaultFilesOptions.DefaultFileNames.Clear();
            //Add the default HTML Page to the DefaultFilesOptions Instance
            defaultFilesOptions.DefaultFileNames.Add("MyCustomPage1.html");
            //Setting the Default Files
            //Pass the DefaultFilesOptions Instance to the UseDefaultFiles Middleware Component
            app.UseDefaultFiles(defaultFilesOptions);
            //Adding Static Files Middleware Component to serve the static files
            app.UseStaticFiles();
            //Adding Another Middleware Component to the Request Processing Pipeline
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Request Handled and Response Generated");
            });
            //This will Run the Application
            app.Run();
        }
    }
}

Presently run the application, and you may see the anticipated yield coming from the MyCustomPage1.html file, as appeared within the picture underneath. In case you still see the yield from the index.html page, it may be due to cache, so attempt reloading it. In case you’re still not getting the information from the MyCustomPage1.html record, restart Visual Studio.

What is the use of the UseFileServer() Middleware Component in ASP.NET Core?

The UseFileServer() middleware components combine the usefulness of UseStaticFiles, UseDefaultFiles, and UseDirectoryBrowser Middlewares. We as of now talked about the UseStaticFiles and UseDefaultFiles Middleware Components. The DirectoryBrowser Middleware, as the title says, empowers catalog browsing, permitting the clients to see the records put away in a particular catalog. In our case, we will supplant the UseStaticFiles() and UseDefaultFiles() Middleware with the UseFileServer() Middleware Component, as appeared underneath.

namespace FirstCoreWebApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);
            var app = builder.Build();
            // Use UseFileServer instead of UseDefaultFiles and UseStaticFiles
            FileServerOptions fileServerOptions = new FileServerOptions();
            fileServerOptions.DefaultFilesOptions.DefaultFileNames.Clear();
            fileServerOptions.DefaultFilesOptions.DefaultFileNames.Add("MyCustomPage1.html");
            app.UseFileServer(fileServerOptions);
            //Adding Another Middleware Component to the Request Processing Pipeline
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Request Handled and Response Generated");
            });
            //This will Run the Application
            app.Run();
        }
    }
}

Now run the application, and you will see the output as expected, as shown in the below image.

Example to Understand UseDirectoryBrowser Middleware Component in ASP.NET Core Application:

One watcher inquired within the comment segment to provide an illustration of the UseDirectoryBrowser Middleware Component within the ASP.NET Center Application. I am overhauling the substance from ASP.NET Center 3,1 to .NET 6, so I am including the illustration here. This middleware component empowers registry browsing on the current way. Let us understand this with an case. It would be ideal if you adjust the Most strategy of the Program lesson as takes after. Here, I am utilizing the UseDirectoryBrowser Middleware Component.

namespace FirstCoreWebApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);
            var app = builder.Build();
            // Enable directory browsing on the current path
            app.UseDirectoryBrowser();
            app.UseStaticFiles();
            //Adding Another Middleware Component to the Request Processing Pipeline
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Request Handled and Response Generated");
            });
            //This will Run the Application
            app.Run();
        }
    }
}

Presently, run the application, and you may see the catalog structure of the wwwroot folder, as appeared within the underneath picture.

Differences Between UseDirectoryBrowser, UseStaticFiles, UseFileServer, and UseDefaultFiles in ASP.NET Core

In ASP.NET Core, there are a few middleware components that you simply can utilize to serve records specifically to the client, such as UseDirectoryBrowser, UseStaticFiles, UseFileServer, and UseDefaultFiles. Understanding their contrasts is fundamental for accurately designing how your application serves inactive substance. Let’s dig into each one:

UseDirectoryBrowser

Purpose: This middleware permits you to browse the catalog structure of your application on the net. It’s primarily used for improvement purposes because it uncovered the catalog structure to the client.
Behavior: Once you explore to a URL that maps to a registry on the server, it presents a see of the directory’s substance. It records records and registries and permits you to explore through them.
Security Consideration: It ought to not be utilized in a generation environment unless you’ve got a particular got to uncover the catalog structure to the end-user, because it can uncover delicate data approximately the server’s record framework.

UseStaticFiles

Purpose: This is the most common middleware for serving static files (like images, JavaScript, CSS files) in ASP.NET Core applications.
Behavior: It maps a ask way to a physical record framework way and serves the record found at that way. It does not list registry substance; it as it were serves person records.

UseDefaultFiles

Purpose: This middleware arranges the default record to be served to a registry when a ask is made. Commonly, it’s utilized to serve index.html or default.html when the root of the location is gotten to.
Behavior: It doesn’t serve the record itself but or maybe modifies the URL to the default record, which UseStaticFiles at that point picks up.
It must be called some time recently UseStaticFiles because it as it were revamps the URL, depending on UseStaticFiles really to serve the record.

UseFileServer

Purpose: UseFileServer is essentially a convenience method that combines the functionality of UseStaticFiles, UseDefaultFiles, and, optionally, UseDirectoryBrowser.
Behavior: It empowers the serving of inactive records, and it can moreover empower catalog browsing and default record serving (like serving index.html when the root URL is gotten to).

Conclusion

UseDirectoryBrowser is for browsing catalogs (generally for advancement).
UseStaticFiles serves person inactive records.
UseDefaultFiles revamps URL demands to serve default records, utilized in conjunction with UseStaticFiles.
UseFileServer could be a combination that serves inactive records, empowers registry browsing, and serves default records.

When designing your application, choosing the middleware that adjusts along with your particular prerequisites for serving inactive substance whereas considering security and execution suggestions is critical.