Static Files Middleware in ASP.NET Core Application

 

Static Files Middleware in ASP.NET Core

Static Files Middleware in ASP.NET Core Application

In this article, I am going to discuss how to serve static files using Static Files Middleware in ASP.NET Core Application. Please read our previous article before proceeding to this article where we discussed the wwwroot folder in ASP.NET Core Application. As part of this article, we are going to discuss the following pointers in details.

1. Where do we need to store the static files in ASP.NET Core?
2. What is wwwroot folder in ASP.NET Core?
3. How to Configure Static Files Middleware in ASP.NET Core Web Application?
4. How to use your own Webroot folder?

One of the most important features almost all web applications should have the ability to serve the static files directly from the file system. The static files such as HTML, Images, CSS, and JavaScript are the important assets of an application and ASP.NET Core can serve these files directly to the clients. But the important point that you need to keep in mind by default the ASP.NET Core cannot serve these static files. Some configuration is required in order to enable the ASP.NET Core to serve these static files directly.

Where do we need to store the static files in ASP.NET Core?

In ASP.NET Core Application, the default directory or location for the static files is wwwroot (webroot) folder and moreover, this folder or directory should be present in the project root folder. By default, this is the only place where the ASP.NET Core application can serve the static files directly. But we can change this default behavior by using the UseWebRoot method.

Let us understand everything steps by step:

First, create a new ASP.NET Core web application with the Empty template. With the Empty project template by default, you will not found the wwwroot folder. The project structure of ASP.NET Core Web Application with the Empty Project template is shown below.

Note: If you create the project using a Web or MVC template then by default the wwwroot folder will be created by visual studio.

Adding the wwwroot (webroot) folder:

Let us first create the wwwroot project folder. To do so, right-click on the project and then select add => new folder option from the context menu and then provide the folder name as wwwroot. Once you created the wwwroot folder, your project structure should be as shown below.

Once you created the wwwroot folder, let’s add an Image file within that folder. Please download and paste the following image into the wwwroot folder and modify the image name as MyImage.png.

Once you the above image, your wwwroot directory looks as shown below.

Now run the application and navigate to the following URL. The point that you need to remember is you need to replace the port number on which your application is running. 

http://localhost:<portnumber>/MyImage.png

When you navigate to the above URL, you will not get the output as expected, rather than you will get the following output.

The reason why we are not getting the output as expected because we don’t have any middleware which can serve the static files in the request processing pipeline.

How to Configuring the Static Files Middleware in ASP.NET Core Application?

In order to handle the static resources, we need to configure a middleware called UseStaticFiles() into the application request processing pipeline of an ASP.NET Core Application. The UseStaticFiles() middleware is an inbuilt middleware provided by ASP.NET Core Framework to handle the static files in an ASP.NET Core Application.

Let us Modify the Configure() method of the Startup class as shown below in order to add the UseStaticFiles() middleware to the request processing pipeline of the application. 

public class Startup

{

public void ConfigureServices(IServiceCollection services)

{

}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

}

//Adding Static Files Middleware to serve the static files

app.UseStaticFiles();

app.UseRouting();

app.UseEndpoints(endpoints =>

{

endpoints.MapGet("/", async context =>

{

await context.Response.WriteAsync("Hello World!");

});

});

}

}

With the above changes in place, now run the application and navigate to the URL: http://localhost:<portnumber>/MyImage.png and you will see the output as expected as shown in the below image.

How to Create your own Webroot folder in ASP.NET Core?

Let say we don’t want wwwroot as our webroot folder instead we want MyRoot as the webroot folder for our application. First. Modify the wwwroot folder as MyRoot and once you modify your project structure should be as shown below.

At this point, if you run the application and if you navigate to the below URL, then you will not get the output.

http://localhost:<portnumber>/MyImage.png

This is because by default the static files middleware will look for a folder with the name wwwroot and that is not present in our application at the moment. But we don’t want wwwroot, we want the Static files middleware to look MyRoot folder to the server the static files such as CSS, Images, JS, etc. To do so, we need to call the UseWebRoot method by passing MyRoot as a parameter in the CreateHostBuilder method which available in the 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("MyRoot");

});

}

With the above changes in place, now run the application and you should get the output as expected.