How to minify SignalR - javascript

I have the following in my Index.cshtml:
#Scripts.Render("/signalr/hubs")
In my BundleConfig.cs, I have the following:
.Include("~/Scripts/jquery.signalR-{version}.min.js")
With EnableOptimizations on, I get a nicely bundled vendor? package. But in my Sources, I see:
Why is this raw unminified JS getting loaded? How do I bundle/minify it?

SignalR's proxy scripts are dynamically generated at runtime at /signalr/hubs by default. They're typically small, on the order of a couple of kilobytes or smaller, so minifying them will not yield any performance benefits (perhaps zero benefit at all if they already fit into an entire Ethernet frame).
Additionally, the hubs themselves cannot have their internal symbols/identifiers minified because it exposes a "public API" that your code consumes - see how dynamic (or interfaced) "client method" calls inside your Hub class are transferred over the pipe, so those names must be preserved for the system to work.
Finally, IIS is usually configured to HTTP gzip-compress certain dynamically-generated content anyway, this includes the SignalR proxy scripts - further minification can be counterproductive (as the entropy of minified scripts can be higher than uncompressed scripts).
But if you believe you can safely compress them, or if you want to bundle them, and you're certain you don't need the benefit of dynamically-generated proxies to handle rapidly changing developer requirements, then you can generate them offline:
https://learn.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client
How to create a physical file for the SignalR generated proxy
As an alternative to the dynamically generated proxy, you can create a physical file that has the proxy code and reference that file. You might want to do that for control over caching or bundling behavior, or to get IntelliSense when you are coding calls to server methods.
Install the Microsoft.AspNet.SignalR.Utils NuGet package.
Open a command prompt and browse to the tools folder that contains the SignalR.exe file. The tools folder is at the following location: packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools
signalr ghp /path:[path to the .dll that contains your Hub class] - This command creates a file named server.js in the same folder as signalr.exe.
Put the server.js file in an appropriate folder in your project, rename it as appropriate for your application, and add a reference to it in place of the "signalr/hubs" reference.

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.

Developing Less CSS locally without a server; "no sheets were loaded"

So I'm trying to extract my own CSS framework from my projects so I can develop it separately.
I have my index.html with less.js and included my main .less file which #imports a dozen other files...
However, in the console I get an error for each of my less files:
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "file:///path/to/project/src/file.less".
And a final line that says Less has finished and no sheets were loaded.
So I understand this to mean they aren't being served correctly, I normally use Node.js/Express, but I don't want to include all of that in my repo just to develop some CSS. How do I get around this?
I thought about using some node package like serve for development but I feel like this shouldn't be necessary.. Unless I'm wrong?
EDIT: here's my repo, https://github.com/kenmorechalfant/framewerk
Don't use file://. You're going to run into a mountain of XSS errors. Just use a quick static HTTP server. I use http-server with node and most IDEs have one built in. It is going to be more trouble that it's worth to try and not use a static HTTP server if you don't have a good reason not to.

Want to load same Javascript file in both client-side and server-side scripts on MEAN-stack app

I developed a MEAN-stack web app generated by angular-fullstack. I wrote a file, date.js, that appends some helpers to Date.prototype. I want to load this file to access these helpers both on the server (in the API handlers) and on the client.
Server-side code can load anything with "require([path/to/...]module-name)" whereas client side code gets loaded explicitly by
<java src="path/to/my-code.js"></java>
tags in the page.
My goal is to place data.js (and other common utilities) in a place where it can be easily accessed from either client-side or server-side code without having to maintain a copy on each.
While developing on my local box I solved this by placing it in my-app/client/assets/js/ where it can be loaded from the index.html page, and load it from server-side scripts with
require("path/to/my-app.../client/assets/js/my-code.js").
That works fine on my local box but wreaks havoc when I try to deploy it to Heroku. Heroku renames my-app/client as "public" so those server-side require() calls no longer work.
There has to be a better way to do this. Libraries like "lodash" are loaded both as Bower packages and as Node packages. Do I have to publish my little date.js library as a separate project available to both Bower and npm?

VS2013: Publish minified bundle created on files outside of the project

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.

Maven plugin for versioning and minifying javascript

Single Page Javascript Application
I have built a sophisticated ajax-driven single page webapp that uses a RESTful backend web service serving JSON. The javascript is split into many different files, each file representing some sort of feature or component.
While the service has been in alpha testing, I've just be serving all these files separately without minification. But now that I'd like to launch a beta version, I really need to combine files, minify them, and version them. I want to add this to my build process, using Maven.
Javascript File Types
I'm using the following "types" of javascript files, of which #3 and #4 are my concerns:
External files, such a jquery and jquery-ui served from the Google CDN. Rarely change these versions, can be handled manually.
Jquery plugins that I'm hosting myself, such as fullcalendar or ui-layout. Again, I rarely update these to new versions and can handle it manually.
Application-wide javascript code. Custom javascript that is spread across many files and can change occasionally. All of these files need to be loaded for the app to work.
Feature-specific javascript code. Custom javascript that is loaded on demand when a specific feature is requested. This code can change quite frequently and is not loaded at startup.
Build Objectives
I'd like to do the following during my build process:
Concatenate all type 3 javascript files together, minify them, and save as a single file with a version number. For instance: app-2.0.6.min.js, where 2.0.6 is the maven project version.
All type 4 files should be individually minified and saved as separate files with version numbers in the name. For instance: feature-abc-56ab32de29.min.js, where 56ab32de29 is the version number of that specific file.
Update HTML files with <script> tags to point to javascript files with the correct version numbers.
Update Javscript files that load type 4 feature javascript files to point to the right versions.
Questions
Is there a maven plugin that will assist with the concatenation?
Is there a maven plugin that will assist with the minification? Ideally, I'd like to use Google Closure Compiler, but would work with others if simpler.
Is there a maven plugin that will assist with the versioning?
Is there a way to have the type 4 javascript files have independent version numbers? Ideally, if a file doesn't change between version 2.0.5 and 2.0.6, there is no need for users to download a new version and their cached version would work fine. I'm using GIT for source control, so would there be a way to use a file's GIT hashcode for versioning?
Is there a solution that will compress the javascript that is inline in regular HTML files without killing the HTML?
Is there a solution that will compress and version my CSS files as well?
Take a look at the yuicompressor-maven-plugin. It can aggregate various js (as well as css) files as well as minify and obfuscate them.
Here's a brand-new Maven plugin that targets this task: http://mojo.codehaus.org/webminifier-maven-plugin/
I've successfully incorporated RequireJS optimization (uses Google Closure compiler + does concatenation) in a Maven environment (for single page JS app). See my question and the follow up answer for details: RequireJS Compilation in Maven project with external JS dependencies
You could probably expand on that to version and archive the minified JS artifacts.

Categories