Back to Intro to Storybook
Chapters
  • Empezando
  • Componente Simple
  • Componente Compuesto
  • Datos
  • Pantallas
  • Desplegar
  • Testing
  • Complementos
  • Conclusion
  • Contribuir

Desplegar Storybook

Aprender como desplegar Storybook
Esta traducción de la comunidad aún no se ha actualizado a la última versión de Storybook. Ayúdanos a actualizarlo aplicando los cambios en la guía en español para esta traducción. Pull requests son bienvenidos.

En este tutorial, hemos construido componentes en nuestra máquina de desarrollo local. En algún momento, vamos a necesitar compartir nuestro trabajo para obtener feedback del equipo. Vamos a desplegar Storybook para ayudar a nuestros compañeros a revisar la implementación de la interfaz de usuario.

Exportando como una app estática

Para desplegar Storybook primero necesitamos exportarlo como una aplicación web estática. Esta funcionalidad ya está incorporada en Storybook y preconfigurada.

Ejecutando yarn build-storybook generará un Storybook estático en el directorio storybook-static, que luego se puede desplegar en cualquier servicio de hosting de sitios estáticos.

Publicar Storybook

Este tutorial usa Chromatic, un servicio de publicación gratuito hecho por los mantenedores de Storybook. Nos permite desplegar y alojar nuestro Storybook de forma segura en la nube.

Configurar un repositorio en GitHub

Antes de empezar, nuestro código local tiene que sincronizar con un servicio de control de versiones remoto. Cuando configuramos nuestro proyecto en el capítulo de Empezando, ya inicializamos un repositorio local. En este punto del tutorial ya tenemos varios commits que podemos enviar a un repositorio remoto.

Ve a GitHub y crea un nuevo repositorio para nuestro proyecto aquí. Nombra tu repo “taskbox”, igual que nuestro proyecto local.

GitHub setup

En la nueva configuración del repositorio copia la URL de origen del repositorio y añádelo a tu proyecto git con este comando:

Copy
git remote add origin https://github.com/<your username>/taskbox.git

Por último, haz push para enviar nuestro repositorio local al repositorio remoto en GitHub con:

Copy
git push -u origin main

Usa Chromatic

Agrega el paquete como una dependencia de desarrollo.

Copy
yarn add -D chromatic

Una vez que el paquete esté instalado, inicia sesión con Chromatic con tu cuenta de GitHub (Chromatic solo solicitará permisos muy ligeros), luego crearemos un nuevo proyecto que se llama "taskbox" y lo sincronizaremos con el repositorio de GitHub que hemos configurado.

Haz click en Choose GitHub repo abajo de colaboradores y selecciona tu repositorio.

Copia el project-token único que se generó para tu proyecto. Después ejecútala con el siguiente comando para construir e implementar nuestro Storybook. Asegúrate de reemplazar project-token con su token de proyecto.

Copy
yarn chromatic --project-token=<project-token>

Chromatic running

Cuando termines, vas a recibir un enlace https://random-uuid.chromatic.com a tu Storybook publicado. Comparte el enlace con tu equipo para recibir comentarios.

Storybook deployed with chromatic package

¡Hurra! Publicamos Storybook con un comando, pero ejecutar un comando manualmente cada vez que queremos obtener feedback sobre la implementación de la interfaz de usuario es repetitivo. Idealmente, publicaríamos la última versión de los componentes cada vez que hacemos push a GitHub. Tendremos que desplegar continuamente Storybook.

Despliegue continuo con Chromatic

Ahora que alojamos nuestro proyecto en un repositorio GitHub, podemos usar un servicio de integración continua (CI) para desplegar nuestro Storybook automáticamente. GitHub Actions es un servicio de CI gratuito integrado en GitHub que facilita la publicación automática.

Añadir una Acción de GitHub para desplegar Storybook

En la carpeta raíz de nuestro proyecto, crea un nuevo directorio que se llama .github. Luego crea otro directorio workflows dentro de él.

Crea un nuevo archivo llamado chromatic.yml como este ejemplo:

Copy
.github/workflows/chromatic.yml
# Workflow name
name: 'Chromatic Deployment'

# Event for the workflow
on: push

# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v1
      - run: yarn
        #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

💡 Para mantener el tutorial breve no mencionamos a GitHub secrets. Secretos son variables de entorno seguras proporcionadas por GitHub para que no tengas que codificar el project-token.

Hace commit la acción

Ejecuta el siguiente comando para agregar los cambios que has realizado:

Copy
git add .

Y después haz commit:

Copy
git commit -m "GitHub action setup"

Por último, haz push al repositorio remoto con:

Copy
git push origin main

Una vez que hayas configurado el GitHub Action, tu Storybook se desplegará a Chromatic cada vez que haces push. Puedes encontrar todos los Storybooks publicados en la pantalla de compilación de su proyecto en Chromatic.

Chromatic user dashboard

Haz click en la última compilación. Debería ser el de arriba.

Luego, haz click en el botón View Storybook para ver la última versión de tu Storybook.

Storybook link on Chromatic

Usa el enlace y compartélo con tus compañeros de equipo. Es útil como parte del proceso estándar de desarrollo de aplicaciones o simplemente para mostrar el trabajo💅.

Keep your code in sync with this chapter. View 59da1ac on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Testing
Aprende las formas de hacer test a los componentes de la UI
✍️ Edit on GitHub – PRs welcome!
Join the community
6,623 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI