Serie Storybook: Corriendo storybook en local + Código en github
Tags: storybook, react, javascript, github
Published: 2021-10-15 03:38:31

## 📰 En este artículo aprenderás

1. Que se requiere para correr Storybook
2. Los pasos para inicializar Storybook usando create-react-app como boilerplate

## 🗨️ Contenido

Bienvenido al segundo episodio de la serie de Storybook.

Antes de empezar a tirar comandos, es importante que tengas primero una aplicación corriendo. Esto se puede lograr gracias a create-react-app que nos dará un boilerplate de una aplicación react que servirá de base para storybook, **aclaro este punto porque storybook no creará esto por su cuenta y requerirá que primero tengas la aplicación creada.**

Con eso en mente, estos son los pasos a seguir.

Antes de continuar recuerda tener instalado npm, y CRA (Create-react-app) en tu computadora local.

Crear una aplicación en react , colocando estos comandos en la terminal.

```powershell
npx create-react-app storybook-app
```

Entrando a la carpeta de nuestra aplicación

```powershell
cd storybook-app
```

Después de ello, tendremos una aplicación de react en funcionamiento.

Con ello , **ahora sí añadiremos storybook**

```powershell
npx sb init
```

Luego de que se haya instalado, iniciaremos el servidor de Storybook

```powershell
npm run storybook
```

Storybook ejecuta un servidor separado en el puerto 8086 (o en el que hayas elegido), como puede ver en la figura. **Cuando usa Storybook, no es necesario ejecutar la aplicación de React.** 

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fc3b3924-a7df-4b09-b987-e7fd1d69f370/Untitled.png)

Hasta aquí tendremos storybook corriendo en local, si todos los logs han ido bien.

## 🔥 Recapitulando

Repasemos lo que aprendiste

- Tener instalado npm y cra para continuar el tutorial. Sino una aplicación react funcional.
- Storybook corre en base a una aplicación lista, no en una carpeta vacía, tómalo en cuenta antes de correr `npx sb init`

## 🔚 Fin

Te dejo un repositorio con storybook configurado. Además te encontrarás con otros elementos configurados como docker, travis.yml, sientete libre de clonar el repostorio y trabajar en tus propios proyectos.

[GitHub - FernandoCutire/poc-learn-storybook: A free storybook template created with CRA to make proof of concepts of storybook](https://github.com/FernandoCutire/poc-learn-storybook)

## 📺 Continua la serie

Esto no se termina aquí, puedes continuar los siguientes capítulos de la serie Storybook para averiguar como termina.

[Serie Storybook: Usando storybook para desarrollo de componentes](https://dev.to/fernandocutire/serie-storybook-usando-storybook-para-desarrollo-de-componentes-194i)

Entendiendo el concepto de Storybook, cuando usarlo e introducción para desarrolladores

[Serie Storybook: Corriendo storybook en local + Código en github](https://dev.to/fernandocutire/serie-storybook-corriendo-storybook-en-local-codigo-en-github-3o57)

Desarrollarás un repositorio de Storybook en tu computadora local

[Serie Storybook: Escribiendo componentes - .stories.jsx vs stories.mdx](https://dev.to/fernandocutire/serie-storybook-escribiendo-componentes-storiesjsx-vs-storiesmdx-23do) 

Desarrollarás .stories.jsx y .stories.mdx , aprenderás como se forman y como funciona el núcleo principal en Storybook.

## 📚 Lecturas Adicionales

Leer es bueno, aquí te dejo algunas fuentes adicionales a este artículo para que puedas complementar y aclarar conocimientos.

[React Cookbook: David Griffiths, Dawn Griffiths O Reilly Media Inc](https://learning.oreilly.com/library/view/react-cookbook/9781492085836/)

[React Cookbook: Source Code](https://github.com/dogriffiths/ReactCookbook-source)

[Storybook Documentation](https://storybook.js.org/)

## 👊🏽 Turno para tí: Comenta y comparte

Si te ha gustado la serie, dale a me gusta, compárteselo a quién veas que lo necesita y comenta si tienes alguna duda