DEV Community

Fernando Cutire
Fernando Cutire

Posted on

Serie Storybook: Corriendo storybook en local + C贸digo en github

馃摪 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.

npx create-react-app storybook-app
Enter fullscreen mode Exit fullscreen mode

Entrando a la carpeta de nuestra aplicaci贸n

cd storybook-app
Enter fullscreen mode Exit fullscreen mode

Despu茅s de ello, tendremos una aplicaci贸n de react en funcionamiento.

Con ello , ahora s铆 a帽adiremos storybook

npx sb init
Enter fullscreen mode Exit fullscreen mode

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

npm run storybook
Enter fullscreen mode Exit fullscreen mode

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

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

馃摵 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

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

Serie Storybook: Corriendo storybook en local + C贸digo en github

Desarrollar谩s un repositorio de Storybook en tu computadora local

Serie Storybook: Escribiendo componentes - .stories.jsx vs stories.mdx

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

React Cookbook: Source Code

Storybook Documentation

馃憡馃徑 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

Discussion (0)