#34 Serving Static Files | Understanding Routing | ASP.NET Core MVC Course

and asp.net core application may also contain static files like images text files CSS files JavaScript files Etc generally these static files are required when we are working with views in order to design the UI Now by default asp.net core application does not serve these static files but we can enable serving static files by asp.net by using use static file middleware this middleware enables serving static files if the URL contains the file path let's understand this with an example first of all the static files which we want to serve we need to keep it in Webroot folder and in asp.net core the Webroot folder is www.root so here inside this project let's go ahead and let's create a new folder and let's call it www root so you see for this www root folder we have this icon but keep in mind that this is a folder and inside this folder we can keep all our static files which we want to serve So currently I've created these two sample files I am going to copy it from here and I will paste it inside this www root folder okay so these are the two files which we want to serve but currently if I try to access these files from the browser for that let me go ahead and let me run this application so here if I try to access Planet dot jpg you see it says page cannot be found in the same way if I try to access sample.txt there also we are getting the same message the page cannot be found but we know that these two files are present inside this Webroot folder but as I mentioned earlier by default the asp.net Co application is not going to serve the static files in order to make the asp.net core application serve static files we need to use a middleware called use static files so here let's go ahead and let's use that middleware and it is use static files okay with this if we run this application again and now if we try to access planet.jpg you see now that image has been rendered here in the browser in the same way if I try to access sample.txt you see the content of sample.txt has been rendered here so keep in mind that from your asp.net core application if you want to serve static files then first of all your static file should be inside this www root folder okay inside this www root folder you can also create subdirectories subfolders and inside that also you can put these static files because inside this folder the subdirectories will also be accessible and then you need to use this use static file middleware now in earlier versions of asp.net by default all the files of asp.net project was accessible through the browser you just had to provide the right file path and because of this the application was less secure because malicious sites can access the application code files which in turn can also contain sensitive information right and to avoid that only asp.net code does not allow serving static files by default if any file needs to be served it should be present in the Webroot directory in this example the web root directory is www root folder and in this way asp.netco application provides more security because only the files present in this Webroot directory inside this www root folder only those files can be served and not the entire project file okay now what if I want to have a folder called maybe static files and in that static files folder I want to keep all my static files and then I want to serve it so for example let me go ahead and let me create a new folder here and I will simply call it static files and I will move these two files this planet.jpg and sample.txt inside this static files okay so now the static files contains this planet.jpg and sample.txt and now I want to use the static files folder as the web root directory instead of using this www root folder I want to use this static files folder as the root directory is it possible yes it is possible let's see how we can do that so in the program files when we are calling this create Builder on this web application there we can pass some web application options so here let's go ahead and let's pass a new instance of web application options and here let's set some options so here we basically want to set Webroot path okay now what do we want to set it to we want to set it to this folder name which is static files so here let's specify that folder name and that's it let's go ahead and let's run this application and let's see if we are able to access our static files so let me go ahead and let me specify the file path for planet.jpg if I press enter you see I'm able to render this planet.jpg and if I specify sample.txt in that case we are also able to render the content of sample.txt and you might have a doubt like why we are not specifying the folder name in the URL well you don't need to specify the folder name in the URL because this static files folder it is the web root folder that's why we are calling it Webroot folder so it is acting like a root folder and for the root folder we don't need to specify the name in the URL same was the case in case of www root folder there also we did not specify this www root in the URL right because at that time this www root was acting like the web root folder all right so now this static files folder is our web root folder now what if I want to have multiple web root folders in my application how can I do that is it possible to have two Webroot folders in the same project yes it is possible but keep in mind that even if you create multiple Webroot folders in your project one of them will act as a default web root folder in our example this static files folder it is going to act as a default web root folder now we can also go ahead and we can add multiple root folders so let's go ahead and let's add a new folder let's call it maybe my web root okay and I also want to use this my web root as a web root folder to do that we need to use a different approach so what we need to do is again we need to use app.use static files but there to this use static files we need to file some new static files option okay and here we can set some options so here we need to specify basically the file provider and to specify the file provider we are going to use this physical file provider class so here we have this physical file provider class and to this physical file provider class we need to pass the path of the folder which we want to create as a Webroot directory so for that on this Builder we have environment and from the environment we can get the content root path okay so content root path is basically your project folder so for example if I right click here and if I open this project in the file explorer so basically this path here it is the content root path okay this project folder is the content root path in this case so let me give a comment okay so here we have access to the content root path and in there we have this my web root folder so let's append that here so for that we can say plus and then the name of the folder so it is my web root or better what we can do is we can use path dot combine okay and we're going to combine the content root path with this folder name my web root so we want to make this folder this my web root folder for that we are specifying the complete path of that folder to this physical file provider Constructor and we are assigning it to this file provider and this line of code here it will make this my Webroot as a Webroot directory okay here we don't need this semicolon let's close this parenthesis all right with this now what we will do is we will move one of the files let's say maybe sample.txt file inside this my web root folder all right let's go ahead and let's run this application so when we are going to search for a static file for example let's say planet.jpg in that case first it is going to search for the static file in the default Webroot folder another example the default web root folder is this static files folder because here if you see here we are creating the static files as the default web root folder if the static file is not found in the default Webroot folder then only it will look for the next Webroot folder so that means in our case then only it will look for that file inside this my web boot folder okay so let's go back to the browser and let's try to access this planet.jpg and as you can see we are able to access it now let's try to access sample.txt so the sample.txt is now present in my web root folder so if I press enter you can see the content of sample.txt is also rendered here okay so keep in mind that when serving a static file asp.net core application will first look for it into the default web root folder in our example the default web root folder is the static files folder if the file is not found there then only it will look in the second Webroot folder that means in our example it will look for it in my web root folder also if a file exists in both the folders file from the first folder will be served that means file from the default Webroot folder will be served all right so this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 1,011

Keywords: static files, UseStaticFiles, asp.net core, mvc, asp.net core tutorial, complete asp.net core mvc course

Id: uvBVzNKr1Mc

Length: 11min 27sec (687 seconds)

Published: Fri Mar 31 2023