Implementar Storybook

Neste tutorial o Storybook foi executado na máquina local. Poderá ser necessária a partilha com o resto da equipa, em particular com membros considerados não técnicos. Felizmente, é bastante fácil implementar o Storybook online.

Foram seguidos os passos para implementar os teste com Chromatic, tal como mencionado anteriormente?
Então as estórias já se encontram implementadas!🎉 O Chromatic indexa-as e segue-as ao longo das ramificações feitas e dos commits Pode saltar-se este capítulo e seguir para conclusão.

Exportação sob a forma de uma app estática

Para implementar o Storybook será necessário ser exportado como uma aplicação estática para a web. Esta funcionalidade já está implementada, somente será necessária a sua ativação através da adição de um script ao ficheiro package.json.

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -s public -o storybook-static"
  }
}

E pode agora construir-se o Storybook via yarn build-storybook, o que irá popular a pasta storybook-static com esta versão.

Implementação contínua

Pretende-se que seja partilhada a última versão dos componentes á medida que o código é produzido. Para tal é necessário que o Storybook também o seja. Dependendo do GitHub e Netlify para implementar o site estático. Será usado o plano gratuito.

GitHub

Primeiro, será necessário configurar o Git localmente. Se este tutorial estiver a ser seguido, poderá saltar-se para a configuração de um repositório no GitHub.

$ git init

Adicionam-se os ficheiros ao primeiro commit.

$ git add .

Agora pode ser feito o commit dos ficheiros.

$ git commit -m "taskbox UI";

Navegue até ao GitHub e configure aqui um repositório. E vai ser atribuído o nome “taskbox”.

Configuração GitHub

No novo repositório de código, copia-se o URL original deste, e adicionado ao projeto com o seguinte comando:

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

Finalmente injeta-se o repositório no GitHub

$ git push -u origin master

Netlify

O Netlify possui um serviço de implementação continua, o que permite a implementação do Storybook sem ser necessária a configuração de uma IC (CI na forma nativa) própria.

Se for usado um IC (CI na forma nativa) na empresa, é necessário adicionar um script de implementação para que seja feito o upload da pasta storybook-static para um serviço de hospedagem estático, tal como o S3.

Criação da conta no Netlify, em seguida “create site”.

Criação Site Netlify

Em seguida click no botão GitHub para ser feita a ligação do Netlify ao GitHub. O que permite o acesso ao repositorio remoto Taskbox.

Seguida da seleção do repositório da lista de opções.

Conexão Netlify para o repositorio

É feita a configuração no Netlify ao selecionar-se o comando apropriado para executar no IC(CI na forma nativa) e qual a pasta de output. Como ramo, seleciona-se master. Pasta storybook-static. Comando yarn build-storybook.

Configurações Netlify

Em seguida é feita a submissão do formulário, para compilar o código no ramo master do repositório taskbox.

Quando isto terminar, é apresentada uma mensagem de confirmação no Netlify, juntamente com um link para o Storybook da Taskbox online. Se o tutorial estiver a ser seguido o Storybook estará online tal como.

Implementação Storybook Netlify

Com isto terminou a implementação continua do Storybook! Pode ser agora partilhado através de um link.

Isto é bastante útil, para a revisão visual, como parte do processo por defeito de desenvolvimento, ou para ser possível gabar o nosso trabalho 💅.

Next Chapter
Contribuições
Ajudem na partilha do Storybook com o mundo