wwwroot Folder in ASP.NET Core

Back to: ASP.NET Core Tutorials For Beginners and Professionals

wwwroot Folder in ASP.NET Core

In this article, I am going to discuss wwwroot Folder in ASP.NET Core Application. Please read our previous article, where we discussed ASP.NET Core Request Processing Pipeline. At the end of this article, you will understand what wwwroot folder is, its need, and how to configure it in ASP.NET Core Web Application.

What is wwwroot folder in ASP.NET Core?

By default, the wwwroot folder in the ASP.NET Core Web Application is treated as the webroot folder, and this folder or directory should be present in the project root directory. In ASP.NET Core Web Application, the Static files can be stored in any folder under the webroot (wwwroot) folder and can be accessed with a relative path to that root.

Adding the wwwroot (webroot) folder in ASP.NET Core Application:

When you create a new ASP.NET Core Web Application with Web and MVC Template, then by default, this folder (wwwroot) is created in the root project directory. But if you create a new ASP.NET Core Application with Empty Project Template, then by default, this folder is not going to be created by Visual Studio.

As we are discussing everything from scratch, let us create a new ASP.NET Core Application using the Empty Project template and then understand how to add the wwwroot folder to it.

Creating a new ASP.NET Core Empty Web Application:

Create a new ASP.NET core application using the ASP.NET Core Empty template. To create a new Empty ASP.NET Core Web Application, open Visual Studio 2022 and click on the Create a new project tab, as shown in the image below.

Once you click on the Create a new project tab, it will open the Create a new project window. From this window, you need to select the ASP.NET Core Empty project template and click the Next button, as shown in the image below.

Once you click on the Next button, it will open the Configure Your New Project window. Here, you need to provide the necessary information to create a new project. First, give an appropriate name for your project (FirstCoreWebApplication), set the location where you want to create this project, and the solution name for the ASP.NET Core Web application. And finally, click on the Create button, as shown in the image below.

Once you click on the Next button, it will open the Additional Information window. Here, you need to select .NET 6.0 as the Framework. You also need to check the Configure for HTTPS and Do not use top-level statements check boxes, and finally, click on the Create button as shown in the below image.

That’s it. Once you click on the Create Button, the project is going to be created with the Empty template with the following folder and file structure.

As you can see in the above image, there is no such folder called wwwroot in our application.

Adding wwwroot (webroot) Folder in ASP.NET Core:

In order to add the wwwroot folder, right-click on the project and then select add => new folder option and then provide the folder name as wwwroot. Once you created the folder, then please have a look at the folder symbol as shown below.

What the wwwroot (webroot) Folder is Going to Contain in ASP.NET Core?

In the earlier ASP.NET application, the static files can be served either from the project root folder or any other folder under it. But this has been changed in ASP.NET Core. Only those files inside the webroot – wwwroot folder or any subfolder under it can be served over an HTTP request. All other files are blocked and cannot be served by default. But if you want, you can also change this default behavior, and we will discuss this in our upcoming articles.

Generally, there should be separate folders for the different types of static files, such as JavaScript, CSS, Images, Library Scripts, etc, inside the wwwroot folder as shown below:

Now, you can access static files such as CSS, JS, and lib with the base URL and file name. For example, you can access the above site.js file from the js folder by https://localhost:<port>/js/site.js

Note: In order to Serve the Static Files, you need to include the app.UseStaticFiles() Middleware component in the ‘Main()’ method of Program.cs class file. If this is not clear at the moment, then don’t worry. We will discuss everything about Static Files Middleware in our next article with examples.

Understanding WebApplicationOptions Class in ASP.NET Core:

Using WebApplicationOptions Class, we can set the EnvironmentName, ApplicationName, WebRootPath, ContentRootPath, etc. If you go to the definition of WebApplicationOptions class, then you will see the following.

The meaning of each property is as follows:

1. Args: The command line arguments.
2. EnvironmentName: The environment name.
3. ApplicationName: The application name.
4. ContentRootPath: The content root path.
5. WebRootPath: The webroot path.

Note: The content root path is the absolute path to the directory that contains the application content files. The webroot path is the directory’s absolute path containing the web-servable application content files.

Now, modify the Main method of the Program class as follows. Here, we are displaying the default EnvironmentName, ApplicationName, WebRootPath, and ContentRootPath.

namespace FirstCoreWebApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            var app = builder.Build();
            app.MapGet("/", () => $"EnvironmentName: {app.Environment.EnvironmentName} \n" +
            $"ApplicationName: {app.Environment.ApplicationName} \n" +
            $"WebRootPath: {app.Environment.WebRootPath} \n" +
            $"ContentRootPath: {app.Environment.ContentRootPath}");

            //This will Run the Application
            app.Run();
        }
    }
}

Output:

Can we rename the wwwroot Folder in ASP.NET Core (.NET 6)?

Yes. You can rename the wwwroot folder to any other name of your choice and set it as the webroot while preparing the hosting environment in the Program.cs file. In that case, we need to use the other overloaded version of the CreateBuilder method, which takes the WebApplicationOptions instance as a parameter.

So, we need to create an instance of WebApplicationOptions class, and while creating the instance or once the instance is created, then we need to set the WebRootPath property or any other properties like Args, ContentRootPath, EnvironmentName, etc., and then we need to pass this instance to the CreateBuilder method.

For example, let’s rename the wwwroot folder to the MyWebRoot folder. Once you rename the wwwroot folder to MyWebRoot, then you need to set the WebRootPath property of the WebApplicationOptions instance to MyWebRoot. Then you need to pass this WebApplicationOptions instance to the CreateBuilder method.

For a better understanding, please modify the Main method of the Program class as shown below to configure the MyWebRoot folder as the webroot folder for our application.

namespace FirstCoreWebApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            //Step1: Creating an Instance of WebApplicationOptions Class
            WebApplicationOptions webApplicationOptions = new WebApplicationOptions
            {
                WebRootPath = "MyWebRoot", //Setting the WebRootPath as MyWebRoot
                Args = args, //Setting the Command Line Arguments in Args
                EnvironmentName = "Production", //Changing to Production
            };

            //Step2: Pass WebApplicationOptions Instance to the CreateBuilder Method
            var builder = WebApplication.CreateBuilder(webApplicationOptions);

            var app = builder.Build();
            app.MapGet("/", () => $"EnvironmentName: {app.Environment.EnvironmentName} \n" +
            $"ApplicationName: {app.Environment.ApplicationName} \n" +
            $"WebRootPath: {app.Environment.WebRootPath} \n" +
            $"ContentRootPath: {app.Environment.ContentRootPath}");

            //This will Run the Application
            app.Run();
        }
    }
}

Output:

As you can see in the above output, now the MyWebRoot folder is going to act as the Webroot folder for our application and can serve the static files HTTP requests.

In the next article, I am going to discuss How to Handle Static Files in ASP.NET Core using Static Files Middleware Component with Examples. In this article, I explain the wwwroot folder in ASP.NET Core Application. I hope this article will help you to understand the wwwroot folder in ASP.NET Core Application.