{"id":1756,"date":"2023-06-14T09:02:57","date_gmt":"2023-06-14T09:02:57","guid":{"rendered":"http:\/\/waqar-arshad.com\/?p=1756"},"modified":"2023-06-14T09:02:57","modified_gmt":"2023-06-14T09:02:57","slug":"asp-net-core-serving-static-files","status":"publish","type":"post","link":"http:\/\/waqar-arshad.com\/index.php\/2023\/06\/14\/asp-net-core-serving-static-files\/","title":{"rendered":"Asp.Net Core Serving Static Files"},"content":{"rendered":"
\r\n
\r\n \r\n <\/i>\r\n <\/a>\r\n <\/span>\r\n<\/div>
\r\n \r\n <\/i>\r\n <\/a>\r\n <\/span>\r\n<\/div><\/div>\n

ASP.NET Core – Serving Static Files<\/h1>\n\n\n\n

Here, we will learn how to serve static files such as html, JavaScript, CSS, or image files on HTTP request without any server-side processing.<\/p>\n\n\n\n

ASP.NET Core application cannot serve static files by default. We must include Microsoft.AspNetCore.StaticFiles<\/code> middleware in the request pipeline.<\/p>\n\n\n\n

Install StaticFiles Middleware<\/h2>\n\n\n\n

The Microsoft.AspNetCore.StaticFiles<\/strong> middleware package is already included in the meta package Microsoft.AspNetCore.All<\/code>, so we don’t need to install it separately in ASP.NET Core 2.x application.<\/p>\n\n\n\n

To install StaticFiles middleware in ASP.NET Core 1.x application, open NuGet package manager by right clicking on project in the solution explorer and select Manage NuGet Packages..<\/strong>. Search for staticfiles in the search box in the browse tab. This will display Microsoft.AspNetCore.StaticFiles<\/strong> middleware as shown below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/a>Install StaticFiles Middleware<\/p>\n\n\n\n

Click on the Install<\/strong> button on the right pane to install it. Once installed, the Microsoft.AspNetCore.StaticFiles<\/code> is automatically included in the dependencies section of the project.json.<\/p>\n\n\n\n

<\/a>StaticFiles Dependency in project.json<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Using StaticFiles Middleware<\/h2>\n\n\n\n

By default, all the static files of a web application should be located in the web root folder wwwroot<\/strong>. To understand this, let’s create a simple default.html in the wwwroot folder with the following content.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/a>Default.html<\/p>\n\n\n\n

Now, to serve the above Default.html static file, we must add StaticFiles middleware in the Configure()<\/code> method of Startup file as shown below.<\/p>\n\n\n\n

public <\/code>class <\/code>Startup<\/code><\/pre>\n\n\n\n
{<\/code><\/pre>\n\n\n\n
    <\/code>public Startup()<\/code><\/pre>\n\n\n\n
    {<\/code><\/pre>\n\n\n\n
    } <\/code><\/pre>\n\n\n\n
 <\/code><\/pre>\n\n\n\n
    <\/code>public <\/code>void Configure(<\/code>IApplicationBuilder app, <\/code>IHostingEnvironment env)<\/code><\/pre>\n\n\n\n
    {<\/code><\/pre>\n\n\n\n
        app.UseStaticFiles();<\/code><\/pre>\n\n\n\n
 <\/code><\/pre>\n\n\n\n
        app.Run(<\/code>async (context) =><\/code><\/pre>\n\n\n\n
        {<\/code><\/pre>\n\n\n\n
            <\/code>await context.Response.WriteAsync(<\/code>\"Hello World\");<\/code><\/pre>\n\n\n\n
        });<\/code><\/pre>\n\n\n\n
    }<\/code><\/pre>\n\n\n\n
}<\/code><\/pre>\n\n\n\n
As you can see above, the app.UseStaticFiles()<\/code> method adds StaticFiles middleware into the request pipeline. The UseStaticFiles<\/code> is an extension method included in the StaticFiles middleware so that we can easily configure it.<\/p>\n\n\n\n
Now, open the browser and send http request http:\/\/localhost:<port>\/default.html<\/em> which will display default.html as a response as shown below.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/a>Serving HTML File<\/p>\n\n\n\n
This way we can serve any other file stored in wwwroot folder or sub-folder. For example, consider the following test.js file in the wwwroot folder.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/a>test.js<\/p>\n\n\n\n
Now, we can access this file by sending http:\/\/localhost:<port>\/test.js request.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/a>Serving JS File<\/p>\n\n\n\n
Suppose, you want to serve files from the outside of web root folder (wwwroot). For example, you include images in the following Images folder as shown below.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/a>Serving Static Files<\/p>\n\n\n\n
Now, specify StaticFileOptions<\/code> parameter in the UseStaticFiles<\/code> method to serve images from the Images folder as shown below.<\/p>\n\n\n\n
public <\/code>void Configure(<\/code>IApplicationBuilder app, <\/code>IHostingEnvironment env)<\/code><\/pre>\n\n\n\n
{<\/code><\/pre>\n\n\n\n
    app.UseStaticFiles(); <\/code>\/\/ For the wwwroot folder<\/code><\/pre>\n\n\n\n
 <\/code><\/pre>\n\n\n\n
    app.UseStaticFiles(<\/code>new <\/code>StaticFileOptions()<\/code><\/pre>\n\n\n\n
    {<\/code><\/pre>\n\n\n\n
        <\/code>FileProvider = <\/code>new <\/code>PhysicalFileProvider(<\/code><\/pre>\n\n\n\n
                            Path.Combine(<\/code>Directory.GetCurrentDirectory(), <\/code>@\"Images\")),<\/code><\/pre>\n\n\n\n
                            RequestPath = <\/code>new <\/code>PathString(<\/code>\"\/app-images\")<\/code><\/pre>\n\n\n\n
    });<\/code><\/pre>\n\n\n\n
}<\/code><\/pre>\n\n\n\n
As you can see, we used FileProvider<\/code> option to specify Images folder from which static files will be served. The RequestPath option specifies the relative path in the URL which maps to the static folder.<\/p>\n\n\n\n
Now, a request to http:\/\/localhost\/app-images\/MyImage.png<\/em> will serve the MyImage.png file.<\/p>\n\n\n\n
Set Default File<\/h2>\n\n\n\n
As we have seen above, default.html or test.js was served on the specific request for it. However, what if we want to serve default html file on the root request?<\/p>\n\n\n\n
Currently, when you send http:\/\/localhost:<port><\/em> request, it will be handled by run method and display the following result.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/a><\/p>\n\n\n\n
To serve default.html on the root request http:\/\/localhost:<port><\/em>, call UseDefaultFiles()<\/code> method before UseStaticFiles()<\/code> in the Configure<\/code> method as shown below.<\/p>\n\n\n\n
public <\/code>void Configure(<\/code>IApplicationBuilder app, <\/code>IHostingEnvironment env)<\/code><\/pre>\n\n\n\n
{<\/code><\/pre>\n\n\n\n
    app.UseDefaultFiles();<\/code><\/pre>\n\n\n\n
    app.UseStaticFiles();<\/code><\/pre>\n\n\n\n
 <\/code><\/pre>\n\n\n\n
    app.Run(<\/code>async (context) =><\/code><\/pre>\n\n\n\n
    {<\/code><\/pre>\n\n\n\n
            <\/code>await context.Response.WriteAsync(<\/code>\"Hello World\");<\/code><\/pre>\n\n\n\n
    });<\/code><\/pre>\n\n\n\n
}<\/code><\/pre>\n\n\n\n
The UseDefaultFiles<\/code> configures the DefaultFiles middleware which is a part of StaticFiles middleware. This will automatically serve html file named default.html, default.htm, index.html or index.htm on the http request http:\/\/localhost:<port><\/em>. The above example will display default.html file on http:\/\/localhost:<port><\/em> as shown below.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/a>Serving Static Files<\/p>\n\n\n\n
 Note:<\/p>\n\n\n\n
Order of middleware is very important. app.UseDefaultFiles()<\/code> should be added before app.UseStaticFiles()<\/code> in the request pipeline.<\/p>\n\n\n\n
FileServer<\/h2>\n\n\n\n
The FileServer middleware combines the functionalities of UseDefaultFiles and UseStaticFiles middlware. So, instead of using both the middlware, just use UseFileServer in the Configure method.<\/p>\n\n\n\n
UseFileServer = UseDefaultFiles + UseStaticFiles<\/p>\n\n\n\n
Example: UseFileServer<\/p>\n\n\n\n
 Copy<\/p>\n\n\n\n
public <\/code>void Configure(<\/code>IApplicationBuilder app, <\/code>IHostingEnvironment env)<\/code><\/pre>\n\n\n\n
{<\/code><\/pre>\n\n\n\n
    app.UseFileServer();<\/code><\/pre>\n\n\n\n
 <\/code><\/pre>\n\n\n\n
    app.Run(<\/code>async (context) =><\/code><\/pre>\n\n\n\n
    {<\/code><\/pre>\n\n\n\n
        <\/code>await context.Response.WriteAsync(<\/code>\"Hello World\");<\/code><\/pre>\n\n\n\n
    });<\/code><\/pre>\n\n\n\n
}<\/code><\/pre>\n\n\n\n
Serve static files from different folder than wwwroot folder in ASP.NET Core<\/h1>\n\n\n\n
You can configure middleware to serve static files from other folders along with default web root folder wwwroot.<\/p>\n\n\n\n
For example, we will server admin.html from the following admin folder and also test.html from wwwroot folder.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/a><\/p>\n\n\n\n
Now, configure the StaticFiles middleware in the Configure() method of Startup class as shown below.<\/p>\n\n\n\n
Example: Configure StaticFiles Middleware<\/p>\n\n\n\n
 Copy<\/p>\n\n\n\n
public <\/code>class Startup<\/code><\/pre>\n\n\n\n
{<\/code><\/pre>\n\n\n\n
    <\/code>\/\/ This method gets called by the runtime. Use this method to configure the HTTP request pipeline.<\/code><\/pre>\n\n\n\n
    <\/code>public <\/code>void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)<\/code><\/pre>\n\n\n\n
    {<\/code><\/pre>\n\n\n\n
        app.UseStaticFiles();<\/code><\/pre>\n\n\n\n
 <\/code><\/pre>\n\n\n\n
        app.UseStaticFiles(<\/code>new StaticFileOptions() {<\/code><\/pre>\n\n\n\n
                FileProvider =  <\/code>new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), <\/code>\"Content\")),<\/code><\/pre>\n\n\n\n
                RequestPath = <\/code>new PathString(<\/code>\"\/Admin\")<\/code><\/pre>\n\n\n\n
        });<\/code><\/pre>\n\n\n\n
 <\/code><\/pre>\n\n\n\n
        app.Run(async (context) =><\/code><\/pre>\n\n\n\n
        {<\/code><\/pre>\n\n\n\n
            await context.Response.WriteAsync(<\/code>\"Hello World!\");<\/code><\/pre>\n\n\n\n
        });<\/code><\/pre>\n\n\n\n
    }<\/code><\/pre>\n\n\n\n
}<\/code><\/pre>\n\n\n\n
As you can see, app.UseStaticFiles()<\/code> enables default web root folder wwwroot to serve the static files.<\/p>\n\n\n\n
app.UseStaticFiles(<\/code>new StaticFileOptions() {<\/code><\/pre>\n\n\n\n
    FileProvider =  <\/code>new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), <\/code>\"admin\")),<\/code><\/pre>\n\n\n\n
    RequestPath = <\/code>new PathString(<\/code>\"\/admin\")<\/code><\/pre>\n\n\n\n
});<\/code><\/pre>\n\n\n\n
The above code configures Content admin folder to serve static files on the request path \/admin. So now, we will be able to execute HTTP request http:\/\/localhost:1234\/admin\/admin.html to display static admin.html page.<\/p>\n","protected":false},"excerpt":{"rendered":"
ASP.NET Core – Serving Static Files Here, we will learn how to serve static files such as html, JavaScript, CSS, or image files on HTTP request without any server-side processing. ASP.NET Core application cannot serve static files by default. We must include Microsoft.AspNetCore.StaticFiles middleware in the request pipeline. Install StaticFiles Middleware The Microsoft.AspNetCore.StaticFiles middleware package is already included in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[13],"tags":[33,36],"class_list":["post-1756","post","type-post","status-publish","format-standard","hentry","category-asp-net-core","tag-net","tag-asp-net"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"http:\/\/waqar-arshad.com\/index.php\/author\/waqar_29_1\/"},"uagb_comment_info":24,"uagb_excerpt":"ASP.NET Core – Serving Static Files Here, we will learn how to serve static files such as html, JavaScript, CSS, or image files on HTTP request without any server-side processing. ASP.NET Core application cannot serve static files by default. We must include Microsoft.AspNetCore.StaticFiles middleware in the request pipeline. Install StaticFiles Middleware The Microsoft.AspNetCore.StaticFiles middleware package is already included in…","_links":{"self":[{"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/posts\/1756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/comments?post=1756"}],"version-history":[{"count":1,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/posts\/1756\/revisions"}],"predecessor-version":[{"id":1767,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/posts\/1756\/revisions\/1767"}],"wp:attachment":[{"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/media?parent=1756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/categories?post=1756"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/tags?post=1756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}