I use Visual Studio 2013 and .NET 4.5 for an MVC project.
I've learning to use AngularJS via several videos on Pluralsight and one of them walks through the process of using Grunt to clean the output directory, then use ngmin to min-safe the Javascript files.
My process is using a gruntfile.js to clean and run ngmin against the javascript files in my solution, then put them in a directory called app_built. This is executed via a batch file in the pre-build for the project and then I include it via a ScriptBundle with IncludeDirectory pointing to the app_built directory. My intent is to use the Bundling features of .NET 4.5 to do the rest of the minification and concatenation of the Javascript after all the files have been min-safed via Grunt.
I specify the path to the min-safed files with the following:
bundles.Add(new ScriptBundle("~/bundles/minSafed")
.IncludeDirectory("~/app_built/", "*.js", true));
If I run this on my local machine, it runs fine without a hitch. The Javascript is minified and bundled as I'd expect and the resulting web application runs fine as well.
If I publish the website to a remote server, I get a server error that the "Directory does not exist. Parameter name: directoryVirtualPath". I assume this error is saying that it's unable to find the directory populated with my many *.js files. I also assume this is because they weren't published since they aren't part of the solution, even though the folder they reside in is a part of the solution (it's just empty within the solution explorer in Visual Studio).
If my assumption is correct, what can I do to add these files to my solution so they'll be published with the rest of my web application with minimal effort on my end each time?
And if I'm incorrect in the assumption, what I can I do to resolve this otherwise?
Thanks!
I never did find a great way of going about this. I found information at http://sedodream.com/2010/05/01/WebDeploymentToolMSDeployBuildPackageIncludingExtraFilesOrExcludingSpecificFiles.aspx that seems related, but I was unable to make it work.
Rather, since I knew the name of the outputted file, I simply created such an empty file in my project and referenced that where I needed to. I then had the pre-build task replace the contents of that file with the externally minified version and it would be packaged with the project as necessary, so it works well enough.
Related
I'm afraid this will be a stupid question. But I don't manage it to use my JS-Package (for example jQuery), which i have installed with Visual Studio Nuget-Package-Manage in my .net 5 Blazor Server-App.
What i did:
Installing the Package. Here I installed jquery.datatable which includes jQuery itself:
Image of my Project
But now, i don't know how to include it for example in my "_Host.cshmtl"-File:
<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>
Where is my *.js-File? For example: query.dataTables.js ??
I found it on "C:\Users\xxxxx.nuget\packages\jquery.datatables\1.10.15" and
"C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"
Do i realy have to copy it to my wwwroot-Folder manualy?
If so, why i should use the package-manager?
Thanks for your help!!
Traditional web applications using JavaScript normally load the file from a local folder or from a web CDN (e.g. CDNJS.com etc). This is then loaded from the page (often referenced from a layout file).
Early on it used to be the case that JS libraries could be loaded via NUGET packages but this approach is now discouraged. It had to fix the creation of the script in a set location, e.g. /Scripts and there was no flexibility. Almost all client-side libraries are now in NPM as packages or on CDNs like cdnjs.com.
The current approach for .NET web apps to load client-side assets is either use LibMan or NPM and have some sort of webpack arrangement to compile/pack/copy. You would never load the JS from a /packages folder in the way you suggested.
Blazor Approach
Blazor (since .NET 5.0) can load either embedded JS modules (from your code), or from a URL directly.
If you want to package some JS with your application you should look at Razor Component libraries. This allows static assets such as JS files to be embedded in the code, which Blazor makes available via the _content route, e.g.
_content/LibraryName/myfile.js.
Because Blazor is a SPA you don't include JavaScript using a <script> tag in your HTML, you should load it as a module and reference it there.
This documentation explains it:
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references
DataTables, JQuery
So should you include jquery.min.js and jquery.datatables.min.js in your library? I'd suggest a better approach is to load from a CDN - your package is smaller and there is a chance the URL is already cached and loaded, e.g.
var module = await js.InvokeAsync<IJSObjectReference>(
"import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");
This loads the module on-demand from the URL directly. You'd also need to load jquery before this.
Finally I'd make this observation: are you sure you want to go down this route?
There are several native Blazor libraries on NUGET for rendering and handling tables. You'll find it much easier to go this way rather than try to patch jquery-based libraries into a Blazor app.
I had a similar issue. Not with the same libraries, but I was wanting to do something that wasn't available in a Blazor library yet. I needed a video player that could handle a certain format that the default HTML 5 video element can't handle. There is an open source player, videoJS , that did the job, but it's a javascript library. It's available on npm and there are cdn's - however the plugins (as far as I could tell) weren't on CDN - so I had to go down the npm route.
When you install an npm package it puts it into a hidden node_modules folder. Unfortunately even if you point to that path or even copy the file in with your other js files it won't work. Npm packages are designed to be run by nodejs, rather than directly in the browser. In order for them to run in a Blazor app (in the browser) you have to do an intermediary step of transpiling it into a browser friendly format.
What I really wanted was a re-usable component, that wrapped the javascript.
It took me a while to get there but I finally figured it out. I've written a series of articles on my blog detailing it. The final one ports everything into a Razor Class library that can be consumed with no knowledge of the underlying js. The fourth article deals with importing npm libraries and using them within a web assembly app. I'll put the link below but essentially the process is:
Create a folder eg JS and initialise it for npm (npm init -y)
Install the required npm packages (npm install --save)
Create a src folder within the JS folder that that you will put your own js files in
Create an index.js file in src that imports the required javascript modules and exports what you want to consume
Install snowpack (npm install snowpack --save-dev) (or webpack but I found snowpack seems to work better)
Configure snowpack to process the contents of the src folder into wwwroot/js (without snowpack or similar the files in the npm package won't be in a browser or blazor useable format)
use javascript isolation to pick up your index.js file from wwwroot/js
See blog post here for full details (It's part 4 of a 5 part series - part five puts it all in a razor class library so you can add it to a project without ever seeing the javascript)
I know this is late but this SO question was one I kept coming across when searching on how to do what I wanted, so thought I'd put my solution here in case it helps anyone else searching for what I did.
Having some problems here with a web application that was checked into a code repository.
Basically, this application in particular will not display any images, .js, or .css which are all located in the Content & Script folders. Only the raw HTML shows while running. This occurs specifically after doing a fresh pull from our code repository and running locally through Visual Studio. When you inspect the files in the console when its running, all the files are completely empty. The console is also giving a ERROR 500 error file not found (IIRC) The files are definitely in the project locally and they are showing in the Solution Explorer.
I am the only one who actively works on development for this application and I don't run into these problems with my machine. When you pull from the code repository on another computer, the problems start. However, no other applications with an extremely similar architecture have this problem after pulling fresh for the repository. I tried creating brand new web applications with exact same settings and files on the computers affected and they loaded perfectly.
The link to the file looks normal too, it matches with the production server which works.
The application is using bundles and most of the bundles look like this:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/bootstrap-datepicker.min.js",
"~/Scripts/bootstrap-timepicker.js",
"~/Scripts/bootstrap-confirmation.js",
"~/Scripts/respond.js",
"~/Scripts/bootstrap-select.min.js"));`
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/bootstrap-datepicker.min.css",
"~/Content/bootstrap-timepicker.css",
"~/Content/bootstrap-sortable.css",
"~/Content/site.css",
"~/Content/bootstrap-select.min.css"));
Things I have tried:
Adding the .js and .css files in _Layout.cshtml page manually instead
of with bundle.
Replacing all the normal files with .min.js or .min.css and vice
versa
Changing authentication methods for access
Changing permissions on Content Folder
Recreating virtual directory
Using Visual Studio 2017 and 2019
I am stumped, anyone have any suggestions or recommendations? I can answer any questions that arise.
You'll need to commit/push .csproj file as well, this file has link to all your files in the project.
I have a bunch of Javascript files in a centralized project in my solution that I would like to share amongst other projects. However, when building and testing a project with such a linked file, it is 404 when I try to access it in testing my solution.
The script is linked to from the standard Scripts directory in my project - nothing unusual in it's placement. It doesn't get loaded in my view (#Scripts.Render("~/Scripts/Models/InteractionDetails.js")), though the script tag for it does appear in the source and all the other JS files get loaded including a test non-linked js file in the same subdirectory.
How might I get the dratted thing to be properly deployed to the server on build?
This is not a duplicate, as I am using the method outlined to include the files in my project from another project. The issue is that they are not being used when I build the project (eg, I cannot path to the JS files directly on the server, and they are not included in pages referencing them).
I am trying to use the bundles feature in ASP.NET MVC in my project, everything works great in my local, if I switch the compilation debug property to false I can see that the bundle is being generating with a version (v=XXXXXXX) and my application keeps working.
When I deploy the application to a server and request the page, the bundle is there but the v= value is empty. Is there anything I am missing?
<script src="/bundles/bundlename?v="></script>
One of the possible cases you have is with optimization side of bundles. I had the same issue with my scripts and styles when I started to use minified versions. For example, if I specified in bundle configuration with .min.js file then you can fall into problem when optimization framework minifies already minified script(s). And it also occurs only in release mode. I solved it with BundleTable.EnableOptimizations = false; in BundleConfig.cs file after all bundles' configs
I think you miss specific root path since locally its not the same vs server side.
Why don't you use the script helper from the framework:
#Scripts.Render("~/bundles/bundlename")
I found the issue, after trying everything I went back an check the build scripts on the TFS server, we have continuous integration configured, turns out the build server was removing the .js and only letting the .min.js files on the final build. I removed that instruction and it started working.
Basically the .js did not exist on the server so there was nothing to bundle.
Thank you guys for your help!
I'd like to start bundling our javascript files. I've found that it's really easy locally using the web essentials plugin, however I need to set up the build server to generate the bundled .js file.
I'd rather not check this generated file into TFS as it will cause conflicts for our developers, and also since it's generated from the source I feel that the server build should generate it.
Is there a command line utility for doing the script bundling outside of visual studio that could be used as part of a build script? My google-fu is failing to find one.
Many thanks,
As long as you wrote it as proper AMD modules, require.js comes with a tool to turn all your files into an optimized bundle.