Começando com Nx para Gerenciamento de Monorepo

Gerenciar múltiplos projetos relacionados pode rapidamente se tornar complexo. À medida que sua base de código cresce, você precisa de ferramentas que ajudem a manter consistência, compartilhar código eficientemente e otimizar tempos de build. O Nx é uma solução poderosa projetada especificamente para esses desafios.

Este guia mostrará como configurar e usar o Nx para gerenciar um monorepo efetivamente. Você aprenderá os conceitos fundamentais, criará um workspace básico e entenderá como as funcionalidades inteligentes do Nx podem melhorar drasticamente seu fluxo de trabalho de desenvolvimento.

O que é um Monorepo?

Um monorepo é uma estratégia de controle de versão onde múltiplos projetos são armazenados em um único repositório. Diferente de ter repositórios separados para cada projeto (polyrepo), um monorepo contém todos os projetos relacionados em um só lugar.

Benefícios dos Monorepos

• Compartilhamento de código - Reutilize código entre projetos sem gerenciamento complexo de pacotes
• Mudanças atômicas - Atualize múltiplos projetos em um único commit
• Ferramentas consistentes - Aplique os mesmos padrões de desenvolvimento em todos os projetos
• Dependências simplificadas - Gerencie relacionamentos de projetos em um só lugar
• Releases coordenados - Sincronize atualizações entre projetos interdependentes

No entanto, monorepos introduzem desafios como gerenciar dependências de build e escalar conforme sua base de código cresce. É aqui que o Nx entra em cena.

O que é o Nx?

Nx é um sistema de build extensível projetado especificamente para gerenciamento de monorepo. Originalmente desenvolvido para aplicações Angular, o Nx agora suporta múltiplos frameworks frontend e backend incluindo React, Vue, Node.js e mais.

Principais Funcionalidades do Nx

• Cache inteligente - Evita reconstruir código inalterado
• Gráfico de dependências - Visualiza relacionamentos entre projetos
• Comandos affected - Constrói e testa apenas o que foi impactado por suas mudanças
• Geradores de código - Cria estruturas de projeto consistentes
• Plugins extensíveis - Suporta vários frameworks e ferramentas

Configurando Seu Primeiro Workspace Nx

Vamos criar um workspace Nx básico com uma aplicação React e uma biblioteca compartilhada.

Pré-requisitos

• Node.js (v14 ou posterior)
• npm ou yarn

Criando um Workspace Nx

# Instalar o CLI do Nx globalmente (opcional)
npm install -g nx

# Criar um novo workspace
npx create-nx-workspace@latest my-workspace

Durante a configuração, você será solicitado a escolher:

1. Qual stack usar (selecione “React”)
2. Nome da aplicação (ex: “web-app”)
3. Formato de estilo (CSS, SCSS, etc.)
4. Configuração do Nx Cloud (opcional mas recomendado para projetos em equipe)

Isso cria um workspace com a seguinte estrutura:

my-workspace/
├── apps/
│   └── web-app/
├── libs/
├── nx.json
├── package.json
└── tsconfig.base.json

Entendendo a Estrutura do Workspace

• apps/ - Contém suas aplicações (frontend, backend, mobile)
• libs/ - Mantém bibliotecas de código compartilhado usadas entre aplicações
• nx.json - Configura comportamento e plugins do Nx
• package.json - Gerencia dependências para todo o workspace

Adicionando Projetos ao Seu Workspace

Agora vamos adicionar uma biblioteca de UI compartilhada e ver como o Nx gerencia dependências.

Criando uma Biblioteca Compartilhada

nx g @nx/react:lib ui-components

Isso cria uma biblioteca em libs/ui-components/ que pode ser importada por qualquer aplicação em seu workspace.

Criando um Componente na Biblioteca

nx g @nx/react:component button --project=ui-components --export

Isso gera um componente Button em sua biblioteca de UI e o exporta para uso em outros projetos.

Usando a Biblioteca em Sua Aplicação

Edite sua aplicação para usar o novo componente:

// apps/web-app/src/app/app.tsx
import { Button } from '@my-workspace/ui-components';

export function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click me</Button>
    </div>
  );
}

Executando Tarefas com Nx

O Nx fornece uma maneira unificada de executar tarefas em seus projetos.

Comandos Comuns

# Iniciar o servidor de desenvolvimento
nx serve web-app

# Construir a aplicação
nx build web-app

# Executar testes
nx test web-app

# Fazer lint do código
nx lint web-app

Executando Tarefas para Todos os Projetos

nx run-many --target=build --all

Aproveitando as Funcionalidades Inteligentes do Nx

O poder do Nx se torna aparente conforme seu workspace cresce. Vamos explorar suas funcionalidades mais valiosas.

Visualizando Dependências de Projetos

nx graph

Isso abre uma visualização interativa das dependências de seus projetos, ajudando você a entender a arquitetura do seu monorepo.

Entendendo Projetos Afetados

Quando você faz mudanças, o Nx pode determinar quais projetos são afetados:

nx affected:graph

Isso mostra apenas os projetos impactados por suas mudanças recentes.

Construindo Apenas o que Mudou

nx affected --target=build

Isso constrói apenas os projetos afetados por suas mudanças, economizando tempo significativo em pipelines de CI/CD.

Cache para Velocidade

O Nx automaticamente faz cache dos resultados de tarefas. Se você executar a mesma tarefa com as mesmas entradas, o Nx usa o resultado em cache ao invés de executá-la novamente:

# Primeira execução (executa a tarefa)
nx build web-app

# Segunda execução (usa cache)
nx build web-app

Configuração do Workspace Nx

O arquivo nx.json controla como o Nx se comporta. Aqui está uma configuração básica:

{
  "npmScope": "my-workspace",
  "affected": {
    "defaultBase": "main"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

Configurações principais:

• npmScope - O prefixo para importar bibliotecas
• affected.defaultBase - A branch git para comparar
• cacheableOperations - Tarefas que devem ser cacheadas
• dependsOn - Dependências de tarefas (ex: construir bibliotecas antes de aplicações)

Exemplo do Mundo Real: Aplicação Full-Stack

Vamos criar um exemplo mais completo com um frontend React e backend Node.js:

# Criar uma app React
nx g @nx/react:app client

# Criar uma API Node.js
nx g @nx/node:app api

# Criar uma biblioteca de tipos compartilhados
nx g @nx/js:lib shared-types

Isso te dá um workspace com:

1. Uma aplicação cliente React
2. Um servidor API Node.js
3. Uma biblioteca compartilhada para tipos comuns

Você pode executar ambas as aplicações simultaneamente:

nx run-many --target=serve --projects=api,client --parallel

Conclusão

O Nx torna o gerenciamento de monorepo direto e eficiente. Ao lidar com a complexidade de dependências de projetos e otimização de build, ele permite que você se concentre em escrever código ao invés de gerenciar a estrutura do seu repositório. Comece com uma configuração simples como mostrado neste guia, e expanda conforme seu projeto cresce.

Perguntas Frequentes