I am creating a demo site using ASP.NET. Just wondering why my bootstrap css is not working in my production server. It works fine in my development pc. I have uploaded all the content folder and bootstrap.css.
Below is my bundleconfig.vb
Public Module BundleConfig
' For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkID=303951
Public Sub RegisterBundles(bundles As BundleCollection)
bundles.Add(New ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js", "~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"))
' Order is very important for these files to work, they have explicit dependencies
bundles.Add(New ScriptBundle("~/bundles/MsAjaxJs").Include(
"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"))
' Use the Development version of Modernizr to develop with and learn from. Then, when you’re
' ready for production, use the build tool at http://modernizr.com to pick only the tests you need
bundles.Add(New ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"))
ScriptManager.ScriptResourceMapping.AddDefinition("respond", New ScriptResourceDefinition() With {
.Path = "~/Scripts/respond.min.js",
.DebugPath = "~/Scripts/respond.js"})
End Sub
End Module
How do I troubleshoot further?
Regards,
Steve
In the Tools drop down menu in Visual Studio, select Nuget Package Manager --> Manage Nuget Packages for Solution. Then search for, select and install the latest (v3+) version of Bootstrap. This will automatically set it up properly in your project space.
It looks like someone installed it manually in the project, then never made the required changes to the Bundling class. In DEBUG mode, minified and bundled classes are ignored. However, in RELEASE mode, as when deploying, only the files in the Bundling class are referenced, unless you have some other specified in the head section of your pages.
Related
I'm an old COBOL programmer that has self-taught myself web development over the last decade. I've always used asp.net for developing and when I first started out I had no clue what I was doing. There are some cases I still don't :). That brings me to my question. When I first started out I didn't know what Nuget packages were so if I wanted to use something like bootstrap I would would download the files from the bootstrap website and load them into my project in a Scripts folder. To call the files I added them into the bundling function provided by asp.net. I've since discovered Nuget Manager and keep my bootstrap versions updated through it, but I've always been afraid to remove the reference to these files from the bundling package.
Today I'm trying to upgrade bootstrap from 4.6 to 5.1, but I'm getting an error. If I go into my bundling package and comment out the reference to bootstrap my error goes away. So my question is, if I'm using Nuget to manage my packages, is it safe to remove them from the bundling package? I feel like the answer is "yes it's safe" but was hoping for confirmation and maybe an explanation on how and if Nuget and bundling work together, if at all...
Well, nuget simple in "most" cases downloads some .net .dll's and assemblies, and then often sets a reference for you. (you could do this manual, but hey its a whole lot less work).
but, when you use nuget to install those packages, some might include javaScript libries and code (such as your example).
Because the bundling expects the scripts to be say in this location:
Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
bundles.Add(New ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
etc. etc. etc.c
Then of course, when you nuget a package, then the location of the scripts VERY LIKLEY is not going to be the above location.
So, you would then remove your older scripts (and above script referances), and add in the new location of such scripts.
So, you are free to remove the existing bundling references, but you not then enjoy use of the script manager and system to "merge together" the many script files.
So, you don't have to use bundeling anyway.
However, in most cases, you WANT BOTH the SomeJava.js and SomeJava.min.js files to exist. And if you modify those files, then YOU need to regenerate the .min version. Since you not (likely) to be modifying those .js files, then you can well dump the bundling of such files. But you are free also to add them to the above bundling reference.
All bundling does is "merge" the .js files together - so that you don't have 50 or 100 different separate .js files, and thus 50 or 100 difference downloads and references in a web page to use all those many .js files.
So, it not a huge deal. If you only adding say bootstrap via nuget, then I would hunt down the location of the new .js files, and add them to the bundling. But, it not all that huge of a deal if you don't. The issue then becomes how do you add the new .js and .css files to the given web page you are working on. (and toss in use of a master page, and again more complex).
So, in theory, you could remove the existing (older .js references) and then add the css. files that nuget created. I not looked, and don't know if the .js files remain in "packages" folder, or during an install that nuget copies to some folder (such as scirpts).
Just keep in mind, do keep and have the .min versions of those .js files. if you in web.config set debug=false, then the web site flips over to using the .min versions of the .js files - they have to exist, and even without bundling they have to exist, and this "flip" occurs (you now using .min versions of js files).
This is a HUGE topic, and probably oh so far beyond that of a simple post on SO.
but, suffice to say, you can well dump use of the bundling, and remove your older .js references. (but, since you having to do that, then might as well add the newer references then at that point in time, right???).
I created a asp.net core MVC web App using the default project template. It adds few bower dependencies like: jquery, bootstrap, etc. These dependency are already downloaded at wwwroot\lib.
If I now right click on bower.json and click "Restore packages", I don't expect it to download anything new. But it gets a lot of new files, about 50 or so.
Is that expected?
Screenshots of before and after restore below.
Before
After
Yes, it is totally fine for Bower, don't worry, it worked so 3-4 years ago, when I started using it. The main idea that Bower does not download just dist files for Bootstrap or jQuery, but the whole repository from GitHub.
Moreover Bower does not provide any option to download only dist files. And it is intentional, you can read this discussion.
Some time I used bower-installer to keep dist files in separate folder, but eventually I just moved to npm/yarn + webpack anyway.
in the new asp.net 5 template there's a project.json in which you can exclude certain directories.
"exclude": [
"wwwroot",
"node_modules",
"bower_components",
"dist",
".tmp"
]
As you can see, I added a few folders like 'dist' and '.tmp', but they are still included in the solution explorer. There's not much documentation about this. How to exculde files/folders from your project in vs 2015?
The "exclude" property does not hide the folder from visual studio, it will not make the folder "disappear" from the solution explorer.
The "exclude" property removes the folder from the compilation search path. It is an instruction to the compiler (Roslyn) not the IDE. As a more comprehensive answer "project.json" is intentionally IDE agnostic. That is why there is both a projecname.xspoj and a project.json which both contain project configuration information. This is necessary to allow for more robust cross IDE and cross platform development.
You can verify this behavior yourself with a simple excercise.
Add a new class file (buildfail.cs) to your existing project (or
create a new project) in the root project folder.
Ensure buildfail.cs has the same namespace as the other source files in the
project, contains compilation errors, and is in the root directory.
You should see build errors in VS. If you don't manually build.
Create a new folder (excludeme) off the project root and move
buildfail.cs to that folder. You should still have build errors.
Add excludeme to the exclude property in project.json. The build errors should be removed because builfail.cs is no longer in the build search path.
You may be wondering what is VS using to know to hide the node_packages folder from the Solution Explorer display. I am unsure and it may not be user configurable but it isn' the exclude property. Comment out node_packages in project.json and you will get build errors (package restore failure) but the folder will still be hidden from Solution Explorer. Since this is IDE specific behavior one would assume that maybe it is defined in projectname.xproj but I found no such property so at this time it would appear to be black box magic by VS.
As of Asp.Net 5 beta-8 and complementary tooling update to Visual Studio 2015, you are now able to exclude/hide folders from being displayed in solution explorer. More information about this, and other changes are outlined in the announcement post. To hide a file or folder, right-click to bring up a context menu and select Hide from solution explorer. This creates an entry in the .xproj file:
<ItemGroup>
<DnxInvisibleContent Include="myhiddenfile.txt" />
</ItemGroup>
Note also that there has been a change to where bower packages are installed by default. Previously, the Asp.Net 5 templates in Visual Studio would install bower packages to a folder called bower_components, a practice familiar to web developers who do not use Visual Studio. However, apparently due to developer confusion, this has been changed to wwwroot/lib. This can be changed by editing the bowerrc file. As such, the bower_components folder does not exist in the new beta-8 templates. Please see this post by Scott Hanselman for more information.
It may not be ideal, but I was able to hide a folder from the solution explorer in an Asp.net 5 project by marking the folder as hidden in the windows explorer properties dialog. I had the .idea folder used by WebStorm showing up so it being hidden was not too big a deal. WebStorm doesn't mind.
It seems like the folder will not be hidden if it is already in the solution explorer. Mark it and it's contents hidden and move it temporarily out of the project folder. Make sure it disappears from the solution explorer before moving it back. It should not show back up. A restart of Visual Studio may also work, I didn't test that.
Rightly or wrongly, here's what I did to get bower_components and .sass-cache out of the way. In my case, node_modules was already excluded from my project somehow, even though it's at the same level with gruntfile.js. I still don't understand why it is treated differently. Anyone know?
First, I set my location like this in the .bowerrc file:
{
"directory": "../../artifacts/bower_components"
}
Then I adjusted my paths as necessary in my gruntfile.js
Also, To get the sass-cache folder out of the way, since I was using grunt-contrib-compass, I configured my compass task with this option:
cacheDir: '../../artifacts/.sass-cache',
There are other ways to do this if you are using other sass / compass tools.
RESULT:
I can now search my entire project for text and not get hits in my libraries.
bower_components and .sass-cache are out of reach of source control.
With the latest Visual Studio you just need to right-click the folder/file and chose "Hide from Solution Explorer".
That will change the "xproj" this way:
<ItemGroup>
<DnxInvisibleFolder Include="wwwroot\" />
</ItemGroup>
Looking at the state of asp.net 5 with visual studio 2015 I can only say that they made it much more difficult and inconvenient to work with task runners like gulp or grunt. Since I'm using Web API 2 to manage my data I switched to Visual Studio Code with bower, gulp and browsersync and this has proven a to be LOT easier and faster with much less clutter.
To make a startup template: https://github.com/Swiip/generator-gulp-angular
Now you can use any editor and you get a clear separation of front end and back end development. Plus you get to know gulp and bower and the (minimal) command line stuff which VS2015 tries to do for you (and fails to do so many times).
Oh yes: you don't have to exclude folders anymore, since the template has a much more sensible folder structure
Problem:
I have been trying to integrate minification of javascript and css files in our VS2010 (.net 4.) projects. From what I hear, .net 4.5 and VS2012 will have minification build into the editor, so it will be as easy as setting a flag it will work. Unfortunately we are sill on VS2010 (.net 4.0).
Let me explain what I want to do and what I dont want to do.
I dont want to do big setups with classes/config file(s)/etc just to minify because all that stuff will have to be loaded on our build machine and even the build xml files might have to be modifies to make it work. Also, once we go to vs2012 and .net 4.5 all these configs/classes/etc will have to be discarded because vs2012 will have the build in functionality.
Here is what I think might be the best option. Since I am using the ScriptManager and it can already pull either a .debug.js (non-minified) or a .js (minified) script based on the build type, it seems all i need to do is to have some sort of (pre?) build event that will re-build a non-minified .js file into a minified one. Obviously the build event will have to call a minication module which would have to be installed on local computer (the YUI Compressor seems very nice). The module would update the minified .js file.
I have been reading about this, but I am getting a little bit lost. There are a lot of third party tools with bunch of setup and classes which I do not want to add.
Did anyone do something similar as I explained about?
If not what is the next best simple solution?
(By the way, if you are going to say move to VS2012/4.5, thats not a solution for us at this point)
Solution:
Thank you Parv Sharma for your answer.
I would just like to explain what I did so that it may help someone in the future.
I installed the Microsoft Ajax Minifier
Created a batch file to add minifer to ENVIRONMENT PATH variables: setx path /m "%PATH%;C:\Program Files\Microsoft\Microsoft Ajax Minifier"
Added the following pre-build events into my project:
ajaxmin $(ProjectDir)Script.js -out $(ProjectDir)Script.min.js -clobber
If Script.min.js does not exist, it will be created by the build event, but it will not be added to the project (not sure how to do that through the events).
When you add a new script file, mynewscript.js, just create a second blank file called mynewscript.min.js and add an pre-build event for it.
Using this approach the only thing you have to do to the build machine is run the Microsoft Ajax Minifier setup package and the batch file. Thats it everything else will be part of your pre-build events.
what you are looking for is probably this
http://ajaxmin.codeplex.com/documentation
by using this you would be able to use this third party tool as the minifier
after downloading the tool you have 2 options
1. edit the MSBUILD file to include building the js as per build event
OR 2. to attach this tool to VS and assign a key compbination to it.. this way you would be able to minify whenever you want just like we do F5 OR Cntrl-Shift-B
Attaching to VS is easy just to to external tools and in the Tools menu and add this tool with the required params
Is there a way to include a different Javascript file in an ASP.NET page depending whether it's a debug or release build?
For release builds, I want to include the minified (using yuicompressor) Javascript, but I would like to use the more readable file for debug and development.
You can do one of two things ... either rename the appropriate file to the filename referenced in the html in a postbuild step, or dynamically include the html based on the preprocessor symbol.
For development, if you're using Visual Studio 2008 SP1 you can also take advantage of the improved support for JavaScript IntelliSense. Scott Gu has a blog post here:
jQuery Intellisense in VS2008
The basic set up is:
Install Hotfix KB958502
Reference release versions of your .js files as you would normally
Ensure that you have the "development" version of the .js file sitting next to it, called *-vs-doc.js or *.debug.js
This will get you all the intellisense for the files.