Skip to main content

Local YUI combo loader

Quite a while ago I had users complaining they could not use my application from another secure network zone. It appeared the root cause was in using Yahoo CDN for serving YUI resources while there was no internet access in that specific network zone. Also living behind a proxy, our regular users used to suffer from longer delays from time to time due to proxying. An obvious solution turned out to be using a locally served YUI. For this a combo loader is required if you care about efficiency on Production.

Installation
To start with, there are several alternative open-source tools that can be used for combo loading:
The Node.js combo handler is supplied with rather self-contained README file at github. Nevertheless, I'll outline main steps here that worked for me:
  1. Install Node.js and npm package manager.
  2. Run npm install combohandler.
  3. Choose a location for the local YUI files, e.g. /opt/combohandler/yui.
  4. Download YUI3 release zip and YUI 2in3 release zip if needed.
  5. Place sources at the chosen location. Besides I've renamed the top directories, so I've got the following:
    6. ls /opt/combohandler/yui/
2in3/  3.17.2/

ls /opt/combohandler/yui/2in3/
2.2.2/  2.3.1/  2.4.1/  2.5.2/  2.6.0/  2.7.0/  2.8.0/  2.8.0r4  2.8.1/  2.8.2/  2.8.2r1  2.9.0/  2.9.0pr1.2725/  build/  meta/

ls /opt/combohandler/yui/3.17.2/
align-plugin/  cssbase-context/  editor-para/  model-sync-rest/  series-marker/
--- and many more here ---
  6. Create JSON routes config /opt/combohandler/yui/root.json:
    7. {
  "/yui/combo": "/opt/combohandler/yui"
}
  7. Start combohandler now: combohandler -p 8555 -b /yui/public -f /opt/combohandler/yui/root.json
Now it's time for some comments on the steps above. First, you can see I use both YUI3 and YUI 2in3 releases but I do not use YUI gallery modules though. If you need gallery modules as well, I hope you'll be able to make them working yourself although I'll give some useful links in the configuration section. Second, I've configured the port 8555 above and the base URL path /yui/public that is used for rewriting relative URLs. This base URL should provide direct access to any YUI resource. To give a better idea here is our Apache HTTP server virtual host configuration: 
<VirtualHost *:80>
    Alias /yui/public "/opt/combohandler/yui"
    <Directory "/opt/combohandler/yui">
        Options None
        AllowOverride None
        Order allow,deny
        Allow from all
    </Directory>
    ProxyPass /yui/combo http://localhost:8555/yui/combo
</VirtualHost>
Finally the following should be working:

Application configuration
Configuring the application is much easier, you only need to fix yui.js location and provide a custom YUI config to enable local combo loader. Here is the javascript I've used: 
YUI_config = {
  comboBase: 'http://domain.com/yui/combo?',
  combine:   true,
  groups: {
    yui2: {
      combine:   true,
      root:      '2in3/2.9.0/build/',
      patterns:  {
        "yui2-": {
          configFn: function (me) {
            if(/-skin|reset|fonts|grids|base/.test(me.name)) {
              me.type = "css";
              me.path = me.path.replace(/\.js/, ".css");
              me.path = me.path.replace(/\/yui2-skin/, "/assets/skins/sam/yui2-skin");
            }
          }
        }
      }
    }
  }
};
You can see here a separate yui2 group configuration. If you are going to use YUI gallery modules, they can be configured using groups as well. For some examples you can refer to the related blog article and YUI forum topic.
Labels:

Comments

Post a Comment

Popular posts from this blog

Connection to Amazon Neptune endpoint from EKS during development

This small article will describe how to connect to Amazon Neptune database endpoint from your PC during development. Amazon Neptune is a fully managed graph database service from Amazon. Due to security reasons direct connections to Neptune are not allowed, so it's impossible to attach a public IP address or load balancer to that service. Instead access is restricted to the same VPC where Neptune is set up, so applications should be deployed in the same VPC to be able to access the database. That's a great idea for Production however it makes it very difficult to develop, debug and test applications locally. The instructions below will help you to create a tunnel towards Neptune endpoint considering you use Amazon EKS - a managed Kubernetes service from Amazon. As a side note, if you don't use EKS, the same idea of creating a tunnel can be implemented using a Bastion server . In Kubernetes we'll create a dedicated proxying pod. Prerequisites. Setting up a tunnel. ...
Post a Comment
Read more

Notes on upgrade to JSF 2.1, Servlet 3.0, Spring 4.0, RichFaces 4.3

This article is devoted to an upgrade of a common JSF Spring application. Time flies and there is already Java EE 7 platform out and widely used. It's sometimes said that Spring framework has become legacy with appearance of Java EE 6. But it's out of scope of this post. Here I'm going to provide notes about the minimal changes that I found required for the upgrade of the application from JSF 1.2 to 2.1, from JSTL 1.1.2 to 1.2, from Servlet 2.4 to 3.0, from Spring 3.1.3 to 4.0.5, from RichFaces 3.3.3 to 4.3.7. It must be mentioned that the latest final RichFaces release 4.3.7 depends on JSF 2.1, JSTL 1.2 and Servlet 3.0.1 that dictated those versions. This post should not be considered as comprehensive but rather showing how I did the upgrade. See the links for more details. Jetty & Tomcat. JSTL. JSF & Facelets. Servlet. Spring framework. RichFaces. Jetty & Tomcat First, I upgraded the application to run with the latest servlet container versio...
1 comment
Read more

Managing Content Security Policy (CSP) in IBM MAS Manage

This article explores a new system property introduced in IBM MAS 8.11.0 and Manage 8.7.0+ that enhances security but can inadvertently break Google Maps functionality within Manage. We'll delve into the root cause, provide a step-by-step solution, and offer best practices for managing Content Security Policy (CSP) effectively. Understanding the issue IBM MAS 8.11.0 and Manage 8.7.0 introduced the mxe.sec.header.Content_Security_Policy   property, implementing CSP to safeguard against injection attacks. While beneficial, its default configuration restricts external resources, causing Google Maps and fonts to malfunction. CSP dictates which domains can serve various content types (scripts, images, fonts) to a web page. The default value in this property blocks Google-related domains by default. Original value font-src 'self' data: https://1.www.s81c.com *.walkme.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' ...
Post a Comment
Read more