Do something today that your future self
will thank you for

Sean Patrick Flanery

UIengine project setup

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 #

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

npm install @uiengine/core --save-dev

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

npm install @uiengine/adapter-ejs --save-dev

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

npm install module-alias --save-dev

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

Require module-alias

const moduleAlias = require('module-alias')

Register the alias with the method addAlias

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

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

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

Run parallel tasks #

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

npm install npm-run-all --save-dev

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.

npm install nodemon --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.js

customStylesFile: '/css/uiengine.css',

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

Edit this page on GitLab

Comment on DEV or Hashnode

Take me to the next post!