Post
Ask Question

Serve Static Files In ASP.NET Core Using Visual Studio 2017

Introduction

This article explains about static files and how to set default pages using static files in ASP.NET using Visual Studio 2017 in a step by step way. Before reading this article, please read the previous parts at the below link.

Static Files

HTML, CSS, images, JavaScript files are called static files. These files are located in wwwroot folder insight our project. We directly access our static files which are in wwwroot folder, if not in wwwroot we cannot access directly.

Background

For some of the files for which we need to access directly from one place to another we use wwwroot folder.

Steps for Creating Static Page

Open New Project

We are using Visual Studio 2017 for developing ASP.NET Core application. Open visual studio and open new project then select the “ASP.NET Core Web Application (.NET Core)”.

ASP.NET Core

We select the “ASP.NET Core 1.1” and select Empty template. Use an empty project template for creating an ASP.NET Core application. This template does not have any content in it.

ASP.NET Core

Add Static File Packages

In our project, we need to add the Microsoft.AspNetCore.StaticFiles packages in our project to serve the static page in our ASP.Net core applications. Go to solution explorer, right click on our project, and go to Manage NuGet Packages.

ASP.NET Core

In NuGet Package manager, go to browse and type static files in search textbox and we can find the “Microsoft.AspNetCore.StaticFiles” package. Select “Microsoft.AspNetCore.StaticFiles” packages and click the install button on the right sight.

ASP.NET Core

ASP.NET Core

Select the version 1.1.1 and click install then review changes and click OK. Now Licenses Acceptance window will open then click the I accept button then installation will be complete.

We can see that the package in NuGet inside the Dependencies folder looks like below screenshot.

ASP.NET Core

Add HTML File in wwwroot

We are going to add sample HTML file in wwwroot folder. Go to solution explorer, right click on wwwroot go to Add then go to New Item.

ASP.NET Core

Select HTML Page and give page name then click Add button.

ASP.NET Core

We are adding some sample code in Home.html page. We are going to make Home.html as a home page using “Microsoft.AspNetCore.StaticFiles” packages.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>ASP.NET Core</title>  
  6. </head>  
  7. <body>  
  8.     <h1>Welcome To ASP.NET Core Static Page</h1>  
  9. </body>  
  10. </html>  

Add Code in Startup class

Go to Startup class and enable default file mapping on the current path then enable static file serving for the current path. We need to add following code in startup class at Configure method.

  1. public void Configure(  
  2.             IApplicationBuilder app,  
  3.             IHostingEnvironment env,  
  4.             ILoggerFactory loggerFactory  
  5.             )  
  6.         {  
  7.             loggerFactory.AddConsole();  
  8.             if (env.IsDevelopment())  
  9.             {  
  10.                 app.UseDeveloperExceptionPage();  
  11.             }  
  12.   
  13.             //Enables default file mapping on the current path  
  14.             DefaultFilesOptions options = new DefaultFilesOptions();  
  15.             options.DefaultFileNames.Clear();  
  16.             options.DefaultFileNames.Add("Home.html");  
  17.             app.UseDefaultFiles(options);  
  18.   
  19.             //Enables static file serving for the current request path  
  20.             app.UseStaticFiles();  
  21.   
  22.             app.Run((context) =>  
  23.             {  
  24.                 //await context.Response.WriteAsync("Hello World!");  
  25.                 throw new Exception();  
  26.             });  
  27.         }  

Now build the ASP.NET Core application and run the application. When we run the application it directly redirects the Home.html page.

ASP.NET Core
Not Directly Redirect Page

If we remove some lines in above-written code from Startup class in configure method, the  page does not redirect to the Home.html page. For example, we modified the below code in configure method and ran the application. 

  1. public void Configure(  
  2.             IApplicationBuilder app,  
  3.             IHostingEnvironment env,  
  4.             ILoggerFactory loggerFactory  
  5.             )  
  6.         {  
  7.             loggerFactory.AddConsole();  
  8.             if (env.IsDevelopment())  
  9.             {  
  10.                 app.UseDeveloperExceptionPage();  
  11.             }  
  12.   
  13.             app.Run((context) =>  
  14.             {  
  15.                 //await context.Response.WriteAsync("Hello World!");  
  16.                 throw new Exception();  
  17.             });  
  18.         }  

We get some of the errors in the output page and we can see it looks like the below screenshot.

ASP.NET Core

If we enter  “http://localhost:53498/home.html” manually then we get the same error. Now add a single line of code from the above-written code and it looks like below.

  1. public void Configure(  
  2.             IApplicationBuilder app,  
  3.             IHostingEnvironment env,  
  4.             ILoggerFactory loggerFactory  
  5.             )  
  6.         {  
  7.             loggerFactory.AddConsole();  
  8.             if (env.IsDevelopment())  
  9.             {  
  10.                 app.UseDeveloperExceptionPage();  
  11.             }  
  12.   
  13.             //Enables static file serving for the current request path  
  14.             app.UseStaticFiles();  
  15.   
  16.             app.Run((context) =>  
  17.             {  
  18.                 //await context.Response.WriteAsync("Hello World!");  
  19.                 throw new Exception();  
  20.             });  
  21.         }  

Here we mentioned “app.UseStaticFiles();” . It denotes enabling the static file for the current request path.  If entered manually like “http://localhost:53498/home.html” after running the application it will redirect the home.html page.

If page redirects to the Home.html Page we need to add “app.UseDefaultFiles()” before the “app.UseStaticFiles();”. The UseDefaultFiles() only searches on the below static file page names

  1. default.htm
  2. default.html
  3. index.htm
  4. index.html

We are creating a different name and we need to mention specifically to UseDefaultFiles(). We can add the below code to mention the specific file name.

  1. //Enables default file mapping on the current path  
  2. DefaultFilesOptions options = new DefaultFilesOptions();  
  3. options.DefaultFileNames.Clear();  
  4. options.DefaultFileNames.Add("Home.html");  
  5. app.UseDefaultFiles(options);   

After building and running the code it will  run successfully. Now the page automatically redirects to the Home.html  page.

Conclusion        

This article explained about how to serve static files in ASP.Net Core. I hope this article explained in a very simple way and is very useful to new learners.


Similar Articles