Introduction

Our approach is to build the new frontend in a component-oriented way (eg.: header, main, footer, cache-list, s.o.) to prevent duplicate styling and html.

...

web/ (contains the compiled css and javascript files build by grunt or symfony command)

YARN

You can find all important things to know about Yarn on following website: https://yarnpkg.com.

Yarn is a different CLI client for the npm registry.

To read about why we use yarn instead of npm see https://www.sitepoint.com/yarn-vs-npm/.

SCSS

You can find all important things to know about SCSS on following website: http://sass-lang.com.

...

The primary used tasks are:

• grunt (only build once with linting)
• grunt build (build once without linting)
• grunt watch (build and watch for file changes in a loop)

Caveats

Dependencies like Bootstrap and jQuery are currently maintained in both composer.json and package.json.

Be aware that both files should contain the same version of each dependency.

When you develop new things for the frontend test both ways building the assets for the web folder!

Note: The composer dependencies are only fetched from composers vendor-folder, but to keep the switch to grunt for the new deployment later easy we maintain both.