Structuring of frontend assets

Enonic version: 6.1

We’re currently setting up a new site with XP (v6.1), and I’ve been tasked with setting up the build of frontend resources. And since we’re starting from scratch, I’d love to do this the right way from the get-go.

The compiled assets will be placed in the src/main/resources/site/assets folder. Where would you put your source files? That is, uncompressed JS, LESS-files, uncompressed images and so forth.

We could put them in the same folder (assets/js, assets/less), we could put them in src/main/resources/{less,js}, or we could keep them on the root level. Or perhaps you have a tried and tested solution for us already? :blush: Best regards,

Kristofer Selbekk


You can have a look at the Skeleton App. Not sure how much up-to-date it is but on my last 3 client projects I’ve built on that setup.

/assets/ have folders /css/ and /js/. In them all files are uncompressed and will all be joined into a massive main.js and main.css with Gradle. These files are the used in my templates. Most uncompressed files are moved into separate folders, like “jquery” or “vendor” to just structure it in a sane maner.

In later projects I expanded upon this by putting my Sass-files for each Part into that specific part-folder. So everything is nicely tucked together, easy to access. View, Controller, Model, and Sass-files living together in harmony. To get this done I just update my main Sass file:

with this line added after all the framework files:
@import '../../parts/**/*';

This might give you some ideas on how to structure a project =) I guess it would work almost the same with Less.

But really anything would work as long as you are comfortable with it.

1 Like