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

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
9 comments
Read more

Cocoon authentication

This article will guide you through the steps showing how to use the Authentication Framework in a Cocoon 2.2 application. Maven dependencies. Spring configuration. Sitemap. Login page and controls. Maven dependencies You need the following dependency in your pom.xml : <dependency> <groupId>org.apache.cocoon</groupId> <artifactId>cocoon-auth-impl</artifactId> <version>1.0.0</version> </dependency> Spring configuration Authentication Framework has a flexible configuration based on a concepts of applications and security handlers . There can be several applications defined and running at the same that are simply independent security zones of your web application. The security details of an application are specified using a security handler. There are several implementations provided and you're free to implement your own. Here is the SimpleSecurityHandler used that takes the hardcoded credentials: <?xml versio
Post a Comment
Read more