Skip to main content

Play Framework with RequireJS and YUI

I've concluded an older post with a promise to investigate the issues of integration of Play Framework with RequireJS and YUI. Finally I've got some time to resolve all issues so I'm going to showcase a working sample multi-page project in this article.
  1. Sample project.
  2. Issues.
Sample project
Play Framework offers a nice official tutorial for RequireJS-support. However, it appeared that not all RequireJS features are fully supported by Play Framework yet (see below in Issues section). So it required some tuning before everything started working. I've published a sample project on github so you're welcome to look into it. Some of the issues that I faced are described in the section below. Here I'm going to show a couple of screenshots of the sample application. This is how one page of the application looks like:
Below is the screenshot of the network tab of the Google Chrome developer tools showing all page resources in the production mode. You can see that the following resources are loaded:
  • require.js - its script tag is injected by Play Framework;
  • main1.js - custom JS resources that are combined, minified and loaded by RequireJS;
  • yui-min.js - pre-minified version of YUI that is only loaded by RequireJS without minification;
  • combo - YUI dependencies managed by YUI loader.

Issues
In order to save others' time I'm going to list and comment on the RequireJS issues that I faced. They only appeared while running Play in production mode (i.e. play start or play stage). 
JavaException: java.io.FileNotFoundException: /appl/sample-application/target/scala-2.10/classes/public/javascripts-min/lib.js (No such file or directory)
In module tree:
    app/main1
Solution: I've removed an additional app directory and have put the main page resources under assets/javascripts/* while the dependent libraries can still be placed in child directories.
Explanation: It's appeared that baseUrl RequireJS config property leads to inconsistent behavior if compared between development and production modes. It looks like it's not properly used by Play Framework in production mode.
JavaException: java.io.FileNotFoundException: /appl/sample-application/target/scala-2.10/classes/public/javascripts-min/YUI.js (No such file or directory)
In module tree:
    main1
      lib/UseYUI
Solution: I've found a solution in baratox's project. I've created build.js file (see the code ) and have added it as a shim config in build.sbt.
Explanation: RequireJS fails to optimize YUI js so it should be prevented. 
TypeError: YUI is not a function, it is undefined.
In module tree:
    main1
      lib/UseYUI
Solution: I've added load() invocation in UseYUI.js when YUI is undefined.
Explanation: As it worked fine in development mode, it's most likely caused by RequireJS attempt to optimize YUI in production mode that fails. So I believe load() invocation helps to ignore the YUI dependency during the optimization.
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