Package manager that moves downloaded file to a specific location - javascript

I'm looking for a package manager that can be added as a task in grunt that will download the latest version (maybe even a specific version ie: jquery v1.10 vs v2) of a library or js or css file and place it in a specific folder. Here is what I'm looking for:
Run grunt task that will download the latest version of jQuery UI (js and css).
Move the latest JS version of jQuery UI into assets/js and name the file jquery-ui.js
Move the latest CSS version of jQuery UI of no-theme into assets/css and name the file jquery-ui.css
Another example would be:
Run grunt task that will download the file at http://domain.com/css/grid.css.
Move that file to assets/css and name the file grid.css.
Lastly, I'd like a way to do an update that will allow me to update all scripts or css files that I specify, so it knows which files to try to update. Also, I'd prefer if the package manager didn't clutter the repo with many additional files.
Does something like this exist? I've looked into Bower and Jam, but I'm not seeing this ability.

Bower does indeed let you specify download url's for your packages.
From the bower.io site:
# Using a local or remote package
bower install <package>
Where <package> can be any one of the following:
....
A URL to a file, including zip and tar.gz files. It's contents will be extracted.
Then you should just run bower update whenever you need to update things. Obviously you should use a CDN of sorts to automagically get links to the latest versions of the files you need.
Bower's .bowerrc file should let you specify the installation directory for your components. Keep in mind that this will have to be project specific.
It does create and rename files it manages on its own way, but that's a good thing. Specially because it exposes a very nice API for you to use.

Solved this by using grunt-curl.
https://github.com/twolfson/grunt-curl

Related

Blazor: how to include javascript-package, which is installed with Nuget-Package-Manager?

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.

How to use JavaScript NuGet libraries in ASP.Net Core project correctly on the example MathJax?

I installed MathJax library for my site on ASP.Net Core from Package Manager.
I have seen 'MathJax (2.7.0)' in NuGet Dependencies:
Image of My Dependencies
But is it all. When I see wwwroot\lib directory in my project I don't see 'MathJax' folder or something similar in it:
Image of My fron-end lib
But when I need use MathJax I need write something similar in my html-page:
<script type="text/javascript" async src="~lib/MathJax/MathJax.js?config=TeX-AMS_HTML-full"></script>
I can't copy NuGet library directly in wwwroot\lib, because I don't want to add my git repository a lot of files external project (> 36 Mb, > 1500 files). Besides, why use NuGet then?
Also, I can't add existing items of MathJax NuGet library manually (menu Add -> Existing Item...), because they are a lot and the absolute path will not correctly on another PC.
How I can get correctly link on MathJax library in NuGet package?
The JavaScript/CSS library NuGet packages are not for Core. They're for MVC. ASP.NET Core has a completely different approach to static files and client-side libraries than ASP.NET MVC did.
For an ASP.NET Core site, you need to use either LibMan or npm to get your client-side libraries. LibMan is easier, but also very naive and limited. In particular, it only supports libraries that are on cdnjs. While there's a lot of coverage there, it's not comprehensive, and there's some libraries that just are available. I'm not sure whether your particular library is or not.
However, given that you'll almost inevitably end up needing something you can't get through LibMan, and and then you'll be forced to use npm anyways, you might as well just use npm and get used to it. There's more of a learning curve because you also need to create build tasks with something like Webpack, Gulp, Grunt, etc. The npm packages go into a node_modules folder, which should not be served directly. At the very least, you'll need to use Webpack, Gulp, etc. to copy the dist/build of the npm package (i.e. the actual JS/CSS files that you'll be referencing) into your wwwroot/lib directory. There's lots of guides online for how to set this up. Just do some research.
In the VS2019, go to the wwwroot/lib directory, right click and select Add -> Client-Side Library. then include your file.
Go to the web project, right click and go the manage client scripts, then search your library and instal.

Including JS plugin files directly in Github repository?

