Understanding Frontend Package Management

Frontend packages are managed by Bower and Brunch to generate the public folder ,the only thing you need when you deploy your theme.

App Folder

The app folder is where all your theme assets files must be placed (images,scss,fonts,js,...). this folder will be watched by Brunch build tool in order to generate the public folder.

App Folder structure ?

Here is the the app folder structure

├── assets
├── scripts
├── scss
    ├── editor
    │   ├── ....
    ├── editor-rtl
    │   ├── ....
    ├── styles
    │   ├── ....
    ├── styles-rtl
    │   ├── ....
    ├── _variables.scss

1 - assets

The folder will contains all your theme static files (images,fonts, html , ...), which will be copied to public folder(autogenerated).

2 - scripts

The folder will cotains your theme javascript files. All files in this folder will be concatenated to public/js/app.js

3 - scss

1. editor : containes editor style(autogenerated from your styles and written to public/css/editor.css)
2. editor-rtl : containes editor RTL style(autogenerated from your styles and written to public/css/editor-rtl.css)
3. styles : containes your theme styles (written to public/css/app.css)
4. styles : containes your theme RTL styles (written to public/css/app-rtl.css)
5. _variables.scss : the file containes the boostrap variables , and you can add your own varibales to this file too .(the file is included in your main style file by default)

New packages With Bower

Bower will handle adding new packages for your theme , new packages will added in bower_components folder , brunch will use this folder when it generates the public folder.

For instance , here is how to add underscore to your project :

bower install unserscore --save

And you are good to go :)

##Brunch commands

• brunch build — Compile and optimize the files in your app directory
• brunch watch — Compile assets when file changes are made
• brunch build --production — Compile assets for production (no source maps).