Technologies

Dependencies

• Babel: Compiling the ES6 syntax to a readable format for the browser
• ESlint: Linting the JavaScript
• Browser-sync: Used for live reloading
• Express: Used for routing, fetching from the API and managing the component library
• Gulp: Used as our task manager to copy assets (audio, video, fonts, images), compiling SCSS and ES6, watching the files for changes, starting up the browsersync, creating the build folder
• nodemon: watch for code changes and restart browser automagically
• Nunjucks: Used as our templates language (JavaScript based)
• Stylelint: linting the SCSS files
• Webpack: Module bundler mainly used to bundle our JavaScript

Server

The server is ran by Express, which is a framework build upon Node. This handles the routing, manages the data from the API linked in the config and builds up the component library based on the folder structure that contains the Nunjucks files.

Templating (HTML)

For templating the brandplatform makes use of Nunjucks. A Mozilla backed-up library. It's very similar to Twig, but is JavaScript based. The Nunjucks is rendered through Express and is being passed parameters and data based on the route that is visited.

CSS

For CSS we make use of the Gulp task manager to compile it through SASS and lint it eventually with Stylelint.

JavaScript

JavaScript is build, preferably with ES6 because it allows for a more module-based structure. The Gulp task manager is used in combination with Webpack to start the compiler, lint it and bundle everything into one file.

DO NOTE that the main JavaScript file, used as an entry point by webpack, must be placed on the root of the js folder. We loop over all these files in the root of the JS folder and see all of these as entry points in order to create multiple bundles if necessary.