Nx FullStack: Angular + NestJS

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

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:

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

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]

nx serve ng

Instalando o NestJS no workspace

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

npm install @nrwl/nest --save-dev

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

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]

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:

{
  "/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”:

{
  ...
  "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:

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
☝️ Me siga para receber novos conteúdos e artigos!

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