SASS bundling and minification works locally but not on Azure Websites - asp.net-mvc

I have setup SASS bundling with Bundle Transformer: Sass and SCSS and it works great locally in debug and release mode, it builds through Azure Build Server, and delivers without any build issues to my Azure Web Site. Problem is that it doesn't appear that the SASS is compiling into CSS. Looking at the source on live site this shows for the CSS:
<link href="/Content/test?v=" rel="stylesheet">
without the hash that you'd expect, and see locally. Looking at the stylesheet there is nothing in it.
Code that I have to make the bundle:
var commonStylesBundle = new CustomStyleBundle("~/Content/css");
commonStylesBundle.Include("~/Content/site.scss");
commonStylesBundle.Orderer = nullOrderer;
commonStylesBundle.Transforms.Add(new CssMinify());
bundles.Add(commonStylesBundle);

You have registered a bundle with the address "~/Content/css", but try to get the bundle with the address "/Content/test".
In addition, is not recommended to use the CssMinify and JsMinify classes together with a Bundle Transformer. I will not explain why it should not do, because I have written about this in the documentation (http://bundletransformer.codeplex.com/documentation). As most simple solution to this problem I recommend to install the BundleTransformer.MicrosoftAjax (http://nuget.org/packages/BundleTransformer.MicrosoftAjax) package.

Related

Rails 5 is serving old assets on heroku

My Rails 5 application is behaving weirdly. The application is on heroku.
I am using the gem tinymce-rails. Recently, this gem got updated to version 5 which uses new functions. After deployment I faced an issue where one of the plugins (the link plugin) could not be loaded due to using the old syntax.
I am using chrome to open the website. For some reason the tinymce plugins javascript files are not up to date. They also don't have that fingerprinted name with the hash in the end. All other javascript files do however.
I ran heroku run rake assets:precompile; heroku run rake assets:clobber;. It was no good.
I then tried to open the website in incognito mode and found that the tinymce plugins are the up to date ones. Still though without the fingerprinted file names.
How can I force that the old plugin javascript files be invalidated? I will not have control over my users to ask them to clear their caches.
How can I force using the fingerprinted files? I have inspected the heroku server file system and found assets/tinymce/plugins/link
having both fingerprinted and non-fingerprinted files however the non fingerprinted files were the ones used.

WebStorm + webpacker debugging

Hello StackOverflow community!
My team is working on a ruby on rails project, where some parts are written in react. We are using webpacker gem to bundle js files into packs.
I'm trying to set up WebStorm to work with our project, but I have problems with the debugger - webstorm is not hitting any breakpoints.
I'm launching rails s and ./bin/webpack-dev-server in separate terminal instances, installed chrome extension and created JavaScript Debug configuration, pointing to the view where react app resides (on the port 3000). Also added devtool: 'eval' to webpack configuration. In the chrome dev tools I see webpack:// source and I can successfully set breakpoints there.
How to configure this tooling to have breakpoints working?
normally all you need for debugging apps bundled with webpack is to make sure that sourcemaps are properly generated. The best choice here is devtool: 'source-map' (see https://webpack.js.org/configuration/devtool/). eval sourcemaps are not accurate and not too suitable for debugging (quality is "generated code" rather than "original code").
In some cases, you might also need to specify URL mappings - see https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ for more info.
But there are no generic instructions that would work for each and every configuration - as you can configure webpack in dozens of ways. So I can hardly advise on exact steps unless you provide a project you are trying to debug

Liquid error when trying to embed twitter feed on GitHub Jekyll page using plugin

I am trying to embed my twitter timeline on my Jekyll Blog hosted on Github.
This is the plugin I am trying to install: https://github.com/rob-murray/jekyll-twitter-plugin
These are instructions I am using to install plugins in general: https://jekyllrb.com/docs/plugins/
The site above includes the warning:
Plugins on GitHub Pages
GitHub Pages is powered by Jekyll. However, all Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.
You can still use GitHub Pages to publish your site, but you’ll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files."
Does this mean what I am trying to do is impossible, without building the site statically, since I am using Github pages? I am lead to believe not, because I encounter an error even when serving the site locally on my laptop.
However, I get the following error when I place the example {% twitter https://twitter.com/jekyllrb maxwidth=500 limit=5 %} into my index.md file. When I do jekyll serve --watch locally, it gives the error:
Liquid Exception: Liquid syntax error (line 7): Unknown tag 'twitter' in index.md
I do not know if the error is in my installing of the jekyll-twitter-plugin, or in the way I am using. For reference, to install the plug I did the following:
put jekyll-twitter-plugin in my _config.yml file under the gems: header
put gem 'jekyll-twitter-plugin' into my Gemfile
did sudo gem install jekyll-twitter-plugin locally on my own machine.
Can anyone help me figure out what I've done wrong?
That plugin is not supported by Github Pages, so it won't work there. The only possibility to use it is to build your site locally before pushing your site to Github Pages.
If you want to install it locally anyway, after adding the gem to Gemfile, Install the gems specified in that Gemfile:
bundle install
Then continue using the plugin tags in your posts.

rails vendor folder angular2 development and production

Hello very amazing coders,
I'm currently using npm to manage angular2 dependencies. I then manually copy the required angular2 files from node_modules into my rails vendor folder. The rails will make those files available for me to load. However, I've read that vendor files should not be in source control. Ok, fair enough, I agree. However, if I .gitignore these files, they do not make it onto heroku. And subsequently my <script></script> tags in app/views/layouts/application.html.erb return 404's not found.
I'm looking for overall guidance on how you guys do vendor assets in production vs. development? In my case, a gem for angular2 source files does not exist, so pretend that is not an option.
There's so many flavors for this and as everything else it depends on your project. Here are some:
1- You can use cdn versions of the libraries in production, which is supposedly better because there's a good chance that people visiting your page would have already downloaded jquery or w/e from a cdn while visiting another page so you they don't have to download yet another copy for your page alone. Like https://www.maxcdn.com/ or https://developers.google.com/speed/libraries/.
2- You can have one repo with your code on it, sources and all, without the vendor files and one more repo connected to heroku where you push only the distributable build of your project including if you want, the vendor files.
3- Run the same npm install and all other configuration scripts you normally use from your production server, Heroku should allow you to do this np, or at least have a plugin for it.
I hope this helps.

Install barista/coffeescript on Rails 2.3

I am trying to get barista up and running in a Rails 2.3 application (that may not be moved to a new version of rails for the time beeing..). I switched the app to bundle so I added the following gems to my Gemspec:
gem "barista"
gem "json"
Then executed bundle install which run through. Now as far as I understand to "compile" the coffeescript there is a rake task that comes with barista. But it doesn't seem to be installed properly so I can use it with rake. I.e. when I execute rake -T there is no barista:brew
I saw a pending pull request on git hub suggesting to add require 'barista/tasks' but that only resulted in rake not finding it. So what am I doing wrong or more general how do I get up and running with barista on Rails 2.3.x?
It has been some time ago since I used Barista and I have it not in use in any project, so I cannot verify it.
But I remember that one advantage of Barista is, that it waits serving a request until a modified CoffeeScript file is recompiled. This ensures that the browser doesn't request an outdated file.
So there is no need to compile the CoffeeScript files with a Rake task.
CoffeeScript itself comes also with a watch function, that compiles CoffeeScripts when a change is detected:
coffee -w /path/to/scripts
The reason why I stopped using Barista is simply that I discovered Guard. So I wrote guard-coffeescript to compile my CoffeeScripts in the same moment I save the file.
Guard-coffeescript has some advantages over Barista and CoffeeScript:
Fast and low CPU consumption because it relies on file system modification events.
Can be configured in many ways, e.g. multiple source folders and output folders.
Immediate feedback when an error occurs, even with system notifications like Growl.
Note that Rails 2 support for Barista is, according to Barista's README, "untested" (it was originally built for Rails 3 only), so there may be compatibility issues. Also note that you need either therubyracer gem, or the node binary on your system's PATH (or any of the other JS runtimes supported by ExecJS).
Try this:
Add a file named foo.coffee to the folder app/coffeescripts with the contents
alert 'Hello, Barista!'
Now add <%= javascript_include_tag "foo" %> to an ERB file and load that page.
You should get the alert, just as you would if the compiled foo.js were in public/javascripts.
I've successfully integrated barista and rails 2.3.14. In development, when I ask for a js file, the coffeescript file is found and compiled on the fly.
I also successfully ran the barista:brew rake task and the js files were generated.
I did notice that for production, unless I include an ExecJS compatible compiler, I need to precompile my js files before a push, which might be another +1 for the guard solution by #netzpirat.
For reference - I'm using Barista 1.3.0 and coffee-script 2.2. Not sure how that affects things, but thought it was noteworthy.
Also, I added a line to load the barista tasks in my Rakefile:
# in my Rakefile
load "barista/tasks/barista.rake"

Resources