Grails asset-pipeline - nothing available

Question

I have a Grails app which currently runs under 2.2.4. I decided to upgrade it to 2.4.0, and in doing so convert it to use the asset-pipeline for my css/js/images. I placed all my old resources in the new assets/... directories.

I'm using IntelliJ 12.1.7 to run the app in debug-mode for development. The app starts just fine, but none of my assets seem to be available. Tomcat 7.0.52.1. Java 7.0.55. I see references such as "main.css?compile=false" in the raw html, but the asset itself isn't available when I try to view it directly in the browser (http:\localhost:8080\assets\stylesheets\main.css). I'll also show my ignorance here a bit and ask what the "?compile=false" is. That's new to me.

I ran "grails clean". Are there any changes I need to make in config.groovy or any other files? I did make the changes to remove references to the old "resources" system per the Grails documentation.

Any ideas why the assets don't seem to be getting picked up by the plugin?

UPDATE: something must be getting lost in the translation because when I created an app from scratch, assets loaded just fine in the way I'd expect when referenced per the documentation. I have crosschecked the settings in my BuildConfig and Config files and they match between the 2 apps. They are also using the same version of all the plugins. If I discover a solution, I'll post it here, but frankly I think my next order of business is going to be to gradually start importing the pieces from my app into the newly created one because there seems to be a setting buried somewhere that I don't know about that is getting configured during 2.4.0 creation that is not present in my old code base. Or there is some legacy "resources" plugin stuff that has not been removed. Fortunately not a huge app.

UPDATE 2: I have found the source of the issue. My app uses Apache Shiro for security and authentication. Installing the plugin doesn't cause an issue, but once I run "grails shiro-quick-start" the asset pipeline stops working. I'm adding a tag to this question in the hopes that someone with Shiro knowledge will be able to help. I have also created a bug over at the grails jira (https://jira.grails.org/browse/GPSHIRO-79)

Update 3: A workaround has been found and implemented. See the jira link above.

compile=false this is related to production mode etc so basically yes it has loaded it. — V H

V H V H · Accepted Answer · 2014-05-27T15:44:52

had similar issues started learning assets last night to upgrade plugin.

The trick is to load up web developer console within your browser and take a look at the output as it loads -

Does everything load OK ? it may be that the order in which things are loading up is not in the right format:

for css: application.css

take a look at above then look at containing folder

For JS: application.js

Take a look at the declarations and then follow the folder structure - to make more sense.

In short CSS should be fine but JS requires a specific order depending on what you are loading up

so for js

//= require jquery/jquery
//= require bootstrap/bootstrap
//= require angular/angular
//= require angular-route/angular-route
//= require angular-resource/angular-resource.min
//= require angular-table/ng-table
//= require myapp/index
//= require myapp/services
//= require myapp/arrestedDirectives
//= require_tree custom-folder
//= require_tree views
//= require_self

This will load in the order defined the files, right at the bottom require tree folder name to load wild card in those folders (where order does not matter)

for CSS

*= require mobile
*= require_self
*= require bootstrap
*= require bootstrap-glyphicons

this is the order defined

in the js

require_tree custom-userapp

this will load up everything in custom-userapp folder no defined structure if I wanted a specific order I would have had to add:

//= require custom-userappthis/js1
//= require custom-userappthis/js2

-- E2A : A full explaination of assets from my understandings so far :

So at the top of your application.js it shows :

//= require jquery
//= require_tree .
//= require_self

Self 3 type of declation:

1 require 
//=require         -- This is a custom file or folder/file
 //require folder/file   --> [load folder/file.js] 

2. require_tree 

//require_tree .             --> [everything in current  folder]
//require_tree folder     --> [ this one is wild card in the folder ]

3. require_self -itself - this can contain global declarations   
//require_self

Now this is the main application.js sitting in grails-app/assets/javascripts/

  <asset:javascript src="application.js"/>
  <asset:stylesheet href="application.css" />

So if you now go to grails-app/views/layouts/main.gsp you will find both the application.js and application css declared {as above}.

The css file format is a little different as in it starts with * and follows above formatting

*= require main
*= require mobile
*= require_self
*/

This so long as everything is defined should load up on the end page through the two above application.js and css.

If you wanted you could not define something in the js require specific defintion and then load up another sets of calls like this :

 <asset:javascript src="myfolder/application.js"/>
  <asset:stylesheet href="myfolder/application.css" />

and follow above file formatting if you wished to achieve the same asset configuration or replace the application.js to jquery-ui.js and make it load up jquery-ui.js physical js file.

Unsure why you would need to do this for a common/practical website since so long as everything is declared properly in the main files it should work.

I mentioned web developer console - this is firefox developer tool, and in the main console it shows what urls loaded up - you will be able to identify the css/js files and status of 200 if good ..

I have updated testingarrested to 2.4 so it has installed assets stuff :

Final update:

If you have lets say a couple of CSS files lets say you installed bootstrap folder which had css/js and you only wanted this css file for your overall site and maybe possibly another custom css that you was coming from another folder from within js folder. Then remove the stylesheets folder and just have your js references in the application.js Then within your main.gsp

    <asset:stylesheet href="bootstrap-css/css/bootstrap.css" />
    <asset:stylesheet href="customfolder/css/custom.css" />
    <asset:javascript src="application.js"/>

I think that just about wraps up assets Blank cheques accepted

Grails asset-pipeline - nothing available

2 Answers