Criando um monorepositório Nx com aplicativos React
Estruture um espaço de trabalho Nx, adicione aplicativos React e entenda o grafo do projeto.
Criando um monorepositório Nx com aplicativos React é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
Por que utilizar o Nx?
O Nx é um sistema inteligente de compilação para monorrepositórios. Ele oferece execução de tarefas baseada no que foi afetado (compila e testa apenas o que mudou), armazenamento em cache (nunca executa novamente tarefas inalteradas) e geradores para estruturar aplicativos e bibliotecas.
Criação de um novo espaço de trabalho Nx
Estruture um novo espaço de trabalho Nx pré-configurado para React.
# Create workspace:
npx create-nx-workspace@latest myorg --preset=react-monorepo
# or for Next.js:
npx create-nx-workspace@latest myorg --preset=nextEstrutura do espaço de trabalho
O Nx organiza o código em apps/ (aplicativos implantáveis) e libs/ (bibliotecas compartilhadas). Cada projeto tem seu próprio project.json com destinos de tarefas.
myorg/
apps/
web/ # React SPA
admin/ # Admin React SPA
api/ # NestJS backend
libs/
ui/ # shared UI components
data-access/ # data fetching hooks
utils/ # shared utilities
nx.json # workspace config
package.json # single package.jsonAdição de um aplicativo React
Utilize o gerador de React do Nx para adicionar um novo aplicativo com toda a configuração previamente conectada.
# Add a new React app:
npx nx generate @nx/react:app customer-portal
# Add a Next.js app:
npx nx generate @nx/next:app marketingExecução de tarefas
Execute compilação, testes, análise estática e inicialização para projetos individuais ou para todos os projetos.
# Serve a specific app:
npx nx serve web
# Build all apps:
npx nx run-many --target=build --all
# Test a specific library:
npx nx test uiGrafo do projeto
nx graph abre uma visualização interativa de todos os aplicativos e bibliotecas e suas dependências — veja quais projetos dependem de quais bibliotecas.
npx nx graphArmazenamento em cache do Nx
O Nx armazena localmente os resultados das tarefas em cache. Executar novamente uma tarefa inalterada utiliza o cache instantaneamente. O Nx Cloud estende o armazenamento em cache a um cache remoto compartilhado entre os membros da equipe e a integração contínua.
# First run: builds and caches
npx nx build web # ~30s
# Second run (no changes): cache hit
npx nx build web # <1s — served from cachePipelines de tarefas
Defina as dependências das tarefas em nx.json. Executar build executa automaticamente primeiro build para todas as dependências upstream.
// nx.json
{
"targetDefaults": {
"build": {
"dependsOn": ["^build"], // run dependency builds first
"cache": true
},
"test": {
"cache": true
}
}
}Rótulos para aplicação de regras
Atribua rótulos aos projetos (por exemplo, scope:ui, type:app) e use regras do ESLint para impedir que os aplicativos importem código interno de outros aplicativos.
// project.json
{
"tags": ["scope:web", "type:app"]
}
// .eslintrc.json
{
"rules": {
"@nx/enforce-module-boundaries": ["error", {
"depConstraints": [
{ "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
]
}]
}
}Aliases de caminhos do TypeScript
O Nx configura automaticamente tsconfig.base.json com aliases de caminhos, para que você importe bibliotecas compartilhadas como @myorg/ui em vez de usar caminhos relativos profundos.
// tsconfig.base.json (auto-generated)
{
"compilerOptions": {
"paths": {
"@myorg/ui": ["libs/ui/src/index.ts"],
"@myorg/utils": ["libs/utils/src/index.ts"]
}
}
}
// Usage in apps:
import { Button } from '@myorg/ui';Verificação rápida
O que o comando nx affected --target=build faz em um monorrepositório Nx?
Recapitulação
Crie um espaço de trabalho Nx com create-nx-workspace. Use nx generate para aplicativos e bibliotecas, nx serve/build/test para tarefas e nx affected na integração contínua para processar apenas os projetos alterados. O armazenamento em cache garante que tarefas inalteradas retornem instantaneamente.
Perguntas Frequentes
A aula “Criando um monorepositório Nx com aplicativos React” é grátis?
Sim — o texto completo de “Criando um monorepositório Nx com aplicativos React” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Criando um monorepositório Nx com aplicativos React”?
Estruture um espaço de trabalho Nx, adicione aplicativos React e entenda o grafo do projeto. Você pratica React 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 React Academy?
Nenhuma experiência prévia é necessária. React 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 1 de 4.
Quanto tempo leva a aula “Criando um monorepositório Nx com aplicativos React”?
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 React Academy?
Sim. Cada aula de React 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
- Criando um monorepositório Nx com aplicativos React
- Bibliotecas compartilhadas e pacotes internos
- Comandos Nx Affected e armazenamento em cache
- Geradores de código e automação do espaço de trabalho