wwwroot Folder in ASP.NET Core

wwwroot Folder in ASP.NET Core

In this article, I will discuss wwwroot Folder in ASP.NET Core Application. Please read our previous article discussing the 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 Web Root folder, and this folder or directory should be present in the project root directory.

The wwwroot folder in ASP.NET Core is a standard folder that serves as the web root or the root directory from which static files are served to the clients. Files in this directory can be served directly to clients. These files can include images, CSS files, JavaScript files, and other static content.

Key Characteristics of wwwroot Folder in ASP.NET Core:

The following are some of the Key Characteristics of wwwroot Folder in ASP.NET Core Web Application:

  • Accessibility: Files placed in the wwwroot folder are served directly to clients without any processing from ASP.NET Core. This makes them efficient for serving static content.
  • Default Location: In an ASP.NET Core project, the wwwroot folder is located at the root level alongside other project folders like Controllers, Views, and Models.
  • Accessing Files: You can access files in the wwwroot folder using relative URLs in your web pages. For example, if you have a file named styles.css in wwwroot/css, you can reference it in your HTML using http://<your-app-url>/css/styles.css.
  • Static Files Middleware: ASP.NET Core includes UseStaticFiles middleware to serve static files from the wwwroot folder.
  • Security: The wwwroot directory provides security for your application. Files outside this directory are not accessible via a direct URL, helping to protect application code and data.
Adding the wwwroot (webroot) folder in the ASP.NET Core Application:

When we create a new ASP.NET Core Web Application with MVC or Razor Pages Project Template, then by default, this folder (wwwroot) is created in the project root directory. But if you create a new ASP.NET Core Application with Empty Project Template, then by default, this folder will not 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 the Create a new project tab, as shown in the image below.

Understanding Program.cs Class File in ASP.NET Core

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

What is a Host in ASP.NET Core?

Once you click on the Next button, it will open the Configure Your New Project window. Here, you must 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.

What is Program Class?

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

Creating ASP.NET Core Web Application using Visual Studio

Once you click the Create button, a new ASP.NET Core Web Application will be created in Visual Studio 2022. The project will have the following file and folder structure.

How to Create the ASP.NET Core Web Application using Visual Studio 2022 and .NET 6

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:

To add the wwwroot folder, right-click on the project, select the add => new folder option from the context menus, and then provide the folder name as wwwroot. Once you create the folder, please look at the folder symbol, which should be displayed as a web symbol, as shown below.

Adding wwwroot (webroot) Folder in ASP.NET Core

What is the wwwroot (webroot) folder going to contain in ASP.NET Core?

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:

What the wwwroot (webroot) folder is going to contain in ASP.NET Core

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: To Serve the Static Files, you must include the UseStaticFiles() Middleware component in the Main() method of the 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:

In ASP.NET Core, the WebApplicationOptions class plays an important role in configuring the properties of a WebApplicationBuilder, which is used to create an instance of a WebApplication. So, using the WebApplicationOptions Class, we can set and get the Application Environment Name, Application Name, Web Root Path, Content Root Path, etc. If you go to the definition of the WebApplicationOptions class, then you will see the following.

blank

The meaning of each property is as follows:

  • ApplicationName: The ApplicationName property of the WebApplicationOptions class is used to get or set the name of the application. This is used in various parts of the framework where an application name is required, like logging, caching, etc.
  • ContentRootPath: The ContentRootPath property of the WebApplicationOptions class sets the absolute path to the directory containing the application content files, i.e., the application’s root directory. It is the base path for locating content files, such as configuration and data files (e.g., appsettings.json, and .cshtml files for Razor Pages).
  • EnvironmentName: The EnvironmentName property of the WebApplicationOptions class specifies the environment in which the application is running. This could be Development, Staging, and Production. This is important for enabling environment-specific configurations or behaviors.
  • WebRootPath: The WebRootPath specifies the path to the root directory of static content, commonly known as the wwwroot folder in ASP.NET Core projects. This directory contains static files like HTML, CSS, JavaScript, and images.
  • Args: This property represents the command-line arguments passed to the application. It’s an array of strings (string[]).

Now, modify the Main method of the Program class as follows. Here, we display 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:

Understanding WebApplicationOptions Class in ASP.NET Core

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

Yes. We can rename the wwwroot folder to any other name 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.

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

So, we need to create an instance of the WebApplicationOptions class. While creating the instance or once the instance is created, we need to set the WebRootPath property or any other properties like Args, ContentRootPath, EnvironmentName, etc. 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, 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:

wwwroot folder in ASP.NET Core Application

As you can see in the above output, the MyWebRoot folder will now act as the Webroot folder for our application and can serve the static files.

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

1 thought on “wwwroot Folder in ASP.NET Core”

Leave a Reply

Your email address will not be published. Required fields are marked *