I am building a website with ASP.NET MVC 6 and i discover NPM, Bower & Gulp. I've understood the utility of each one.
I would like to know how to organize my "wwwroot" folder. I assuming that i need to have my final bundled and minified css & js files in the "wwwroot" folder.
But where do i put my LESS, SCSS and custom JS files ? in "wwwroot" folder too or in a folder in my solution ?
And if i want to use boostrap for example, but with LESS sources, where do i put them ?
I added same as per Cicero suggested above and formed the folders inside wwwroot as per requirement. For example- my custom files (js/css/less) files goes in separate folder under respective category. Later on, I wanted to add few files for bundling and minification, so added the reference of required files in bundleconfig.json
I'm working on a website and I use ASP.NET 5 CLR (rc1-final x64).
I want to have my wwwroot folder 'clean'. I feel everything that should exist in wwwroot should be added on build or through tasks (for example through Grunt). I'm using Grunt for this, and this works fine with JavaScript and CSS files.
Now I'm at that point of adding images to my website. Right now my .gitignore says to exclude the wwwroot. I don't know how to move images from outside the wwwroot to inside it. Is there any good way to move files to the wwwroot? I really want my wwwroot 'clean' without any libraries. I have those outside of the wwwroot, so I don't accidentally serve unwanted files.
I want to move them from:
[Application Root]/static/img to wwwroot/img.
Currently I have the following grunt tasks:
grunt-contrib-concat
grunt-contrib-cssmin
grunt-contrib-uglify
I think this may be very in-efficient because on build we need to move all the files every time.
Is there any way to do this better / more efficiently?
EDIT #1:
Yeah, so I read the documentation: http://docs.asp.net/en/latest/fundamentals/static-files.html.
I could actually just pass in a parameter to the app.UseStaticFiles() method like this:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(#"D:\Source\WebApplication1\src\WebApplication1\MyStaticFiles"),
RequestPath = new PathString("/StaticFiles")
});
Here the PhysicalFileProvider contains the absolute path. Is it possible to use a relative path here?
EDIT #2:
Actually this works:
public void Configure(IApplicationBuilder app, IHostingEnvironment environment, ILoggerFactory loggerFactory, IApplicationEnvironment appEnvironment)
{
app.UseIISPlatformHandler();
app.UseDeveloperExceptionPage();
app.UseMvcWithDefaultRoute()
.UseStaticFiles()
.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(string.Concat(appEnvironment.ApplicationBasePath,"/static/images")),
RequestPath = new PathString("/img")
});
}
Here we add the UseStaticFiles middleware twice to serve the default, which is wwwroot. We will also serve files from within the solution where the images are.
However, I don't know if there would be any performance or security problems or other problems by adding this middleware twice. You need to be careful in what you add in this folder. Directory Browsing should atleast not be enabled.
Are you sure you want to keep wwwroot "clean"?
You cannot easily reference static content outside of wwwroot so doesn't it make more sense to keep the static files below wwwroot and just segregate them into sub folders for dev vs production and then just use publishexclude in project.json to leave out the dev stuff.
Myself, I only want to run grunt tasks prior to publishing to produce the production set of files, then I want to leave the dev versions of the files out of publishing. I do not want to run grunt just to move files so I can use them during development and I don't want to run grunt every time I edit the dev/src versions of my js files.
The problem of that approach becomes more obvious if you pull in something like ckeditor which is a huge number of files that I don't want to copy or move around the file system much, at most I would move them once pre-publish to clean out any extra files as I move it to a production folder.
Back in MVC 5 there was no concept of separating the static files from the code, the web app just served files out of the same root app directory that also had server side code. At that time having static files in a /Content folder or js in other folders made sense. But trying to keep static assets outside of wwwroot in MVC6/aspnet5 seems to me to be working against the grain of the wood.
By keeping all static assets including the dev versions of them below wwwroot I have an easy workflow where I can just edit a js file and refresh the page as discussed in this question. This feels like I'm working with the framework and not against it.
I have an ASP.NET vNext project with the web start template. I've added a new html file and I wish to run it. However when I go to localhost:1111/index.html I get 404 error. Is there a special configuration in the grunt file?
The HTML file needs to be inside the root of wwwroot folder. You can move the file manually inside the folder and then edit it from inside wwwroot folder. Alternatively set up a Grunt task to copy it to the wwwroot folder using grunt-contrib-copy.
Depending on how you are hosting the project you will then have to enable static files. One way is to use the AspNet Static Files package.
In the project.json add with the beta version you are using (it is there by default in some project templates)
"Microsoft.AspNet.StaticFiles": "1.0.0-beta3",
In the Startup.cs tell the app to use static files (this is also added by default in some templates)
app.UseStaticFiles();
Then this should work...
Also the wwwroot folder is just the default in the starter template, you can change this by looking in the project.json file and changing the webroot property
"webroot": "wwwroot",
In your case you could change it to "." which would set the webroot to be the project folder but I think it is much better to have the "wwwroot" folder which makes it easier to control what can be accessed statically. If you use any languages which needs to be processed into static files, for example SASS and TypeScript, then it is a nice workflow to have the source files outside the webroot and then process them and set the destination to the webroot.
I've been working with webforms and recently started to work with mvc. With webforms, when we use to push to the qa/prod server, we alway copied over the files. leaving behind the .cs files, so just the .aspx, bin folder, along with associated js/css files would go.
with mvc, if we are copying the directory over from our pc (where we develop), what files are needed, do we need the .cshtml files for example? I just want to avoid having to push all the files if they are not needed.
They are definitely not all required. What you are going to want to do is setup a way to publish, this ranges from doing a "bin deploy" to feeding in ftp settings and using a "single click deploy" approach.
What it all boils down to though is this. You will need
A bin folder with every relevant .dll
A content folder with relevant images and css files
A script folder with relevant .js scripts
A views folder with nested folders for views with relevant .cshtml files
A .webconfig file in the views folder and also one at the very root
The packages.xml file at the very root
The global.asax file with markup pointing to the application starting in global.asax.cs
What this excludes is every single .cs file. These will all be composed into your projects .dll. So if you are developing FunWebApp, then all your c# will be rolled into FunWebApp.dll in your bin folder.
Use the Visual studio "Publish" option available on your UI Project. This will generates all the required files you neeeds includes, bin folder, Views folder(which will have the .cshtml files),Content folder,Script folder, Config file(web.config) etc.
Right click on your project and select "Publish". You will be shown a wizard where you can define what kind of publish you want. You have different options like FTP, File system etc.
You will not see the Controllers folder / Other class files because code inside that folder is compiled to your assembly which is in the Bin folder
edit I do not want to redirect pages, specific files etc. I would like to change the path where images, videos and other media are stored from the root source directory to the directory of my choosing. In this case c:/dev/prjfiles/prjname/public (c:/dev/prjfiles/prjname/ is my working directory) and i except when my html does img src="/pic.png" it will find the image in c:/dev/prjfiles/prjname/publi/pic.png. I need a working solution, i tried looking at how to set virtual directories and etc. I cant figure it out. Thus the bounty. I am generating the html, i am not writing asp:image runat="server" etc i am pulling data from a DB and outputing the html. The part that is still a WIP is the code that handles POST request. The html already exist but i cant have hundreds of files in site.com/here pollution my source directory (c:/dev/trunk/thisprj/thisprj/where my .aspx files are and i do not wish 500 .png/gif/jpg here)
I dont know how asp.net environments are usually set up. I am assuming i have a root path that is not available from the web, a bin/ where i may put my asp.net dll and a public where i stick in any files i want.
I would like to have my project files seperated from everything else. My JS, css and image files are in prjfiles/prjname/public with my sqlite db in prjfiles/prjname/ and extra binaries in prjfiles/prjname/bin.
The problem comes when i run my app and try to load an image. Such as /cssimg/error.png. My project does not find resource in my /public folder and i have no idea how to make it find them. How can i set my project up so it does?
NOTE: I set the working directory path so its at prjfiles/prjname/. In code i write ./bin/extrabin.exe and db.sqlite3 which access the files properly.
You might want to watch the getting started videos for ASP.NET
http://www.asp.net/get-started/
EDIT: More info added
As #Murph suggests, your assumptions are incorrect.
IIS takes care of blocking HTTP access to any important files and folders like your *.aspx.cs, and *.cs in the App_Code, any DLLs, anything under the App_Data directory and the web.config.
Content files, such as *.html, *.css, *.js, .gif, .jpg, .png are all served in the normal manner.
In this way, there is no need for a "public" folder.
I dont know how asp.net environments are usually set up. I am assuming i have a root path that is not available from the web, a bin/ where i may put my asp.net dll and a public where i stick in any files i want.
This is wrong assumption!
You have a root folder, which IS available in public. You set IIS or ASP.NEt Development Server to this folder.
(optional, but always needed) You have a web.config file in this root folder for configuration
You have a bin folder for your assemblies (each page or user control "include" compiles to a class)
(optional) You have App_Data as default folder for file-based DBs and/or other data files (say XML storage, ..)
(optional) You have an App_theme folder for styling and images. Read about ASP.NET themes.
(optional) You can add App_Code folder if you want to add classes to be compiled by the server.
You can create folders for scripts, etc...
Normally for complex logic, etc.. you create in a separate project outside the root and reference the result assembly in the bin folder.
Seriously, you cannot do ASP.NET work without an IDE or a manual. Visual Web Developer 2008 Express IDE is free and http://asp.net has tons of resources for getting started.
I don't know if I got the question right, but maybe you could try the <BASE> HTML tag.
HTML <base> Tag
"Specify a default URL and a default target for all links on a page"
There's a nice and simple example at W3Schools, check it out.
The negative side is that you need to put a <BASE> tag in each page you want.
It sounds like you should be able to create a virtual directory to do what you're asking -- but it's a very non-standard setup.
Keep in mind that IIS will prevent users from downloading DLLs and other project-level files, so you usually don't need to partition them off in a separate layer.
For example, just have a cssimg folder at the top level of your project, and skip the whole public folder thing.
I see where you're coming from. ASP.NET projects are set up a little differently from how you're treating them, but you can make them work like you want.
The root of an ASP.NET project IS publicly accessible. When you created your WebSite within Visual Studio, it created a default.aspx page right on the root. Are you hosting in IIS? If so, it's set up to serve up default.aspx by default. But I digress.
Here's how to make it work like you want (mostly):
Create a WebSite, then right-click the site and add a folder named "prjfiles". Right-click that folder and make another named "public". Create another subfolder of that one called "cssimg".
Now, if you want to use the image you mentioned, you'd reference it like this: "~/prjfiles/public/cssimg/error.png" (pathing starting with the root) or "./cssimg/error.png" if you're coming from a page in the public folder (relative pathing).
Really, though, you're doing too much work. Here's how to make it work with less effort:
Create your WebSite, right-click the project and add a folder called "cssimg".
Treat the root as you would the "public" folder- put your pages right there on the root or in subfolders, as needed. You can reference that same image file like this now: "./cssimg/error.png" (relative) or "~/cssimg/error.png" (start from root)
There's also another way to tell the engine where to look for resources, but it's for your css files. Inside the "head" tag, you can add a "style" element (with type="text/css") and inside that you can add something like this: #import '<%= ResolveUrl("~/prjfiles/public/cssimg/styles.css") %>';
Good luck!
If I correctly understood your problem, you're trying to find files which aren't physically stored on a filesystem folder, or stay on a different folder. You can deal with this problems by implementing a UrlRewrite mechanism.
I suggest you to read URL Rewriting in ASP.NET and, after, to take a look into this implementation: A Complete URL Rewriting Solution for ASP.NET 2.0.
If I understand all this correctly (please comment with any correction) right now all your files are together in the root directory and you use <img src="/img.png" /> and it works.
If this is the case, make another directory in the directory the images are in, say call that directory images and put the image files there. now use <img src="/images/img.png" />.
Done.