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

Top comments (0)