React: desenvolvendo design systems modulares com Turborepo

Montando a fundação - Apresentação

Boas-vindas a mais um curso de React na plataforma da Alura! Eu sou o Pedro, instrutor da escola de Front-end, e irei te acompanhar ao longo desta jornada.

Audiodescrição: Pedro se descreve como um homem branco, de cabelos castanho-escuros curtos e lisos, barba castanho-escura, e olhos castanho-escuros. Ele usa piercings no nariz, veste uma camisa preta, e está sentado em um ambiente de parede clara, iluminada em gradiente rosa e azul ao fundo, com quadros de moldura preta e suportes para instrumentos pendurados, e uma estante branca à direita do instrutor contendo enfeites diversos.

O que vamos aprender?

Neste curso, abordaremos Storybook, monorepositório com Turborepo, React, TypeScript e publicação de componentes. Para isso, vamos trabalhar com um pacote que será publicado no npm, que será um botão baseado em um design system chamado Alfabit.

Iremos desde a etapa inicial até a publicação do componente e sua utilização em um processo. Também utilizaremos o Storybook, onde teremos a documentação interativa desse componente.

Por exemplo, será possível alterar campos para exibir mensagens e interagir em tempo real, trocando cores e explorando as funcionalidades do Storybook.

Este será o início da nossa jornada no mundo dos design systems.

Além disso, após a publicação e a exploração da documentação do Storybook, criaremos uma aplicação de teste para utilizar a versão do botão publicada no npm. Sendo assim, testaremos o botão tanto no Storybook quanto em uma aplicação de teste, utilizando estratégias diferentes.

Quais são os requisitos?

Este curso aborda temas mais avançados, como monorepositório e publicação de componentes. Portanto, é importante ter conhecimento prévio sobre estilização, funcionamento de componentes em JSX, e scripts do Node para acompanhar o curso sem dificuldades.

Conclusão

Se alguma informação não estiver nítida ou faltar algum conteúdo que você ainda não domine, recomendamos consultar a lista de conteúdos recomendados, ou utilizar o fórum e Discord para compartilhar ideias com outras pessoas e tirar suas dúvidas.

Na sequência, daremos início ao curso. Nos encontramos no próximo vídeo!

Montando a fundação - Adicionando o Turborepo

Neste vídeo, começaremos a criar a fundação do nosso design system.

Adicionando o Turborepo

Verificando a versão do Node

Para começar, vamos abrir uma aba no terminal e verificar a versão do Node.

node -v

Retorno do comando:

v21.5.0

Atualmente, a versão estável do Node é a 21.5.0, a qual utilizamos no momento. Recomendamos que você utilize a mesma versão para evitar problemas durante a execução das atividades deste curso.

Instalando a ferramenta pnpm

Além disso, precisaremos instalar o gerenciador de pacotes pnpm e a dependência do pacote turbo, que serão duas ferramentas utilizadas durante o desenvolvimento inicial.

A instalação do pnpm é feita com o seguinte comando:

npm install -g pnpm

O pnpm é um gerenciador de pacotes do Node com funcionalidades adicionais úteis para cache e workspaces. Uma vez instalado o pnpm, o outro pacote necessário é o turbo, mas faremos a instalação dele posteriormente.

Criando o diretório alfabit-monorepo

Após instalar o pnpm e verificar a versão do Node utilizada, vamos criar um diretório com o comando mkdir no terminal. Caso prefira, é possível criar uma nova pasta manualmente. Chamaremos esse diretório de alfabit-monorepo.

mkdir alfabit-monorepo

Observação: usamos essa terminologia para indicar que o projeto faz parte de um ecossistema maior, como o Storybook e os design tokens.

Nesse caso, criaremos um monorepositório para aproveitar a estrutura em todos os desafios que surgirem à medida que o projeto evolui. Após criar o diretório do projeto com o comando mkdir, podemos navegar até ele com o comando a seguir:

cd alfabit-monorepo

Criando o arquivo package.json

Na sequência, criaremos um arquivo chamado package.json, utilizando o comando pnpm init, responsável por criar um package.json limpo, com algumas informações padrão, o que permite a instalação de pacotes do Node futuramente.

pnpm init

package.json:

{
  "name": "alfabit-monorepo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Acessando a documentação do Turborepo

Agora, vamos acessar a documentação do Turborepo.

A documentação está em inglês, mas pode ser traduzida pelo Google Tradutor.

Na introdução da documentação, é explicado o que o Turborepo tenta resolver, o que está por trás dele, e suas diferenças em relação a outras ferramentas, como Nx e Lerna.

O grande diferencial do Turborepo é seu sistema de cache rápido, que acelera builds, testes e o ambiente de desenvolvimento.

Adicionando o Turborepo a um repositório existente

Com a documentação aberta, no menu lateral esquerdo, vamos navegar até a seção Add to an existing repository, onde aprenderemos a adicionar o Turborepo a um repositório existente.

Existem três opções de instalação disponíveis:

• npm;
• yarn;
• E pnpm.

Nesse caso, vamos utilizar o pnpm e adicionar o turbo globalmente com o comando abaixo:

pnpm add turbo --global

Após a instalação global, precisamos instalar o turbo no repositório, trocando a flag --global por --save-dev. Como o alfabit-monorepo ainda não é um workspace, vamos remover a flag --workspace-root indicada na documentação e realizar a instalação apenas com --save-dev.

Mais adiante, iremos configurar o workspace manualmente.

pnpm add turbo --save-dev

Conclusão

Uma vez adicionada a dependência de desenvolvimento do turbo, o próximo passo é criar um arquivo de configuração do turbo, chamado turbo.json, que será o coração dos comandos do turbo no projeto. Porém, abordaremos isso na sequência.

Aguardamos você na próxima etapa para darmos continuidade à implementação e configuração do nosso monorepositório utilizando o Turborepo. Até o próximo vídeo!

Montando a fundação - Configurando o turbo.json

Neste vídeo, para finalizarmos a etapa inicial da configuração do Turborepo, vamos criar um novo arquivo chamado turbo.json na raiz do nosso monorepositório.

Configurando o arquivo turbo.json

Utilizando a documentação do Turborepo

Começaremos copiando um código de exemplo da documentação do Turborepo:

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "persistent": true,
      "cache": false
    }
  }
}

