HSDS: React
  • HSDS: React
  • Quick start
    • Components
  • Testing
    • Local Integration Testing
  • Reporting Issues
  • Contributing
    • Getting started
    • Creating a component
    • Styling
    • Write a story
    • Writing tests
    • Adding documentation
    • Submitting for review
    • Publishing a release
Powered by GitBook
On this page
  • Setup
  • Development environment
  • Code editor
  • Git branch
  • Next
  1. Contributing

Getting started

PreviousContributingNextCreating a component

Last updated 5 years ago

In this guide, we'll walk through how to get started with HSDS development.

Setup

First, we need to clone the Github repo to your computer. Open up your terminal, and run this command in the directory of your choice:

git clone git@github.com:helpscout/hsds-react.git

Next, go into that directory:

cd hsds-react

And install all the dependencies in the world...

npm install

Note: You can use if you like, but it is recommended you use , as that is what we use. This is to avoid install conflicts from yarn.lock vs package-lock.json.

Great 🌈! You've setup and installed all of HSDS's dependencies.

Development environment

npm start

HSDS's start does a neat thing that automatically checks and installs dependencies for you. After the initial npm install, you most likely don't need to do this anymore when running npm start 💪.

Fantastic ✌️! You've got HSDS up and running on your computer.

Code editor

Git branch

Create a new git branch for your work. You can call it whatever you like (the more descriptive of your work, the better):

git checkout -b strong-component

Next

HSDS's development environment is powered by . To fire up HSDS's Storybook, run the following command:

Once Storybook builds, you'll be able to visit it at .

The live version of HSDS's Storybook can be seen at .

You can use whatever code editor you like! We recommend using .

Let's in HSDS!

Storybook
http://localhost:8900/
https://hsds-react.netlify.com/
Visual Studio Code
create our new component
Yarn
npm
HSDS's Storybook development environment