Desenvolva Aplicações Full-Stack com Angular CLI e Nx
Tags: angular, monorepo, nx
Published: 2022-01-19 01:28:15

---
title: Desenvolva Aplicações Full-Stack com Angular CLI e Nx
published: true
date: 2020-01-24 02:51:44 UTC
tags: angular,monorepo,nx
canonical_url: https://ricardo-mello.medium.com/desenvolva-aplica%C3%A7%C3%B5es-full-stack-com-angular-cli-e-nx-2f8dce62975f
---

#### Um guia para o seu próximo "new project"

![](https://cdn-images-1.medium.com/max/1024/1*5d8C64X4dJaJe422jJbgmA.png)

Quando trabalhamos com desenvolvimento em geral, sabemos que cada "new project" vem acompanhado de uma série de decisões estruturais. No caso do front-end, que é bem menos maduro que o back-end, surgem novos conceitos, bibliotecas e frameworks o tempo todo. Se Angular for a sua opção, eu listei alguns pontos importantes [nesse artigo](https://dev.to/ricmello/como-estruturar-o-seu-front-end-com-angular-29b5).

Saber dosar esses conceitos de forma eficiente exige uma visão bem ampla das tecnologias versus as necessidades do negócio. Você pode passar meses testando patterns para encontrar o mais adequado à sua realidade ou você pode seguir padrões bem estabelecidos pela comunidade e que foram testados em grandes empresas, mas você geralmente tem que pesquisar bastante até encontrar esses padrões.

No meu primeiro grande "new project", eu escolhi a primeira opção: testei vários padrões diferentes, bibliotecas diferentes, frameworks diferentes, conceitos diferentes, etc… Em resumo, um benchmark que durou em torno de 30 dias entre multirepos, monorepos, react cross-platform, angular cross-platform, vue.js, ionic, híbrido de react com angular e por aí vai.

Eram tantas opções que eu realmente fiquei confuso em alguns momentos. Mas em meio a esse monte de pesquisa eu encontrei um cara chamado [Nx](https://nx.dev/angular).

### O Nx

Esse cara é uma coleção de schematics que adiciona várias funcionalidades ao Angular CLI. Além disso, ele traz alguns conceitos para o desenvolvimento como um todo. Conceitos esses que foram inspirados no modo Google de se trabalhar e já foram validados por várias empresas de mercado.

![](https://cdn-images-1.medium.com/max/1024/1*kjvfMXRTdJIYGqImXcobag.png)<figcaption>Algumas "pequenas" empresas que usam o Nx. Fonte: <a href="https://nx.dev/angular">https://nx.dev</a></figcaption>

#### Workspace

O Workspace do Nx consegue comportar **toda a sua stack** desde que você utilize tecnologias compatíveis. Pra você ter uma ideia, atualmente é possível criar aplicações Angular + Nest ou React + Express em um mesmo workspace, e compartilhar códigos entre elas usando bibliotecas TypeScript.

Por exemplo, o template `angular-nest` gera uma aplicação Angular, uma API em Nest e uma biblioteca TypeScript contendo as interfaces para que front-end e back-end consumam sempre o mesmo modelo e as alterações sejam refletidas em ambas as aplicações.

As tecnologias suportadas estão [nesse link](https://nx.dev/angular/fundamentals/use-modern-tools) (Angular) ou [nesse link](https://nx.dev/react/fundamentals/use-modern-tools) (React).

#### Ferramentas

![](https://cdn-images-1.medium.com/max/1024/1*uZKUYKiVqBwBmPi2R-oxWA.png)

Além dos frameworks citados, o Nx traz consigo uma série de ferramentas para o desenvolvimento. Se você trabalha com Angular, que é o meu caso, sabe que um projeto padrão vem com Karma/Jasmine para testes unitários e o Protractor para os e2e.

Você também consegue escolher qual ferramenta usar via CLI sem a necessidade de nenhuma configuração adicional. Por padrão, ele traz o Jest para testes unitários e o Cypress para e2e. Além disso, o Prettier, que é um padrão super bem estabelecido de formatação, já vem configurado por padrão.

#### Affected

![](https://cdn-images-1.medium.com/max/1024/0*54UEzwiPb821TRLB.png)<figcaption>Grafo de dependências do Affected. Fonte: <a href="https://nx.dev/angular/guides/monorepo-affected#affected">https://nx.dev/angular/guides/monorepo-affected</a></figcaption>

O affected é uma ferramenta incrível para o fluxo de desenvolvimento como um todo, mas em especial a integração contínua.

Nele, você consegue comparar o diff de dois commits (geralmente o HEAD da sua branch com a dev ou a master) e verificar quais aplicações ou bibliotecas foram alteradas e/ou afetadas. Uma aplicação é considerada afetada quando ela consome alguma biblioteca (ou aplicação) que foi alterada. Sendo assim, o processo de build dela também precisa ser executado pra saber se algo foi quebrado. Isso facilita e muito o CI, porque você consegue ter um único build gerenciando todas as suas aplicações, além de builds incrementais.

#### Angular Console

![](https://cdn-images-1.medium.com/max/952/0*JXY5fJp5pH-lw5tS.png)<figcaption>Angular Console Logo</figcaption>

O [Angular Console](https://angularconsole.com/) é uma extensão do VS Code que fornece uma interface gráfica para executar desde os comandos mais comuns como o `ng serve` ou `ng test`, até os mais complexos como o `ng generate` ou o `ng add`.

Eu gosto bastante do terminal e das IDEs da JetBrains então acabei não me adaptando, mas o Angular Console é uma ótima opção tanto pra quem está começando e ainda não conhece todos os comandos de cara, quanto pra quem já trabalha há bastante tempo mas não lembra todos os parâmetros de todos os comandos.

### Criando o seu próprio Workspace

Depois de escrever tanto sobre a ferramenta, é hora de criar o seu workspace. Para isso, basta ter o npm (versão 5.2 ou superior) instalado e executar o seguinte comando no terminal:

```
npx create-nx-workspace@latest myorg
```

E o CLI vai te perguntar qual workspace deve ser criado:

![](https://cdn-images-1.medium.com/max/1024/1*wxlLb2KX_KB2LNM_VfMu-Q.png)<figcaption>Opções de Workspace exibidas no terminal</figcaption>

Para o nosso exemplo, vamos usar o template `angular-nest`, que monta o exemplo que eu citei: Uma aplicação Angular, uma Api Nest e uma biblioteca com as interfaces.

Depois disso, basta preencher o nome da aplicação (eu escolhi `my-app`) e o formato dos arquivos de estilo que ele irá gerar um workspace com essa estrutura:

![](https://cdn-images-1.medium.com/max/704/1*Lpd6NcTkCjbnhHsljBlvLg.png)

As aplicações ficam na pasta `apps`, então nela você vai ter tanto a `api` em Nest quanto o `my-app`, que é a aplicação Angular.

Já as bibliotecas ficam em `libs`. Como criamos um workspace full-stack, também é gerada uma biblioteca com as interfaces usadas pela `api` e pelo `my-app`.

#### Executando as aplicações

Agora, basta rodar `ng serve my-app` e `ng serve api`, depois abrir o navegador em `http://localhost:4200` e ver a mensagem de boas vindas, com direito a um JSON vindo direto da API sendo exibido:

![](https://cdn-images-1.medium.com/max/1024/1*pHxSvwqTuGomGgCzCgURSg.png)

#### Testes Unitários

Ao executar os testes usando `ng test`, você vai ver que eles são executados com o Jest:

![](https://cdn-images-1.medium.com/max/1024/1*m3S6buHdvWSfxXzE3z5Zsg.png)

#### E2E

E ao executar o `ng e2e` para o teste end-to-end, o cypress irá executá-los:

![](https://cdn-images-1.medium.com/max/1024/1*UEW7odhnhVLZRPC_8fvr0w.png)

### Conclusão

Essa é uma introdução ao Nx e um pouco do que ele pode fazer sem a necessidade de configurações adicionais no projeto. São padrões bem estabelecidos e validados em grandes empresas, e que já foram testados e aprovados pelo meu time também. Você pode ver o resultado da nossa jornada usando monorepo [aqui](https://dev.to/ricmello/um-ano-de-monorepo-o-que-aprendemos-e-porque-voce-deveria-usa-lo-30me).

---

E aí, curtiu? Quer saber mais sobre Nx e monorepos? Se houver qualquer coisa que eu possa fazer pra tornar esse artigo melhor, comente ou envie uma mensagem privada. Feedbacks são sempre super bem vindos.