Getting started
This guide will walk you through setting up the project both for development and production-ready use.
If you are looking for instructions on how to use a specific component from the Ulule Design System library, please refer to the demo page of that component.
Requirements
- Node.js 12
- Yarn
- Cloning the
ulule/ululerepository
Please have these ready before going further through this guide.
ℹ️ It is recommended to use nvm to easily change node versions.
Preamble
Source files for both this website and the Ulule Design System library are part of the ulule/ulule repository.
Ulule is built as a monorepo, but the front-end applications are organized as Yarn workspaces, for easier access. Thus, you can choose between navigating to each app folder to run commands, or using yarn workspace from the <ULULE_REPO>/frontend directory.
ℹ️ From now on, this guide WILL ASSUME that you are placed in the <ULULE_REPO>/frontend directory and making use of Yarn workspaces.
Dependencies
⚠️ Make sure you are running node 12 before installing dependencies.
Installing the library dependencies:
Installing the website dependencies:
Development
Watch mode
Run watch mode for the library:
Run watch mode for the website:
Visit http://localhost:8000/ to view the local instance of the website.
ℹ️ N.B.:
While in watch mode, each time you update the code of the library or the website, your website local instance will automatically reload. Sometimes it takes a long time, be patient 😄.
If you create a component or change the props of an existing one, you might have to re-run develop to see the changes.
Production build
The following commands will allow you to build production-ready bundles.
To build the library:
To build the website:
Analyze the bundle
If you need to analyze the library bundle to understand some issues, follow these steps:
It uses source-map-explorer bundle.