To serve static files from an ASP.NET Core app, you must configure static files middleware. With static files middleware configured, an ASP.NET Core app will serve all files located in a certain folder (typically /wwwroot)
How do I serve a static file in NET Core?. The Complete ASP.NET Core Developer Course 2023 [Videos].
Static Files Middleware in ASP.NET Core Application
In this Video, I am going to discuss how to serve static files using Static Files Middleware in ASP.NET Core Application. Please read our previous Video before proceeding to this Video where we discussed the wwwroot folder in ASP.NET Core Application. As part of this Video, we are going to discuss the following pointers in details.
- Where do we need to store the static files in ASP.NET Core?
- What is wwwroot folder in ASP.NET Core?
- How to Configure Static Files Middleware in ASP.NET Core Web Application?
- How to use your own Webroot folder?
Where do we need to store the static files in ASP.NET Core?
In ASP.NET Core Application, the default directory or location for the static files is wwwroot (webroot) folder and moreover, this folder or directory should be present in the project root folder. By default, this is the only place where the ASP.NET Core application can serve the static files directly. But we can change this default behavior by using the UseWebRoot method.
Let us understand everything steps by step:
First, create a new ASP.NET Core web application with the Empty template. With the Empty project template by default, you will not found the wwwroot folder. The project structure of ASP.NET Core Web Application with the Empty Project template is shown below.
Note: If you create the project using a Web or MVC template then by default the wwwroot folder will be created by visual studio.
Adding the wwwroot (webroot) folder:
Let us first create the wwwroot project folder. To do so, right-click on the project and then select add => new folder option from the context menu and then provide the folder name as wwwroot. Once you created the wwwroot folder, your project structure should be as shown below.
Once you created the wwwroot folder, lets add an Image file within that folder. Please download and paste the following image into the wwwroot folder and modify the image name as MyImage.png.
Once you the above image, your wwwroot directory looks as shown below.
Now run the application and navigate to the following URL. The point that you need to remember is you need to replace the port number on which your application is running.
When you navigate to the above URL, you will not get the output as expected, rather than you will get the following output.
The reason why we are not getting the output as expected because we dont have any middleware which can serve the static files in the request processing pipeline.
How to Configuring the Static Files Middleware in ASP.NET Core Application?
In order to handle the static resources, we need to configure a middleware called UseStaticFiles() into the application request processing pipeline of an ASP.NET Core Application. The UseStaticFiles() middleware is an inbuilt middleware provided by ASP.NET Core Framework to handle the static files in an ASP.NET Core Application.
Let us Modify the Configure() method of the Startup class as shown below in order to add the UseStaticFiles() middleware to the request processing pipeline of the application.
With the above changes in place, now run the application and navigate to the URL: http://localhost:<portnumber>/MyImage.png and you will see the output as expected as shown in the below image.
How to Create your own Webroot folder in ASP.NET Core?
Let say we dont want wwwroot as our webroot folder instead we want MyRoot as the webroot folder for our application. First. Modify the wwwroot folder as MyRoot and once you modify your project structure should be as shown below.
At this point, if you run the application and if you navigate to the below URL, then you will not get the output.
This is because by default the static files middleware will look for a folder with the name wwwroot and that is not present in our application at the moment. But we dont want wwwroot, we want the Static files middleware to look MyRoot folder to the server the static files such as CSS, Images, JS, etc. To do so, we need to call the UseWebRoot method by passing MyRoot as a parameter in the CreateHostBuilder method which available in the Program class as shown below.
With the above changes in place, now run the application and you should get the output as expected.