In this session, we are going to talk about ASP.NET Core Static File and how we can use Static File in our ASP.NET Core Web App project. Generally, we called html, JavaScript, CSS, images files as Static File and by default they should be located in wwwroot folder to be served.
Static File Location
As above mentioned, static file should be located in wwwroot folder under main project folder. Also in some circumstances we can keep our static files in other folder name that we will explain this situation in the next session of this tutorial series.
We can create wwwroot folder by right clicking on our project name and from Add menu select New Folder sub-menu. Then rename the folder to wwwroot. Also, for better folder structure it is recommended to add some other folder under wwwroor folder to be used for images, CSS and JavaScript file (js). We explain this categorization in detail during this session video.
ASP.NET Core Static File Middleware
For serving static file in our Web App, we need to call some middleware. One of these middleware is UseStaticFile. Moreover, we can assign a file to be loaded as project startup file. For this purpose we need to have a file with below file naming and UseDefaultFiles middleware.
- index.htm
- index.html
- default.htm
- default.html
Just bear in mind to call UseDefaultFiles before UseStaticFile to achieve proper result as shown in below piece of code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseDefaultFiles(); app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapGet("/", async context => { await context.Response.WriteAsync("Hello World!"); }); }); } |
Furthermore, we can change default file name to our custom file name. To achieve this goal, we can use one of UseDefaultFiles overload version which accept DefaultFilesOptions. Thus, first of all we need DefaultFilesOptions object.
|
1 2 3 4 5 |
DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions(); |
Then, we need to clear default file names.
|
1 2 3 4 5 |
defaultFilesOptions.DefaultFileNames.Clear(); |
and Add our custom name and pass in to UseDefaultFiles middleware
|
1 2 3 4 5 6 |
defaultFilesOptions.DefaultFileNames.Add("myhtml.html"); app.UseDefaultFiles(defaultFilesOptions); |
The total required code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions(); defaultFilesOptions.DefaultFileNames.Clear(); defaultFilesOptions.DefaultFileNames.Add("myhtml.html"); app.UseDefaultFiles(defaultFilesOptions); app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapGet("/", async context => { await context.Response.WriteAsync("Hello World!"); }); }); } |
UseFileServer Middleware
We can use UseFileServer instead of both UseStaticFile and UseDefaultFiles. By adding UseFileServer to Configure method of Startup Class, static files are served and default html page with above mentioned naming will be loaded as startup. Having said that, it is possible to change default file name same as above procedure. But this time with UseFile Server overload and its option file FileServerOptions. The Instruction is very similar to UseDefaultFiles middle ware and you can see the changes in below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } FileServerOptions fileServerOptions = new FileServerOptions(); fileServerOptions.DefaultFilesOptions.DefaultFileNames.Clear(); fileServerOptions.DefaultFilesOptions.DefaultFileNames.Add("myhtml.html"); app.UseFileServer(fileServerOptions); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapGet("/", async context => { await context.Response.WriteAsync("Hello World!"); }); }); } |
If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube and be in touch with us here.
You can download this Session Slides form HERE