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! 💪🏻
Top comments (0)