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 ---
    
  7. Create JSON routes config /opt/combohandler/yui/root.json:
  8. {
      "/yui/combo": "/opt/combohandler/yui"
    }
    
  9. 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.

Comments

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. ...

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...

DynamicReports and Spring MVC integration

This is a tutorial on how to exploit DynamicReports reporting library in an existing  Spring MVC based web application. It's a continuation to the previous post where DynamicReports has been chosen as the most appropriate solution to implement an export feature in a web application (for my specific use case). The complete code won't be provided here but only the essential code snippets together with usage remarks. Also I've widely used this tutorial that describes a similar problem for an alternative reporting library. So let's turn to the implementation description and start with a short plan of this how-to: Adding project dependencies. Implementing the Controller part of the MVC pattern. Modifying the View part of the MVC pattern. Modifying web.xml. Adding project dependencies I used to apply Maven Project Builder throughout my Java applications, thus the dependencies will be provided in the Maven format. Maven project pom.xml file: net.sourcefo...