Não trabalharemos com Next.js neste curso; iremos criar o storybook com React. No entanto, usaremos como exemplo o código de turbo.json disponibilizado na documentação e, posteriormente, faremos as modificações necessárias.

O que nos interessa no código da documentação é o $schema, que irá pegar todas as configurações do arquivo schema.json — um objeto do Turborepo com várias configurações pré-definidas.

As tasks serão construídas à medida que tivermos projetos. Por enquanto, não temos nenhum projeto, mas podemos adicionar build, check-types e dev conforme evoluirmos os projetos.

Observação: quando disponibilizamos o repositório, adicionamos o arquivo .gitignore para não subir a pasta node_modules/, e usamos o comando git init para subir no GitHub.

.gitignore:

node_modules/
.DS_Store

Comando para subir o repositório no GitHub:

git init

Criando o arquivo turbo.json

Com o trecho de código do Next.js copiado, retornaremos ao editor de texto. Na raiz do projeto, vamos clicar com o botão direito sobre o menu lateral esquerdo e selecionar a opção "New File…".

Criaremos um novo arquivo chamado turbo.json e adicionaremos o código copiado do navegador.

turbo.json:

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "persistent": true,
      "cache": false
    }
  }
}

Registrando os scripts no arquivo package.json

Se tentarmos executar comandos como turbo dev, turbo check-types, turbo build no terminal, eles não funcionarão, pois ainda não há nenhum projeto implementado. Além disso, em package.json, não temos esses comandos registrados.

Para solucionar essa questão, começaremos a registrar os scripts no arquivo package.json. Primeiramente, vamos apagar o registro do comando test.

Feito isso, registraremos o primeiro script dev com o comando turbo dev, importante para rodar os projetos no modo de desenvolvimento.

Na sequência, faremos o registro do script build com o comando turbo build, para "buildar" o projeto e ter os arquivos para deploy.

Finalizaremos com o script check-types, recebendo o comando turbo check-types.

package.json:

// código omitido

"scripts": {
  "dev": "turbo dev",
  "build": "turbo build",
  "check-types": "turbo check-types"
},

// código omitido

Seguindo a lógica de script de objeto, podemos testar o comando abaixo:

pnpm run dev

Ao executar pnpm run dev, ele executa o comando turbo dev, chamando o Turbo 2.1.3.

No entanto, é retornado o erro "missing packageManager field in package.json", pois ainda não temos informações do gerenciador de pacotes em package.json.

O repositório está cru, sem projetos ou dependências. Portanto, precisamos adicionar workspaces para que o repositório alfabit-monorepo funcione como um monorepositório efetivamente.

Ajustando o arquivo .gitignore

Adicionamos o arquivo turbo.json ao projeto, mas falta informar ao Turborepo que este é um monorepositório. Assim, ele tenta executar, mas não há projetos e ele não sabe que é um monorepositório. Portanto, a configuração está com problemas.

Para resolver, vamos adicionar no arquivo .gitignore o diretório .turbo/, para não subir a pasta de configuração do Turbo, que contém cookies e cache.

.gitignore:

node_modules/
.DS_Store
.turbo

Ajustando o código de turbo.json

Feito isso, vamos substituir a parte de outputs, com comandos do Next.js, por dist, que é o padrão para projetos que não usam Next.js.

turbo.json:

// código omitido

"build": {
  "dependsOn": ["^build"],
  "outputs": [".dist/**", "!.dist/cache/**"]
},

// código omitido

Normalmente, quando rodamos um build, ele gera o output como build ou dist (abreviação de distribution, que é "distribuição" em inglês). Com essa substituição, garantimos o padrão de um projeto que não é Next.js. Ao final, podemos salvar o arquivo.

Conclusão

Precisamos nos aprofundar em workspaces para fazer o monorepositório funcionar, inicializar o Storybook, e visualizar a documentação e a criação de componentes em um design system.

Na próxima aula, estudaremos sobre workspaces e sobre a criação do monorepositório para o design system da Alfabit. Nos encontramos na sequência!

Sobre o curso React: desenvolvendo design systems modulares com Turborepo

O curso React: desenvolvendo design systems modulares com Turborepo possui 115 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Montando a fundação
• Adicionando nossos workspaces
• Criando nosso primeiro componente
• Preparando o componente para publicação
• Testando nosso componente