DEV Community

loading...

UIengine project setup

Giulia Chiola
Front-end Developer. 👾 Media engineer. ⚡ Facing life one bug at a time. 🔥 Easily bribed with chocolate. 🍫 she/her.
Originally published at giuliachiola.dev ・2 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npm install module-alias --save-dev
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

Register the alias with the method addAlias

moduleAlias.addAlias('@scripts', process.cwd() + '/scripts')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

Run parallel tasks

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

npm install npm-run-all --save-dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

UIengine configuration

  • Add CSS file to customize UIengine layout
// uiengine.config.js

customStylesFile: '/css/uiengine.css',
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)