Static files in asp net core

this is part well of asp.net core tutorial in this video we'll discuss how to make an asp.net core application serves static files such as HTML images CSS and JavaScript files by default an asp.net core application will not be able to serve static files to be able to serve static files our application should meet two requirements first all the static files must be present in this w-w-w-whoa this folder is called content root folder and it must be directly inside the root project folder in our case the root project folder is employee management and a web root folder www truth is directly within that project root folder and all the static files that you want to be able to serve from this asp.net core application should be within this www fall des at the moment I have this banner image so let's copy this and paste it within our ww2 folder to be able to access this image from the browser we first specify the name of the server in our case we are running the application on our local machine so localhost colon a port number this port number may be slightly different on your machine and then a four slash and the name of the image in our case the name of the image is banner dot jpg notice we don't see the image and we still see the response that is produced by the middleware that we have registered using this run method now this is because at the moment as it stands right now the request processing pipeline that we have for our application does not have the capability to serve static files to be able to serve static files we have to register another piece of middleware and that is use static files middleware before we add that middleware to our applications request processing pipeline let's clean this a bit we don't need these two app dot use middleware so let's get rid of them and we also don't need this logging statements right here all we want the application to do is print this message helloworld and we also does not need the logger that we have injected remember two requirements to be able to serve static files first all our static files must be present in this web root folder www and the second requirement is to add use static files middleware to our applications request processing pipeline notice we still see hello world the response that is produced by the middleware that we have registered using run method but when we navigate to four slash banner dot jpg we see the image as expected instead of having all static files like images CSS and JavaScript files flat in this www.fullertonfiat.com CSS similarly all images will be in images folder and then all JavaScript files will be in J's folder now let's copy this image one dot jpg to the images folder to be able to access this image one dot jpg from the browser we have to specify the correct path in the address bar here we know all of our images are in the images folder so we have to specify the folder path and then the name of the image which is image one dot jpg there we go by default this use static files middleware will only serve static files that are present in this www trolla it's also possible to sell static files that are outside of this web root folder if you want to but discuss how to do this in our upcoming videos most web applications also have a default document and it is that default document that is displayed when we navigate to the root URL of our application for example when we navigate to localhost colon 15 410 without any other URL segments we want to serve the default document but at the moment we see the response produced by the middleware that is registered using run method first let's add a default page for our application by default the name of the default page for our application should be one of the following default dot HTM default dot HTML index dot HTM or index dot HTML let's add a page with the name default dot HTML and then within the body let's include an h1 element that displays hello from default dot HTML notice even after adding the default document when we navigate to the root URL we still see a level message and not our default document that's because to be able to serve the default document we should add another piece of middleware to our applications request processing pipeline and that is used default files notice even now when we navigate to the root URL they still do not see our default document this is because the order in which these two pieces of middleware are registered is very important use default files must be registered before use static files middleware let's change the order and see if it works as expected there we go we now see the default document the reason it didn't work before is because this used default files doesn't actually serve the default file it only changes the request path to point to the default document in our case to point to default dot HTML which will then be served by this next piece of which is static files malware like any other document if we have the order reversed then the default files middleware will change the request path but we do not have static files middleware next in the pipeline to be able to serve that default file and that's the reason we were not able to see this default document notice the browser address bar still reflects the route URL that we have requested and not the rewritten URL now what if we do not want this default dot HTML to be our default document instead we want food or HTML or more commonly we may have home dot HTML which we want to be our default document to achieve that we have to customize the behavior of this use default files middleware notice from the intelligence we can see we've got two more overloads of this method I'm going to use this overloaded version which takes default files options object as a parameter so first let's create an instance of that class and the first thing that we are going to do here is clear the default default file names by calling the clear method on default file names property and then we want to add food or HTML as our default filename for that we use the add method and then specify the name of our default document which is food or HTML finally let's pass this default files options object to use default files middleware with all these changes let's run our project there we go food or HTML is the default document for our application right now there is another piece of middleware called use file server middleware this use file server middleware combines the functionality of use default files use static files and use directory browser midwayers as the name implies directory browser malware enables directory browsing and the end-user to see the list of files and folders in a specified directory now we can replace these two mil wares with use file server middleware so let's do that notice we're back to using default dot HTML as the default document but even that file server we want to use this food or HTML as our default document for that we need to customize use file server middleware and for that we can use an overloaded version where we can pass file server options object as the parameter so instead of creating default files options object we create file server options object and specify food or HTML as our default document and pass that object as a parameter to this middleware so let's create file server options object and only files have options object we have default file options property and that has got default file names and then let's pass file server options object to use file server middleware with all these changes let's run our project one more time notice we still see the response from default dot HTML and not from Fuu dot HTML this might be because the browser may have cached the response to fix it reload the browser by clicking this button right here are using the keyboard shortcut ctrl R notice now we see the response from food order HTML now the important point to keep in mind is the pattern that we use to add and customize these middleware components in most cases we add middleware components to our applications request processing pipeline using extension method names that start with the word use for example use developer exception page use file server use static files use default files and customize these middle opponents we use the respective options objects to customize developer exception page middleware we use this object developer exception page options notice the name is the same as that of the middleware except that we have this options furred appended similarly to customize file server middleware we use file server options object similarly to customize default files mill where we use default files options object now let's quickly recap the important points that we have discussed so far in this video by default an asp.net core application will not serve static files the default directory for static files is www to serve static files use static files Mill where to serve a default file use default files middleware and the following are the default file names by default but you can change the default file by customizing the behavior of use default files middleware use default files must be registered before use static files middleware use file server middleware combines the functionality of use static files use default files and use directory browser will wear that's it in this video thank you for watching

Channel: kudvenkat

Views: 219,632

Keywords: asp.net core default files, asp.net core usedefaultfiles, asp.net core file server, asp net.core file server middleware, asp.net core customize middleware, asp.net core middleware options, asp.net core serve index.html, asp.net core serve static files, asp.net core images not displaying, asp.net core static files middleware, asp.net core static files not working, asp.net core access static files, asp.net core enable static files, asp.net core static file handler

Id: yt6bzZoovgM

Length: 12min 45sec (765 seconds)

Published: Thu Jan 31 2019