Nx + Angular + NestJS (Cover Image)
June 13, 2020

Nivel: Inicial

Creando un Proyecto Base con Nx + Angular + NestJS

AngularWebNxMonoreposNestJS

Requerimientos

  • Es recomendable, pero no limitable, tener conocimientos sobre Angular, NestJS, así como también leer un poco sobre qué son los monorepos, si aún no lo sabes, puedes leer al respecto en este artículo.

  • Si no tienes conocimientos sobre nx, puedes consultar la documentación oficial aquí, y tampoco dejes de ver este video. De igual forma, si aún no lo tienes instalado puedes hacerlo ejecutando npm install -g @nrwl/cli en tu terminal.

En esta publicación no voy a incluir la integración del Base de Datos, ya que prefiero abstraerlo en otra publicación, principalmente porque en ese punto puedes escoger entre una no relacional o una relacional, según prefieras :). ¡Mantente atent@ a mis próximas publicaciones!.

Sistema y Herramientas

  • Este proyecto fué hecho en MacOS Mojave version 10.14.6

  • IDE: Webstorm 2020.1

Creando nuestro proyecto base

Lo primero que vamos a hacer es crear un proyecto base con nx, para ello debemos ejecutar el siguiente comando en nuestra terminal: npx create-nx-workspace@latest

Workspace name

Es el nombre de nuestra organización, en este caso lo llamé wallapp ya que es el nombre que escogí para un proyecto personal sobre finanzas, y el que usaré de ejemplo para próximas publicaciones, tú puedes escoger el nombre que desees, pero ten en cuenta, este no es el nombre de tu aplicación web, por ejemplo, en mis proyectos, como mi blog personal, el nombre de la organización es mayrascript, pero la aplicación web yo decidí llamarla mayrascript-web o pude haberla llamado mayrascript-blog o quizás mayrascript-landing, depende del propósito de la aplicación. Yo coloqué esos nombres pensando un poco en el futuro de mi organización dado que si deseara crear una aplicación administrable para mi blog, puedo crear otra llamada mayrascript-admin. Esa es básicamente una convención personal para diferenciar los proyectos dentro de una organización según su propósito, sin embargo puedes manejar la convención que prefieras, si hasta el momento no hay una 🙂.

Monorepo - Workspace Name

Monorepo - Workspace Name

Seleccionando el workspace

Como ya lo habrás notado, puedes escoger un proyecto vacío o puedes seleccionar los frameworks que necesites. No te preocupes si en el futuro deseas agregar más proyectos a tu workspace, podrás hacerlo con el cli de nx.

Monorepo - Selecting framework(s)

Monorepo - Selecting framework(s)

Application name

En esta sección escribiremos el nombre para nuestro proyecto frontend, yo escogí wallapp-web basada en mi convención personal.

Monorepo - Application name

Monorepo - Application name

Stylesheet format

Luego podemos escoger el formato de estilo de nuestra preferencia, tal cual como lo hacemos normalmente en Angular.

Monorepo - Selecting Stylesheet format

Monorepo - Selecting Stylesheet format

Y para finalizar la creación del workspace nos pregunta si queremos compartir datos para análisis del Angular Team, en mi caso prefiero aceptarlo, sin embargo escoge la opción que prefieras.

Monorepo -  Share data with Google Analytics option

Monorepo - Share data with Google Analytics option

Y ya estamos listos para explorar y correr nuestro proyecto!.

Si necesitas más información sobre como crear un proyecto con nx puedes ingresar aquí.

Explorando el proyecto

Seguro habrás notado que en la carpeta apps se encuentra el proyecto frontend wallapp-web y el proyecto backend api. Con el propósito de hacer corto este post y ser lo más short and sweet posible, no quise hacer una explicación profunda de la estructura de un proyecto con monorepos y nx, así que toma el tiempo que consideres necesario para explorarlo y entenderlo, sin embargo si sientes que necesitas más introducción al respecto, puedes escribirme al correo que encontrarás al final de esta publicación.

Monorepo - Root project

Monorepo - Root project

Corriendo nuestro proyecto

El Frontend

A continuación, correré la aplicación web o frontend, en este caso debemos posicionarnos en la carpeta root de nuestro workspace corriendo en el terminal cd wallapp y luego ejecutamos: nx serve wallapp-web.

Si vamos a la ruta http://localhost:4200/ podremos ver la siguiente página:

Monorepo - Localhost:4200 example

Monorepo - Localhost:4200 example

El Backend

Para correr el api, debemos abrir otra pestaña o ventana de nuestro terminal y ejecutar el siguiente comando: nx serve api

Monorepo - Running the API

Monorepo - Running the API

Luego de que la compilación haya finalizado, nuestra api estará ejecutándose en el puerto 3333 de localhost. Podemos probar los endpoints de nuestra api utilizando herramientas como Postman.

Monorepo - Testing endpoint with Postman

Monorepo - Testing endpoint with Postman

Conectando el Backend y el Frontend

Ya casi estamos listos!,

Nx nos la pone fácil, el proyecto base ya viene conectado el Frontend con el Backend, podemos notarlo en el componente app.component.ts.

Monorepo - Calling endpoint from Angular Application

Monorepo - Calling endpoint from Angular Application

Nx usa un proxy para poder conectarnos con el api el cual corre en otro puerto para evitar conflictos de CORS, si quieres leer más al respecto puedes ir a este link.

Si vemos una vez más el proyecto podemos notar que se despliega un mensaje que proviene del backend.

Monorepo - Showing Api message in Frontend Application

Monorepo - Showing Api message in Frontend Application

Gracias por tu tiempo y espero que este post haya sido de ayuda para ti!

Repositorio del proyecto

Escrito por

Mayra Rodríguez

Google Developer Expert for Angular & Web Technologies

hello@mayracript.com
Recientes
Tweets