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 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 the wwwroot Folder in ASP.NET Core?

In ASP.NET Core, the wwwroot folder is the designated Web Root directory where static files are stored and served to clients. This folder, located in the project root by default, contains static assets like images, CSS, JavaScript, and other resources accessible to clients via direct URLs.

Key Characteristics of the wwwroot Folder

• Default Location: The wwwroot folder sits at the root level of an ASP.NET Core project.
• Direct Access to Files: Files within wwwroot are directly accessible by clients via relative URLs. For instance, a file named styles.css in wwwroot/css can be accessed as http://<your-app-url>/css/styles.css.
• Static Files Middleware: To serve files from wwwroot, we must use the UseStaticFiles middleware in the application’s middleware pipeline.
• Enhanced Security: Files located outside wwwroot aren’t publicly accessible, which helps safeguard application logic and sensitive files. Only files within wwwroot or subdirectories are served to clients, enhancing security by preventing unauthorized access to server code.

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. The project will have the following file and folder structure by default.

As you can see in the above image, there is no such folder called wwwroot in our application. When we create a new ASP.NET Core Web Application with MVC or Razor Pages Project Template, this folder (wwwroot) is created in the project root directory by default. But if we create a new ASP.NET Core Application with Empty Project Template, this folder will not be created by Visual Studio by default.

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.

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.

What is the wwwroot (webroot) folder 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 Web Root – 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, which is typically unnecessary.

Generally, there should be separate sub-folders for the different types of static files, inside the wwwroot folder such as:

• CSS for stylesheets,
• js for JavaScript files,
• images for images,
• lib for libraries (e.g., third-party scripts).

For a better understanding about folder structure, please have a look at the following image.

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 these static files, include the UseStaticFiles() middleware in the Main method of the Program.cs file. This middleware enables ASP.NET Core to process static file requests. If this is not clear at the moment, don’t worry. We will discuss everything about Static Files Middleware with examples in our next article.

Understanding WebApplicationOptions Class in ASP.NET Core:

In ASP.NET Core Web Application, 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, command-line arguments, etc. If you go to the definition of the WebApplicationOptions class, then you will see the following.

Key Properties of WebApplicationOptions:

• ApplicationName: The ApplicationName property of the WebApplicationOptions class is used to get or set the application’s name. This is used in various parts of the framework where an application name is required, like logging, caching, etc.
• ContentRootPath: Defines the absolute path to the application’s root directory, where content files (like configuration files) are stored. This is the base for accessing content such as 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 property of the WebApplicationOptions class specifies the path to the root directory of static content, commonly known as the wwwroot folder in the ASP.NET Core application. This directory contains static files like HTML, CSS, JavaScript, and images.
• Args: The Args property of the WebApplicationOptions class represents the command-line arguments passed to the application. It’s an array of strings (string[]).

Example to Understand WebApplicationOptions Class Properties:

Now, modify the Main method of the Program class as follows. Here, we display the default values of the EnvironmentName, ApplicationName, WebRootPath, and ContentRootPath properties of the WebApplicationOptions class.

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 Start the Application
            app.Run();
        }
    }
}

Output:

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

Yes, we can rename the wwwroot folder to another name and specify it as the Web Root directory. In that case, we need to use the other overloaded version of the CreateBuilder method, which takes the WebApplicationOptions instance as a parameter.

To do this, we need to create an instance of WebApplicationOptions, set the WebRootPath property to the new folder name (we can also set any other properties like Args, ContentRootPath, EnvironmentName, etc), and pass this instance to the CreateBuilder method. For example, let’s rename the wwwroot folder to the MyWebRoot folder.

For a better understanding, please modify the Program class as shown below to configure the MyWebRoot folder as the webroot folder for our application. We are also setting the Environment Name and Args property values along with WebRootPath.

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, the MyWebRoot folder will now act as the Webroot folder for our application and can serve static file HTTP requests.

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 understand the wwwroot folder in the ASP.NET Core Application.