I am relatively new to using git and GitHub, and I am working on my personal website. I am using the JS plugin Slick, a responsive carousel feature. I downloaded all of the necessary files and stored them within my local repo. The size and content of the Slick zip folder is much larger than the files for my site at the moment, so when syncing with GitHub this makes my project appear as 75% Javascript, whereas the actual website is not.
Am I doing this correctly, storing the files for my JS plugin directly within my repository folder? Or should I be using some other method to implement Slick on my site? Or is this just something I should not be worried about? Thanks
If you're just using one library, manually storing it in your Git repo is fine. You'd have to manually update the files if a new version is released, but that's not a big deal for one library. (And you might not even care about updates to this library).
However if you're using more than one library, I'd highly recommend using Node Package Manager (NPM) and a build tool like Webpack.
Here's an article that introduces these tools (plus a few others): https://medium.com/front-end-hacking/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
For using git, you should store your dependencies in a folder that is in your .gitignore. If you install browserify or another similar tool like webpack, you can use the npm package manager to create a dependency list file with npm init that allows for easy package installation with npm install by anyone. You can install packages slick with npm install --saveslick-carousel and use them with require() in your main js file. Then, take your js file and run browserify jsfile.js -o outputfile.js and it will package your js and your dependencies together to be used by the browser
When uploading to your git repo, add a .gitignore like this one for Node. This prevents your dependencies from being uploaded to the repo and instead when someone wants to run your project, they must run npm install to get all the dependencies.
Browserify gives an output JS file you add to your web server, the name of this file should be put in your .gitignore as well. Your code is stored in the js file you pass to browserify and other people can still access it without the output file, but they need to run the browserify command to package your code.

How do I include JavaScript packages I install from Nuget?

Possibly a stupid question. I installed Chart.js using package manager. It's in Solution explorer.
But where are the actual JS files or how do I get them? When I installed it, there are no changes that Git detects, so I'm not sure if anything at all happened.
Chart.js 2.5.0 includes a Content\Scripts directory inside its NuGet package which contains a Chart.js and Chart.min.js. Depending on what sort of project you are using these files may or may not be added directly into your project.
If you are using a .NET Framework project that has a packages.config file then the JavaScript files will be added into a Scripts folder into your project.
If you are using a project.json file, or your project uses PackageReferences, then nothing will be added since this sort of project only supports files that are in a contentFiles directory inside the NuGet package. Your project looks like a .NET Core project which will use PackageReferences. The Chart.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.
Tseng's answer that recommends switching to using Bower or the Node Package Manager to add the JavaScript files seems like the best solution here instead of using NuGet, which does not have good support for adding source files to your project for newer project file formats.
The usage of NuGet for css/javascript libraries is discouraged. For ASP.NET Core you should use the java script / node package managers, bower and npm respectively.
You can use either one. Bower is more focused on browser libraries and css, while NPM is more for server-sided stuff (using node.js). But node.js also contains most (if not all) of the packages bower has, so it's matter of preference.#
For that, you need to select your MVC project and add a new file to the project root. While in the template manager (Add->New File...), search for "Bower Configuration File" or "npm Configuration file".
Then edit the file and add your dependency, i.e.
package.json (npm)
{
"dependencies:" {
"chart.js": "2.5.0"
}
}
Once you save, the file will be downloaded in a directory named "node_modules`. This alone won't be enough, as the required files need to be copied over to wwwroot folder, where they can be accessed when the application runs.
For this you'd need either use the bundler to bundle the files together (should be in default ASP.NET Core project template) or use task runners such as Gulp or Grunt to run tasks on build/publishing, which does that for you. See ASP.NET Core Docs on Gulp examples.
Update
Bower been deprecated now for over a year.

bower custom build - choose specific files

I am continously encountering the issue, where I need / want to include a specific file from a bower package to my app, and find no easy way to do it. This is not limited to minified versions.
Example: Moment.js comes with about four different files one can choose to include. Those are moment.js, moment.min.js, moment-with-langs.js, moment-with-langs.min.js. The bower.json and the hidden .bower.json files inside the package specify which file should be included during the build in the "main" array (here's an example with sass-bootstrap bower package):
"main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css", "./dist/fonts/*"]
But there is no such thing in the apps bower.json file to specify for dependencies. One can only specify the dependency.
There is some discussion on the case: I found two topics on bower's github, namely https://github.com/bower/bower/issues/368 and https://github.com/bower/bower/issues/369 and also here How to configure Grunt to replace Bower dependencies by its minified versions but the issue is not limited to the minified versions.
All the topics end in the same way, stating that bower, as a package manager, should not take care of the custom build process that an app requires. But that leaves the developer with the problem of having to go about bower with the majority of the repos OR minifying the packages on his/her own. There are many who disagree on both.
The way I went about the problem with moment.js is I created a vendor folder and manually added the file that I needed and then added a Grunt task to do it automatically. But it just would be so much easier if there was a standard way of providing users the option to include e.g. all recommeded (default) files, the minified versions or just allow to choose specific files from the app's bower.json dependency list.
Perhaps I am not using it right, or maybe it's not a popular problem. I don't know if it's some feature that should be added to bower, but maybe other devs have experience dealing with the case?
If you use browserify it has debowerify transformation that just grabs the first file from the main array. To include a particular extra file call the require function with appropriate path.

Categories