UIengine is an awesome tool I used few times to document design systems with living pattern libraries. Here it is my basic UIengine setup.

Prerequisites

Styles configuration from scratch is available in this post:📒 styleguide setup.

UIengine

• UIengine

Workbench for UI-driven development: A tool for developers and designers to build and document web sites and apps.

npminstall @uiengine/core--save-dev

UIengine supports lot oftemplate languages. After choosing one of them, for instanceEJS, we have to install the adapter for this language

npminstall @uiengine/adapter-ejs--save-dev

• module-alias

Create aliases of directories and register custom module paths in NodeJS like a boss!

npminstallmodule-alias--save-dev

module-alias comes in handy incomponent.config.js files, where we need to call JS functions contained in the root folder/scripts:

Requiremodule-alias

constmoduleAlias=require('module-alias')

Register the alias with the methodaddAlias

moduleAlias.addAlias('@scripts',process.cwd()+'/scripts')

Example: we want to populate component fileds with data contained inscripts/content.js. Usingmodule-alias we can use the shortcut@scripts to get the content file, from anywhere we made the call.

// Debug to run it in nodeJSconstmoduleAlias=require('module-alias')moduleAlias.addAlias('@scripts',process.cwd()+'/scripts')// Configconstcontent=require('@scripts/content.js')

Run parallel tasks

• npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

npminstallnpm-run-all--save-dev

• nodemon

nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

npminstallnodemon--save-dev

Dev scripts

• nodemon checks if any file has changed
• UIengine runs in--serve mode to hot-reload changes
• npm-run-all runs in parallel UIengine build and styles build

"scripts":{"_____________________________Dev_______________________________":"","watcher":"nodemon -e scss -x\"npm run styles:dev\"","build:serve":"node ./scripts/uiengine build --watch --serve","dev":"npm-run-all -l clean:dev --parallel build:serve watcher"}

UIengine configuration

• Add CSS file to customize UIengine layout

// uiengine.config.jscustomStylesFile:'/css/uiengine.css',

Now that my basic UIengine setup is done, I can start to develop my components! 💪🏻