How to configure wwwroot folder in ASP.NET Core?. The Complete ASP.NET Core Developer Course 2023 [Videos].

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

wwwroot folder in ASP.NET Core

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

What is wwwroot folder in ASP.NET Core?

By default, the wwwroot folder in the ASP.NET Core application is treated as the webroot folder and this folder or directory should be present in the root project folder. In ASP.NET Core Application, the Static files can be stored in any folder under the webroot 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 an ASP.NET Core Web Application with Web and MVC Template, then by default this folder (wwwroot) is created in the root project folder. But if you create a new .NET Core Application with Empty 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 an ASP.NET Core Application using the Empty Project template and then understand how to add the wwwroot folder in it.

Creating an ASP.NET Core Application:

First, create a new ASP.NET Core Application with the name “FirstCoreWebApplication” with Empty project template. The project should be created with the following structure.

As you can 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. Now, only those files that are present inside in 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 then you can also change this default behavior.

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, lib with base URL and file name. For example, you can access the above site.js file in 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 Configure() method of Startup.cs file. If this is not clear at the moment, then dont worry, we will discuss everything about static files middleware in our next Video with examples.

Can we rename the wwwroot Folder?

Yes. You can rename the wwwroot folder to any other name as per your choice and set it as a webroot while preparing the hosting environment in the Program.cs file.

For example, lets rename the wwwroot folder to the “MyWebRoot” folder. Once you rename the wwwroot folder to MyWebRoot, then you need to call the UseWebRoot() method to configure MyWebRoot folder as a webroot folder in the Main() method of Program class as shown below.

public class Program

{

public static void Main(string[] args)

{

CreateHostBuilder(args).Build().Run();

}

public static IHostBuilder CreateHostBuilder(string[] args) =>

Host.CreateDefaultBuilder(args)

.ConfigureWebHostDefaults(webBuilder =>

{

webBuilder.UseStartup<Startup>().UseWebRoot("MyWebRoot");

});

}

With the above changes in place, now the MyWebRoot folder is going to act as the Webroot folder for your application and can serve the static files HTTP requests.