How to handle Static Files in ASP.NET Core
Hello friends, I hope you all are having fun. In today's tutorial, we are going to have a look at
How to handle Static Files in ASP.NET Core. It's our 4th tutorial in ASP.NET Core series. If you inspect your localhost page displaying Hello World, then you will see that there isn't any HTML code in it. Instead, it's just displaying Hello World in text format.
In today's tutorial, we will have a look at How to add HTML, JavaScript, CSS or any other static file in ASP.NET Core. In our previous tutorial, we have discussed
Middleware in ASP.NET Core, so if you haven't studied that then have a look at it first, as we are gonna use some new middleware components today. So, let's get started:
How to handle Static Files in ASP.NET Core
- By default, ASP.NET Core doesn't allow us to handle / serve static pages and we can add this functionality using Static File Middleware.
- In the Solution Explorer, right click on your Project's Name and then click on Add > New Folder and rename it to wwwroot, as shown in below figure:
- All the static files ( JavaScript, CSS, HTML, Images etc. ) in ASP.NET Core has to be placed inside this wwwroot folder, which is called Content Root Folder, and this folder has to be directly inside the project's root folder i.e. Project's Name.
- Now let's create three folders inside this wwwroot folder for CSS, JavaScript & Images, as shown in below figure:
- In the above figure, you can see that I have created three folders and have also added an image in the images folder.
- You could change these folders' names but its a convention to use these names, it helps in keeping things organized.
- So, now let's access this image in the browser i.e. open this link http://localhost:51640/images/image1.jpg but still you won't get the image, instead it will still display Hello World.
- In order to access this static file i.e. image1.jpg, we have to add a new middleware in the request processing pipeline.
- So, open your Startup.cs file and in the Configure Method, add Static Files Middleware, as shown in below figure:
- You can see in above figure that I have added app.UseStaticFiles() middleware, it's a builtin middleware of ASP.NET Core, which enables the web App to use static files in wwwroot folder.
- After adding this Middleware, now when you open your image link then you will get your image in the browser, as shown in below figure:
Default Home Page in ASP.NET Core
- We can also create a default HTML Home Page in ASP.NET Core using a builtin middleware Default Page.
- This Default Page middleware search for one of the following files in wwwroot folder:
- index.htm
- index.html
- default.htm
- default.html
- If the middleware finds any of the above titled files in wwwroot folder, it will make that file default page or homepage.
- So, let's first create an index.html file in the wwwroot folder, as shown in the image on right side.
- In order to add this index.html file, right click on wwwroot folder and then Add > New Item.
- In the next window, make a search for html page and rename it to index.html.
- Here's the code for that HTML file, I have just added the required HTML along with an H1 tag.
- Now let's add the Default Page Middleware in our Configure Method in Startup.cs file.
- The Configure Method is shown in figure on right side & you can see that I have removed the End Points Middleware.
- Moreover, I have added a new Default File Middleware before Static File Middleware.
- This Default File Middleware doesn't serve the default file itself, instead it just change the request path towards default file, this file is then served by Static Files Middleware, next in the pipeline.
- So, if you place this Default Files after Static Files, then it won't work because files are served first and then default path is set. So, again emphasizing on this point: Position of Middleware matters a lot.
- So, now if you run your web Application, then you will get this index.html file as home page, shown in below figure:
- Now let's have a look at another ASP.NET Core builtin middleware named File Server Middleware.
File Server Middleware
- File Server Middleware combines the functionality of three middlewares in ASP.NET Core, which are:
- Default Files Middleware.
- Static Files Middleware.
- Directory Browser Middleware. ( it gives us information about directories i.e. file no. etc. )
- You can see in the code that I have removed Default Files & Static Files Middlewares & replaced them with File Server Middleware.
Now let's have a look at How to Customize these Middlewares:
How to Customize Middleware ???
- We have discussed it in Middleware lecture that each Middleware starts with "Use" keyword and they are all extension methods.
- Now, in order to Customize these Middleware objects, we need to use respective Options Objects.
- So, let's change the default homepage file to any other file, here's the code:
- After the Routing Middleware, I have created a new instance of File Server Options.
- You can see that, it has the Middleware Name i.e. File Server & then "Options" keyword.
- Similarly, for Default Files Middleware, we have DefaultFilesOptions object for customization.
- After creating the new instance, I have cleared the default file name first and then added a new file name "tep.html".
- You must have created this HTML file in your wwwroot folder, so that File Server Middleware could access it.
- Finally, I have provided this fileServerOptions object as a parameter to UseFileServer Middleware.
- So, that's how we can Customize our home page as well as middleware.
- So, key point to note here is: Middleware starts with "Use" keyword, while its customizing object ends with "Options" keyword.
So, that was all about How to handle Static Files in ASP.NET Core. In the next lecture, we will have a look at this Developer Exception Page Middleware, present at the start of our request processing pipeline. Till then take care & have fun !!!