Skip to content

Setup for Development

Severin Ibarluzea edited this page Apr 8, 2020 · 1 revision

Setting Up for Development

react-image-annotate uses react storybook to view different states of each component.

After cloning the project, run yarn install, then yarn storybook. Your browser should automatically open to http://localhost:9090 showing you all the different component states we test. To build a feature/bug, edit or create a *.story.js file that uses the component in a way that replicates the bug or could demonstrate the feature. Then edit the regular *.js files until things are working.

If you're PRing a new feature, you should have a story that demonstrates the feature so maintainers can easily test it.

Scripts

Run npm run <SCRIPT_NAME> to run a script. In development we're running npm run storybook (or yarn storybook) most of the time.

script description
start Run demo site on port 3000
storybook Run storybook on port 9090
build Build the library in to the dist directory
build:babel Transpile the src directory into dist
build:gh-pages Build the website into build
gh-pages Build and deploy the website to github
dist Build and publish the library
Clone this wiki locally