get-started.md

title	Tutorial Storybook para o Svelte
tocTitle	Get started
description	Configure o Storybook em seu ambiente de desenvolvimento

Storybook executa paralelamente à aplicação em modo de desenvolvimento. Ajuda a construir componentes de interface de usuário (UI) isolados à lógica de negócio e contexto da aplicação. Esta edição do tutorial Introdução ao Storybook é para Svelte; outras edições existem para Vue, Angular, React, React Native e Ember.

Set up Svelte Storybook

Precisaremos seguir alguns passos para configurar o processo de compilação em nosso ambiente de desenvolvimento. Para começar, queremos utilizar degit para configurar nosso sistema de compilação. Utilizando este pacote, é possível obter "modelos" (aplicações parcialmente construídas com configurações padrão) para ajudar a acelerar o fluxo de desenvolvimento da aplicação.

Execute os seguintes comandos:

# Criar nossa aplicação:
npx degit chromaui/intro-storybook-svelte-template taskbox

cd taskbox

# Instalar dependências
yarn

💡 Este modelo contém estilos, recursos e configurações essenciais, todos necessários para esta versão do tutorial.

Agora é possível verificar que os diversos ambientes de nossa aplicação estão funcionando corretamente:

# Executar o testador (Jest) em linha de comando:
yarn test

# Iniciar o explorador de componentes na porta 6006:
yarn storybook

# Executar a aplicação frontend em si na porta 5000:
yarn dev

As três modalidades de aplicação frontend: testes automatizados (Jest), desenvolvimento de componentes (Storybook), e a aplicação em si.

Dependendo de qual parte da aplicação está sendo modificada, pode ser desejável executar um ou mais destes simultaneamente. Como o foco atual é criar um único componente de interface de usuário, será executado apenas Storybook

Submeter suas mudanças

Nesse estágio já é seguro adicionar os arquivos a um repositório local. Execute os seguintes comandos para inicializar um repositório local, adicione e submeta (commit) as mudanças feitas até o momento.

git init

Seguido por:

git add .

Então:

git commit -m "first commit"

Finalmente:

git branch -M main

Vamos começar a construção de nosso primeiro componente!