Oct 20, 20224 min read

What are Static files in ASP.NET Core? How to use it?

Static files, such as HTML, CSS, images, and JavaScript, are assets an ASP.NET Core app serves directly to clients by default. Static files are stored within the project's web root directory. The default directory is {content root}/ wwwroot, but it can be changed with the UseWebRoot method. For more information, see the Content root and Web root.

Static files are accessible via a path relative to the web root. For example, the Web Application project templates contain several folders within the wwwroot folder:

wwwroot
- css
- js
- lib

Consider creating the wwwroot/images folder and adding the wwwroot/images/MyImage.jpg file. The URI format to access a file in the images folder is https://<hostname>/images/<image_file_name>. For example, https://localhost:5001/images/MyImage.jpg

How to use Static files in ASP.NET Core?

Let us now take a simple example in which we will understand how we can serve those files in our application.

Here, we want to add a simple HTML file to our FirstAppDemo application and this HTML file has to go into the web root (wwwroot) folder. Right-click on wwwroot folder in the Solution Explorer and select Add → New Item.

In the middle pane, select the HTML Page and call it index.html and click the Add button.

You will see a simple index.htmlfile. Let us add some simple text and title as shown below.

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title>Welcome to ASP.NET Core</title>
      </head>
      <body>       
        Hello, Wolrd! this message is from our first static HTML file.    
      </body>
</html>

When you run your application and go to index.html in the browser, you will see that the app.Run middleware throws an exception because there is nothing currently in our application.

There is no piece of middleware that will go looking for any file on the file system to serve. To fix this issue, go to the NuGet packages manager by right-clicking on your project in Solution Explorer and selecting Manage NuGet Packages.

Search for Microsoft.AspNet.StaticFiles which will find the static files middleware. Let us install this nuget package and now we should have additional methods that we can use to register middleware inside the Configure method.

Let us add UseStaticFiles middle in Configure method as shown in the following program.

using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Hosting;
using Microsoft.AspNet.Http;

using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Configuration;

namespace FirstAppDemo 
{
     public class Startup 
    {
         public Startup() 
         {
              var builder = new ConfigurationBuilder()
                .AddJsonFile("AppSettings.json");
              Configuration = builder.Build();
         }
         public IConfiguration Configuration { get; set; }

         // This method gets called by the runtime. 
         // Use this method to add services to the container. 
         // For more information on how to configure your application, 
         // visit http://go.microsoft.com/fwlink/?LinkID=398940 
        public void ConfigureServices(IServiceCollection services) {}
         
         // This method gets called by the runtime.  
         // Use this method to configure the HTTP request pipeline. 
         public void Configure(IApplicationBuilder app) { 
              app.UseIISPlatformHandler();  
              app.UseDeveloperExceptionPage();      
              app.UseRuntimeInfoPage(); 
              app.UseStaticFiles(); 
         
         
             app.Run(async (context) => 
            {
                throw new System.Exception("Throw Exception");
                var msg = Configuration["message"];
                await context.Response.WriteAsync(msg);
           });
      }
    
    // Entry point for the application. 
    public static void Main(string[] args) => WebApplication.Run<Startup>(args);
    }
}

Unless you override the options and pass in some different configuration parameters, what static files will do is for a given request is to look at the request path. This request path is then compared to the file system and what is on the file system.

If the static file sees a file that it can use, it will serve up that file and not call the next piece of middleware.
If it doesn't find a matching file, then it will simply continue with the next piece of middleware.

Let us save the Startup.cs file and refresh your browser.

You can now see the index.html file. Anything that you put anywhere inside the wwwroot − any JavaScript file or CSS file or HTML file, you will be able to serve them up.

Now if you want index.html to be your default file, this is a feature that IIS has always had.
You can always give IIS a list of default files to look for. If someone came to the root of a directory or, in this case, the root of the website and if IIS found something named index.html, it would just automatically serve that file.
Let us now start by making a few changes. First, we need to remove the forced error and then add another piece of middleware, which is UseDefaultFiles. The following is the implementation of the Configure method.

// This method gets called by the runtime.  
// Use this method to configure the HTTP request pipeline. 
public void Configure(IApplicationBuilder app)  
{ 
   app.UseIISPlatformHandler();  
   app.UseDeveloperExceptionPage(); 
   
   app.UseRuntimeInfoPage();  
   app.UseDefaultFiles(); 
   app.UseStaticFiles();  
   
   app.Run(async (context) => 
    {
        var msg = Configuration["message"];
        await context.Response.WriteAsync(msg);
    });
}

This piece of middleware will look at an incoming request and see if it is for the root of a directory and if there are any matching default files.
You can override the options for this piece of middleware to tell it what are the default files to look for, but Index.html is by default one of the default files.

Let us save the Startup.cs file and go to the root of the web application in your browser.

You can now see that the index.html is your default file. The order in which you install the middleware is important because if you had UseDefaultFiles after UseStaticFiles, you would not get the same result.

If you are going to use UseDefaultFiles and UseStaticFiles, you might also want another piece of middleware that is inside the Microsoft.aspnet.staticfiles, NuGet package, and that is the FileServer middleware. This essentially includes the Default Files and the Static Files in the correct order.

// This method gets called by the runtime.  
// Use this method to configure the HTTP request pipeline. 
public void Configure(IApplicationBuilder app) 
{ 
   app.UseIISPlatformHandler();  
   app.UseDeveloperExceptionPage(); 
   
   app.UseRuntimeInfoPage();  
   app. UseFileServer();  
   
   app.Run(async (context) => 
    {
        var msg = Configuration["message"];
        await context.Response.WriteAsync(msg);
    });
}

Let us save the Startup.cs file again. Once you refresh the browser, you will see the same result as shown in the following screenshot.