Play Framework: public/ vs app/assets/

Question

According to this document, the public/ directory should contain static assets that can be served as they are, while the optional app/assets directory should contain any asset that needs to be processed, for example, by the minify compiler during the build phase.

In case of a SPA (Single Page Application), assets would include JavaScript, CSS, and image files... so does this mean that images files should be stored in public/images while JavaScript and CSS files in app/assets/?

Then, I also need to integrate a third party module that consists of both minified JavaScript libraries and non-minified JavaScript files that need to be customized... How should I manage this? Should I keep standard, already-minified assets in public/ and move customized JavaScript files to app/assets/javascripts/?

Answer 1

Yes, what you describe is correct.

Play combines contents from "managed" and "unmanaged" assets into a single folder during the build process (as mentioned in docs https://www.playframework.com/documentation/2.3.x/AssetsCoffeeScript)

But managed aseets (i.e., app/assets) get compiled - e.g., javascript is run through jshint and then the compiled versions are copied. The unmanaged assets (i.e., public) are taken "as is", with no processing.

Obviously, there is no harm putting your own javascript into the unmanaged public directory, but then you are not taking advantage of the compilation facilities that Play gives you.

For a library which contains customizable files, it depends. I would definitely put the minified files in public, because otherwise you may get compilation errors from jshint. The customized files - depends on the extent of the customization. If it is just small "settings" kind of customization, I may consider putting them together with the other library files just for clarity. But if it's anything that is under active development and involves writing code, I would put it app/assets to get the benefits of jshint syntax checking.

Also, as a side note, you can place your images in app/assets -- they will just be copied without change. But I find that it tends to make things slower by triggering extra unnecessary copies on rebuilds, so having these in the unmanaged directory works better.

Answer 2

I store everything in the public folder : css, javascript, images and even less files (this documentation recommend putting it in the app/asset folder). it will automatically be copied to the asset folder and everything work as expected.

For your third party js library, if it is just plain js (minified or not), put it in the public folder. If there is coffee script/less files, consider following the documentation and put it all in the asset folder.

If your files are in the public folder, add this lines in your templates :

<link href="@routes.Assets.at("stylesheets/myCss.css")" rel="stylesheet">
<script src="@routes.Assets.at("javascripts/myJs.js")" type="text/javascript" defer="defer" ></script>