Giulia Chiola's Blog

UIengine project setup

Giulia Chiola's photo
Giulia Chiola
·

3 min read

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! 💪🏻

design patternsCSS