storybook

Installing Storybook for React (Part I: Designer Edition)

I'm currently exploring options for ways to maintain the Phosphorus design system, which I've been calling 'Mineral'. A team that I worked with a while back were looking at leveraging Storybook at the time but they never fully got around to implementing it. Getting dedicated resources for these sort of things turns out to be a challenge 🤷🏻‍♂️.

Since then Storybook has continued to improve as a product so I've decided to give it a shot in an effort to maintain our UI components, which are built in React. Reasons being:

Building out components in isolation from the app. I rarely touch the code in the app, primarily because I don't have a dev environment set up and I'm too busy with strategy, research and design-related things which turns out to be full time jobs in of themselves).
It's open source and free.

Here's the guide to installing Storybook on your local machine. Hopefully, it's simple enough to follow. I'll be posting Part II at some point which will likely be focused on creating stories and components (think buttons and banners) and part III which will focus on using it in practice with an engineering team.

Prerequisites

To run Storybook, you will need to have Node.js and npm installed on your machine. Check if Node.js and npm are installed by running the following commands in your terminal:

node --version

npm --version

If installed, it should return a version number, meaning it's installed. Onward!

Step 1: Set up a boilerplate React app

For the sake of this tutorial we're going to generate a boilerplate version of a React application using a node package (create-react-app). Using create-react-app makes it so we don't have to install or configure tools like webpack or Babel.

In your terminal, move to the directory where you want to install the React app and run the following command:

npx create-react-app my-react-app

You can rename the 'my-react-app' part to whatever you'd like. After a few minutes of installing you should see information on how to go about using the application:

npm start
    Starts the development server.

 npm run build
    Bundles the app into static files for production.

 npm test
    Starts the test runner.

 npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

 We suggest that you begin by typing:

    cd my-first-react-app
    npm start

 Happy hacking!

Now move to the directory that you just created by executing the following command in your terminal:

cd my-react-app

Step 2: Get familiar with the project structure

Open the project in your favorite editor, such as VS code or Sublime. It should be laid out as so...

my-first-react-app
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

README.md - Contains basic information on getting started with Create React App.

package.json - Used to store the metadata associated with the project as well as the list of dependency packages.

package-lock.json - automatically generated for any operations where npm modifies either node_modules tree or package.json.

Public - Contains static assets for the web app. Index.html provides the entry point for the application.

src - Contains Javascript that will be processed by webpack and is the place where your React-related source code will live. This is the folder that you will mainly work out of when developing your app.

Step 3: Run the thing

Starting the development web server is easy. Run the following command in the terminal:

npm start

This should do a few things:

Run the react app in development mode.
Opens a new tab pointing to http://localhost:3000.

You can modify the page by editing src/App.js in your text editor and the changes will apply in real time.

import logo from './logo.svg';
import './App.css';

function App() {
 return (
 <div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <p>
 Edit <code>src/App.js</code> and save to reload.
 </p>
 <a
 className="App-link"
 href="https://reactjs.org"
 target="_blank"
 rel="noopener noreferrer"
 >
 Learn React
 </a>
 </header>
 </div>
 );
}

export default App;

src/App.js

Congrats! Your new React application is now up and running.