Nx FullStack: Angular + NestJS
Tags: angular, nx, nestjs, webdev
Published: 2024-01-31 19:20:39

Este artigo apresenta um guia passo a passo para integrar Angular e NestJS em um projeto Nx. 

Vamos começar estabelecendo um projeto Angular e, em seguida, adicionar o NestJS. Ao final, você terá um sistema integrado, com frontend e backend comunicando-se, destacando a eficiência e a praticidade de unir estas tecnologias no Nx.

Caso prefira assistir o vídeo da implementação, [acesse aqui](https://youtu.be/jIiu8X6lHiw)

## Criando o workspace Nx com Angular

| Para projetos já existentes, certifique-se de que o Nx está atualizado e funcionando conforme esperado.

Vamos criar um workspace Nx, usando o seguinte comando:

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

Nas opções de Stack, **iremos utilizar o angular e Integrated Monorepo**.
Segue a imagem abaixo com as opções selecionadas

![A imagem mostra as opções escolhidas pela pessoa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb5wmjuo2jnoiq5trb5t.png)

Após a instalação, entraremos no nosso projeto (cd [nome-pasta]). Na pasta apps, estará o nosso projeto angular (nomeado de "ng") 

Para executar o projeto, use o comando: nx serve [nome-projeto]

```cmd
nx serve ng
```

## Instalando o NestJS no workspace

Nosso primeiro passo é adicionar o plugin NestJS para o Nx. Execute o seguinte comando:

```cmd
npm install @nrwl/nest --save-dev
```

Agora, iremos gerar uma nova aplicação para o NestJS dentro do nosso Monorepo, utilizando o comando abaixo:

```cmd
nx generate @nrwl/nest:application [name]
```

| Troque [name] para o nome que você deseja usar para a aplicação. Neste artigo, nomeamos para nest

Após isso, entraremos no nosso projeto. Na pasta apps, e agora, estará o nosso projeto angular (nomeado de "ng") e o projeto NestJS (nomeado de "nest")

Para executar o projeto, use o comando: nx serve [nome-projeto]

```cmd
nx serve nest
```

Parabéns 🎉. Agora temos o nosso frontend e backend no ambiente Nx e ambos funcionando! Agora, para fecharmos com chave de ouro, iremos integrar-los!

## Integrando o NestJS com o Angular usando o Proxy

Para permitir a comunicação do seu app Angular com o NestJS durante o desenvolvimento, definiremos uma configuração de proxy. No diretório do app Angular(“ng” neste exemplo), entre na pasta src, e em seguida, crie um arquivo chamado proxy.conf.json e adicione o seguinte conteúdo:

```json
{
  "/api": {
    "target": "http://localhost:[PORT]",
    "secure": false
  }
}
```

Substitua [PORT] pela porta em que seu app NestJS é executado.

| Ao usar um proxy, você pode fazer requisições para um caminho relativo no próprio app Angular e evitar problemas de CORS. Além disso facilita o desenvolvimento e testes.

Após definir o Proxy, dentro do seu app Angular, entre no arquivo “project.json” e insira a configuração do proxy à chave “options” do “serve”:

```json
{
  ...
  "targets": {
    ...
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
        "proxyConfig": "apps/[angular-app-name]/src/proxy.conf.json"
      },
      ...
    }
  },
}
```

Troque [angular-app-name] com o nome do seu app Angular.

Agora você pode começar a adicionar seus endpoints ao app NestJS e acessa-los no app Angular! 🎉

## Testando a integração

Para testar a sua integração, você precisa estar rodando tanto o back quanto o front e em seguida implementar o trecho de código abaixo:

```ts
export class AppComponent implements OnInit {
  private http = inject(HttpClient);
  title = 'ng';

  ngOnInit() {
    this.http.get('/api').subscribe((data) => {
      console.log(data);
    });
  }
}
```
Abra o developer tools do seu browser, e em network, verifique se a chamada foi feita com sucesso! Em caso de sucesso, você tem uma aplicação FullStack pronta para uso!

## Conclusão

Com a conclusão deste guia, você agora tem um ambiente Nx configurado com Angular para o frontend e NestJS para o backend, ambos integrados e funcionando harmoniosamente. Este setup oferece uma plataforma robusta e eficiente para o desenvolvimento de aplicações fullStack. Segue algumas vantagens interessantes:

1. **Monorepo**: A utilização do Nx como monorepo facilita o gerenciamento de múltiplas aplicações e bibliotecas, mantendo tudo centralizado e acessível.
   
2. **Desenvolvimento Coeso**: A integração entre Angular e NestJS no mesmo ambiente proporciona uma experiência de desenvolvimento coesa e simplificada, com ferramentas e configurações compartilhadas.

3. **Proxy para Desenvolvimento Local**: Configurar um proxy para o app Angular resolve problemas comuns de CORS durante o desenvolvimento local e permite que requisições sejam feitas como se tudo estivesse hospedado em um único servidor.

4. **Eficiência na Comunicação**: A capacidade de fazer requisições a partir do Angular para o NestJS de maneira eficiente e segura melhora significativamente a fluidez da comunicação entre frontend e backend.

5. **Teste e Depuração Facilitados**: Rodar ambos, frontend e backend, em um ambiente integrado facilita o teste e a depuração, permitindo que você veja as mudanças em tempo real e ajuste rapidamente conforme necessário.

Parabéns por chegar até aqui! 🎉 Espero que este artigo tenha lhe ajudado! 
Com a infraestrutura básica configurada, o próximo passo é explorar e adicionar funcionalidades específicas ao seu app, tanto no frontend quanto no backend.

Atenciosamente,
[Matheus Rian](https://www.linkedin.com/in/matheus-riann/)
☝️ Me siga para receber novos conteúdos e artigos!

Repositório com código fonte: https://github.com/NG-Brasil/Nx-FullStack