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

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.

Related

Does any "Export as war" package exist in npmjs?

I'm looking for a package which would help me in exporting my project as a war file. However I don't see any relevant package in npmjs.com or anywhere else.
What I've tried so far:
Explored npmjs.com for this package, and found none.
Explored github and found none there as well.
One SO solution suggested to make use of the jar command which
unfortunately doesn't exist in my environment, I can't download and
use it too due to restrictions.
Did anyone come across such module (or) any other solutions with respect to this? Can some one help?
If I'm not wrong, a WAR file is specific to a Java environment. If you are using nodeJS and Javascript, you are not using Java and the WAR format is not appropriate for your code...
What do you want to achieve with a war file more than something else?
In computing, a WAR file (short for Web ARchive) could be a JAR file
used to distribute a collection of JavaServer Pages, servlets, Java
classes, XML files, tag libraries and static Web pages (HTML and
related files) that together constitute a Web application.
Wikipedia
EDIT: The only solution I see would be to create a Java Application that would eventually require and execute your nodeJS code... But this seems Hacky as hell. You can read this response about how to execute NodeJS code into a Java environment: Calling a node.js script from inside java

Bundle js vs bundle.js.gz

I used webpack to generate my bundle.js but since I was using some thrid party libraries the size is about 1MB. I use the compressed plugin and got a bundle.js.gz of 200kb. I used it and change the header to let the browser know it is compressed and it worked perfect. I am just worried about any side effects I am not seeing at first.
Can anyone tell me what could go wrong.
I don't foresee any problems. Another option, depending on your host, is to configure gzip on your http server. This will gzip on the fly and cache it for future requests (dependent on config).
Here are instructions for configuring Apache & nginx:
https://www.vultr.com/docs/gzip-compression-on-apache-and-nginx

gulp-sourcemaps Keep Intermediate Files

When I use the gulp-sourcemaps plugin, I typically have both the comment and content removed so the sourcemap header is used instead. This makes it much easier to show the original files in the browser debugger in development and staging, then remove it in production. We also try to load sourcemaps wherever possible, mostly for vendor libraries.
This works fine for the most part. However, intermediate files seem to be lost. I am guessing the loadMaps option to sourcemaps.init(), which allows for loading existing maps, removes the intermediate files when it gets their maps. This is likely fine for most cases, as the original files are there, but too often libraries only include the output file with maps added as a comment, but don't include those original files. This means we don't have access to the original files, and the browser does not have access to the built library file.
For example, angular-ui-router is written with TypeScript, then output to JavaScript when built. This means the end developer does not have to compile with TypeScript in his/her build process, as this is already done in the ui-router build process. Now, the output JavaScript file is accessible at <server root>/node_modules/#uirouter/angularjs/release/angular-ui-router.js, and the original TypeScript files were, according to the built file's sourcemap comment, in the <server root>/node_modules/#uirouter/angularjs/node_modules/#uirouter/core/src and <server root>node_modules/#uirouter/angularjs/src folders.
When I include the angular-ui-router file into a vendor.js or vendor.min.js file using my favorite tool, it bundles the angular-ui-router maps into the resulting .map file, but does not include the <server root>/node_modules/#uirouter/angularjs/release/angular-ui-router.js file as a source. This means we can't see either that file, or the TypeScript files, which makes debugging pretty much impossible using only the browser. To make matters worse, any errors we get are sourcemapped all the way back to the TypeScript files. We don't have the TypeScript files, so we can't look there, and now we don't know where in the JavaScript the error is, either! Thankfully, angular-ui-router doesn't have many complex errors, and the ones it does have are nicely documented, but other libraries are not so helpful.
Is there a way to include intermediate files as sources in the output sourcemap? Otherwise, is there an easy way to load some sourcemaps with something like loadMaps, but not others?

How to minify SignalR

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.

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.

Categories