13.STATIC files in ASP.NET Core

In this article, we’ll learn how to make ASP.NET Core applications that support static files such as HTML, images, CSS, and JavaScript files.

Static files

• By default, ASP.NET Core applications do not provide static files.
• The default directory for static files iswwwroot, which must be at the root of the project folder.

Copy and paste the image into the wwwroot folder. Let’s assume the name of the file is a static file in # ASP.NET Core.

Static files

• By default, ASP.NET Core applications do not provide static files.
• The default directory for static files iswwwroot, which must be at the root of the project folder.

Copy and paste the image into the wwwroot folder. Let’s say the name of the file is “Ironman.png”. In order to be able to access this file from a browser, the path is :http://{{serverName}}/ Ironman.png In our example, we are running on a local computer, so the URL will look like this. The port number on your computer may be different. http://localhost:32702/ Iron Man.png.

From my computer, and then navigating to the Url above, we are still using the middleware of the Run() method to return the result of the response. I didn’t see the picture iron Man. This is because, at present, our application request processing pipeline does not have the required middleware to provide static files. The middleware we need to use is UseStaticFiles().

Modify e the code in the Configure() method to add the UseStaticFiles() middleware to our application’s request processing pipeline, as shown below. In order to be able to access this file from a browser, the path is :http://{{serverName}}/ Ironman.png In our example, we are running on a local computer, so the URL will look like this. The port number on your computer may be different. http://localhost:32702/ Iron Man.png.

From my computer, and then navigating to the Url above, we are still using the middleware of the Run() method to return the result of the response. I didn’t see the picture iron Man. This is because, at present, our application request processing pipeline does not have the required middleware to provide static files. The middleware we need to use is UseStaticFiles().

Modify the code in the Configure() method to add the UseStaticFiles() middleware to our application’s request processing pipeline, as shown below.

public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } // Add static file middleware app.usestaticFiles (); app.Run(async (context) => { await context.Response.WriteAsync("Hello World!" ); }); }Copy the code

Instead of classifying images, CSS, and JavaScript files in the wwwroot folder like the default templates provided by VS, we recommend sorting different file types into folders. See the following folder hierarchy:

In order to be able to from the browser to access the iron man. PNG we input address to http://localhost:32702/images/i iron man. PNG get results.

Provide default documents

Most Web programs have a default document, which is the contents of the document that appear when the user accesses the program’s address. For example, you have a file called default.html, and you want to provide it when the user accesses the root URL of the application, which is http://localhost:32702.

At this point, we access the address and see that I see the callback generated by the middleware THAT I registered with the Run() method. But I didn’t see the contents of the default document default.html. To be able to provide the default page, we must insert the UseDefaultFiles() middleware into the application’s request processing pipeline.

// Add the default file middleware app.useDefaultFiles (); // Add static file middleware app.usestaticFiles ();Copy the code

Please note: you must register UseDefaultFiles before UseStaticFiles to provide the default files. UseDefaultFiles is a URL rewriter that does not actually provide files. It simply locates URL rewriting to the default document, which is then provided again by the static file middleware. The URL displayed in the address bar is still the root URL, not the rewritten URL.

The following is the address information that the UseDefaultFiles middleware will look for by default

- The default file for index.htm - index.html-default.htm - default.htmlCopy the code

If you want to use another document, such as joez. HTML for example, as your default document, you can do this with the following code.

// Specify joez. HTML as the default document DefaultFilesOptions DefaultFilesOptions = new DefaultFilesOptions(); defaultFilesOptions.DefaultFileNames.Clear(); defaultFilesOptions.DefaultFileNames.Add("JoeZ.html"); // Add the default file middleware app.useDefaultFiles (defaultFilesOptions); // Add static file middleware app.usestaticFiles ();Copy the code

UseFileServer middleware

UseFileServer combines the functions of UseStaticFiles, UseDefaultFiles and UseDirectoryBrowser middleware. DirectoryBrowser middleware that supports directory browsing and allows users to view files in a specified directory. We can replace the UseStaticFiles and UseDefaultFiles middleware with the UseFileServer middleware.

// Use UseFileServer instead of UseDefaultFiles and UseStaticFiles FileServerOptions FileServerOptions = new FileServerOptions(); fileServerOptions.DefaultFilesOptions.DefaultFileNames.Clear(); fileServerOptions.DefaultFilesOptions.DefaultFileNames.Add("JoeZ.html"); app.UseFileServer(fileServerOptions);Copy the code

The important point to note here is that we should add middleware to the request processing pipeline of the application. In most cases, we add middleware using an extension method beginning with USE. Such as:

UseDeveloperExceptionPage()
UseDefaultFiles()
UseStaticFiles()
UseFileServer()
Copy the code

If you want to customize these middleware components, there are corresponding configurable tabs. Refer to the following table: