The Rivet add-on boilerplate is a lightweight introduction to creating add-ons for the Rivet design system. To learn more, visit the Rivet wiki page about add-ons and the Rivet add-on directory.
Setting up the Rivet add-on boilerplate is a four-step process. These instructions assume you are familiar with Git, GitHub, and Node.
To work with the Rivet add-on boilerplate, you'll first need to make sure you have Node and Node Package Manager (NPM) installed your computer.
Check if you have Node and NPM installed by running the following in your terminal:
node -v && npm -v
If you don't have both Node and NPM installed, visit the Node website for instructions on setting up Node on Windows, Mac, or Linux.
Clone this repo to the computer on which you'll be developing your add-on:
git clone https://github.com/illusivesunrae/rivet-add-on-boilerplate-lite.git
With Node and NPM installed, use your terminal to navigate to the folder into which you cloned this repo and run the following commands:
npm install
npm run start
This will generate a dist
folder, a docs
folder, and open a browser at localhost:3000
where you can preview your add-on as you develop and document it.
Rename the following Sass and JavaScript files, replacing rivet-add-on-boilerplate-lite
with the name of your add-on, such as rivet-progress-bar
:
src/sass/rivet-add-on-boilerplate-lite.scss
src/js/rivet-add-on-boilerplate-lite.js
You'll also need to update the paths to the CSS and JavaScript files in src/index.html
to point to your renamed files.
We've provided a src/index.html
file where you can test your add-on, write documentation, and provide code examples.
This index.html
file will be built to the docs
folder and can be published with GitHub Pages. This folder is also where localhost:3000
points when you start your development server in step 3.
If you need help building your add-on, you can reach out on the Rivet slack channel or Rivet mailing list.
The Spring 2019 Rivet Community Workshop will feature three add-on tutorial projects. You can find out more about them by following the links below: