Frontend Academy · Aula

Configuração de monorepo com Turborepo

Organizar várias aplicações e pacotes partilhados num único repositório, definir um pipeline Turbo e armazenar as compilações em cache para reconstruir apenas o que foi alterado.

Aula 2 de 414 etapas

Configuração de monorepo com Turborepo é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é um monorrepositório

Um único repositório Git que abriga vários projetos (aplicativos, bibliotecas) que compartilham código. Exemplos: aplicativo web + aplicativo móvel + biblioteca de interface compartilhada + utilitários compartilhados em um único repositório. Facilita o compartilhamento de código e alterações atômicas que atravessam projetos, além de fornecer um único fluxo de CI.

Por que usar o Turborepo

O Turborepo é um sistema de compilação de alto desempenho para monorrepositórios JavaScript. Ele armazena os resultados das tarefas em cache, executa tarefas em paralelo entre os pacotes e recompila apenas o que foi alterado. Foi criado pela Vercel.

Configurando o Turborepo

Use o modelo inicial oficial.

npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

package.json com workspaces

O package.json raiz declara os workspaces — npm/yarn/pnpm cria links simbólicos para eles, permitindo que os aplicativos importem os pacotes pelo nome.

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json — o fluxo de tarefas

Defina as tarefas (build, lint, test, dev) e suas dependências entre os pacotes.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

Explicação de dependsOn

^build significa: antes de compilar este pacote, compile todas as dependências dele no workspace. Portanto, se app/web depender de packages/ui, ui será compilado primeiro.

Executando tarefas

Execute uma tarefa em todo o monorrepositório. O Turbo executa as tarefas em ordem topológica e em paralelo.

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

Armazenando resultados em cache

O Turbo cria um hash das entradas (arquivos-fonte + dependências + ambiente) e armazena os resultados em cache. Executar novamente sem alterações é instantâneo — o Turbo reproduz o resultado armazenado sem executar a tarefa outra vez.

Cache remoto

Envie o cache para um servidor remoto (Vercel Remote Cache ou uma solução hospedada por você) para que as máquinas da CI e os colegas de equipe possam compartilhá-lo — o primeiro desenvolvedor a compilar assume o custo, e todos os demais obtêm um resultado do cache.

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

Filtrando com --filter

Execute uma tarefa apenas nos pacotes correspondentes.

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

Pacotes internos

Os pacotes em packages/ importam uns aos outros pelo nome. Faça referência a eles nas dependências como "@repo/ui": "*" (com pnpm: workspace:*).

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "*",
    "@repo/utils": "*"
  }
}

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

Dicas para a CI

Use turbo run build --filter=...[origin/main] na CI para compilar apenas o que mudou desde o branch principal. Combinado ao cache remoto, o tempo de compilação cai de minutos para segundos nos pacotes que não foram alterados.

Verificação rápida

O que significa a entrada ^build na matriz dependsOn de uma tarefa do Turbo?

Responda na aula interativa

Recapitulação: Turborepo

Sistema de monorrepositórios JavaScript: estrutura apps/ + packages/ com workspaces. turbo.json define as tarefas e as relações dependsOn. ^build = compile primeiro as dependências. O cache local baseado em hash torna instantâneo o trabalho repetido. O cache remoto compartilha resultados entre a equipe e a CI. --filter seleciona subconjuntos. Use changed-since para uma CI rápida de PR.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 41
Aulas: 163

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Configuração de monorepo com Turborepo” é grátis?

Sim — o texto completo de “Configuração de monorepo com Turborepo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Configuração de monorepo com Turborepo”?

Organizar várias aplicações e pacotes partilhados num único repositório, definir um pipeline Turbo e armazenar as compilações em cache para reconstruir apenas o que foi alterado. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Configuração de monorepo com Turborepo”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Design atómico: átomos, moléculas e organismos
Configuração de monorepo com Turborepo
Microfrontends: Module Federation
Estrutura de pastas baseada em funcionalidades

← Voltar para Frontend Academy