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
Related
I have a Blazor WASM application that I'd like to have separate .scss files used for global styling that are not component specific CSS isolation files. Those are bundled and available at runtime, so no issue there. I'm looking for getting the transpiled .css file from it's corresponding .scss source file, and have that .css file copied to wwwroot so I can link to it in index.html.
To hedge this a bit, I understand there already exists in wwwroot an app.css file where additional global styles can be applied. The problem with this is it's a .css file and I'd like the power of SASS so this isn't the option I'd like to use. You also can't put a .scss file inside wwwroot as it's not proper because files that need transpiled need to be in the project itself; wwwroot is a target for static files to be hosted, not raw .scss source files.
I'm leveraging LibSassBuilder to transpile my .scss files to .css so that's all taken care of. In this example I have a custom.scss that's been transpiled to custom.css and ready for use, but I need it copied to wwwroot. It's been a while since I've been in VS, so I thought I could use the 'Build Action' in combination with 'Copy to Output Directory' to get this static file moved to wwwroot during the build, but it's not working. I believe that's more for the build and output but not specific to wwwroot.
I could implement some old school process with Gulp or Grunt to manually copy the .css output of these independent styling files to wwwroot but it feels verbose. There must be a more streamlined way to designate this styling file should be copied to wwwroot.
How can I get this file copied to wwwroot as a part of the build, on saving, or some other manner please?
I tried doing it with post build action without problems
<Target Name="CopyCssBundles" AfterTargets="AfterBuild">
<ItemGroup>
<MyCssBundles Include="scss\test.css" />
</ItemGroup>
<Copy SourceFiles="#(MyCssBundles)" DestinationFiles="wwwroot\css\%(Filename)%(Extension)" OverwriteReadOnlyFiles="true" />
</Target>
And Adding the copy to output to the file
But, it is copied to the project, I don't know if it what you expect
Why is this a default point for an empty asp project in the .bowerrc file?
{
"directory": "wwwroot/bower_components"
}
In most cases one would use gulp and create tasks to include only the requested files
gulp.src([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/bootstrap/dist/js/bootstrap.min.js'
])
Thereby creating a cleaner wwwroot. The project.json file even includes an exclude for "bower_components"
It looks like it initially was outside of the wwwroot folder, but developers who weren't used to this workflow (ie. using Grunt/Gulp to copy the relevant files) were getting confused. So they changed it to be inside the wwwroot folder.
Scott Hanselman has a good post about why they did this, and how to change it back to be being outside ...
http://www.hanselman.com/blog/ControlHowYourBowerPackagesAreInstalledWithAGulpfileInASPNET5.aspx
I am new to bootstrap. I downloaded a wrapbootstrap theme and is trying to include that in my website. In the downloaded theme, there are several folders under a folder called assets, like bootstrap, css, js, icons, img. Under bootstrap folder there are again subfolders called css, fonts and js. Can anyone please tell me where exactly in the project should i add these files? In case of a simple theme, I know we need to add the bootstrap css under Content folder and the bootstrap js under Scripts folder and we need to add it in BundleConfig.cs. But here, since there are different css files and js files, where can I include them?
Thanks in advance.
Where the files are located is really irrelevant so far as your application is concerned. The ~/Scripts and ~/Content folders are just a default convention that Visual Studio uses with the templates.
However, nothing is preventing you from moving them. When working with a template, you have one of two choices.
Leave the files as they are, and simply reference them, or include them into bundles in the paths they are located in.
Determine which CSS and JS files you need, and re-shuffle everything to suit your particular projects needs.
The first option makes it easier to upgrade the template in the future, while the second option makes your project files more coherent because they follow a similar structure.
At the end of the day though... it's all just a resource location for you web server to resolve. Do whatever makes sense for your project.
I have a template, one of those you could buy, with many css/js/images, very beautiful.
But I have to control these pages with Ruby on Rails, which I am still learning.
The template files have many directives for other files and folders.
I am trying to understand the Assets Pipeline and I am feeling that it looks not good.
There are dozens of css files, with the directives for many images that are placed in other folders.
I am very scared to be straightforward.
I am not the project owner, I just have these two requirements:
Use this template
Build the system in Ruby on Rails
Could someone indicate me the correct way to get along with this situation.
Thanks a lot.
There is no direct solution to this, but may be this can help: install_theme gem. I haven't used it but the link shows how to use an html/css/js theme in rails application.
Friends,
There is a solution for dummies!
I am feeling so fool.
Inside Rails folders, there is a folder called public
We just have to put our css/js/images inside this folder.
For example, in my template, the index.html was in the same folder then a folder called assets which has sub folder css, js, images
So, the files need for index.html were (relatively to it) in assets/css/... or assets/js/...
Thus, all I had to do was copy my whole folder assets to inside the public directory below Ruby on Rails files.
I found it here:
The Asset Pipeline
I am sorry for the dummy question.
Thanks a lot!
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