Las mejores formas de conectarse al servidor usando Angular CLI

Todos los que han usado Angular CLI saben que es una herramienta poderosa que puede llevar un trabajo de desarrollo de front-end a un nivel completamente diferente. Tiene todas las tareas comunes como recarga en vivo, transpilación mecanografiada, minificación y más. Y todo está preconfigurado y listo para usar con un simple comando:

ng build, ng serve, ng test.

Pero hay una (y muy importante) tarea que debe configurarse una vez que la aplicación esté lista para comenzar a mostrar algunos datos del servidor ...

Sí, no importa qué tan bueno sea el marco Angular y qué tan rápido y eficiente sean sus componentes; al final, el propósito de SPA (aplicación de una sola página) es interactuar con el servidor a través de solicitudes HTTP.

Y aquí está el primer obstáculo que aparece ante cada novato de Angular CLI: el proyecto Angular se ejecuta en su propio servidor (que se ejecuta de forma predeterminada en // localhost: 4200). Por lo tanto, las solicitudes al servidor de API son entre dominios y, como ya sabrá, la seguridad del navegador web no permite la realización de solicitudes entre dominios.

Enfoque n. ° 1: proxy

Por supuesto, las personas de Angular CLI previeron este problema e incluso crearon una opción especial para ejecutar un proyecto Angular usando una configuración de proxy:

ng serve —-proxy-config proxy.conf.json

¿Qué es un proxy, podría preguntar? Bueno, los navegadores no le permiten realizar solicitudes entre dominios, pero los servidores sí. Usar la opción de proxy significa que le estás diciendo al servidor de Angular CLI que maneje la solicitud enviada desde Angular y la reenvíe desde el servidor de desarrollo. De esta forma, quien “habla” con el servidor de la API es el servidor de Angular CLI.

La configuración del proxy requiere proxy.conf.jsonarchivo que se agregará al proyecto. Este es un archivo JSON con algunas configuraciones básicas. Aquí hay un ejemplo del contenido de proxy.conf :

{ "/api/*": { "target": "//localhost:3000", "secure": false, "pathRewrite": {"^/api" : ""} }}

Este código significa que todas las solicitudes que comienzan con api / se reenviarán a // localhost: 3000(que es la dirección del servidor API)

Enfoque n. ° 2: CORS

La seguridad del navegador no le permite realizar solicitudes entre dominios a menos que el Control-Allow-Originencabezado exista en la respuesta del servidor. Una vez que haya configurado su servidor API para '' responder '' con este encabezado, puede buscar y publicar datos de un dominio diferente.

Esta técnica se denomina Intercambio de recursos de origen cruzado o CORS. La mayoría de los servidores y marcos de servidores comunes como Node.js 'Express o Java Spring Boot se pueden configurar fácilmente para que CORS esté disponible.

Aquí hay un código de ejemplo que configura el servidor Node.js Express para usar CORS:

const cors = require('cors'); //<-- required installing 'cors' (npm i cors --save)const express = require('express');const app = express();app.use(cors()); //<-- That`s it, no more code needed!

Tenga en cuenta que al usar CORS, antes de que se envíen cada una de las solicitudes HTTP, seguirá después de la solicitud OPTIONS (en la misma URL) que verifica si se entiende el protocolo CORS . Esta "doble solicitud" puede afectar su desempeño.

Enfoque de producción

Ok, su proyecto Angular está "hablando" sin problemas con el servidor, obteniendo y enviando datos en el entorno del desarrollador. Pero finalmente ha llegado el momento de la implementación, y necesita que su hermosa y preformada aplicación Angular esté alojada en algún lugar (lejos de Papa Angular CLI). Así que nuevamente te enfrentas al mismo problema: cómo hacer que se conecte al servidor.

Solo que ahora hay una gran diferencia: en el entorno de producción (después de ejecutar el ng buildcomando), la aplicación Angular no es más que un montón de archivos HTML y JavaScript.

En realidad, la decisión sobre cómo alojar la aplicación en el servidor de producción es una decisión de arquitectura, y la arquitectura está mucho más allá del alcance de este artículo. Pero hay una opción que te recomiendo que consideres.

Sirve archivos estáticos desde el servidor de la API

Sí, puede alojar su proyecto Angular (una vez que solo tenga archivos HTML y JavaScript) en el mismo servidor desde donde se sirven los datos (API).

Una de las ventajas de esta estrategia es que ahora no enfrenta ningún problema de "dominio cruzado", ya que el cliente y la API están en el mismo servidor.

Por supuesto, este enfoque requiere que el servidor de la API esté configurado correctamente.

Aquí está el código que expone el directorio "público" donde se pueden alojar los archivos angulares cuando se usa el servidor Node Express:

app.use(express.static('public')); //<-- public directory that contains all angular files

Tenga en cuenta que, en este caso, la forma en que su aplicación accede a la API en el entorno de desarrollo será diferente de la forma en que la API accede a ella en producción. Por lo tanto, es posible que deba usar diferentes URL HTTP en diferentes entornos (como api / users / 1 en dev y users / 1 en producción). Puede usar la opción de entorno de Angular CLI para lograr esto:

// users.service.ts
const URL = 'users';return this.http.get(`${environment.baseUrl}/${URL}`);...
// example of environment.ts file:export const environment = { production: false, baseUrl: 'api',//<-- 'API/' prefix needed for proxy configuration };
// example of environment.prod.ts file:export const environment = { production: true, baseUrl: '', //<-- no 'API/' prefix needed};

Conclusión

Angular CLI es sin duda una herramienta muy potente y robusta. Nos facilita la vida como desarrolladores front-end de muchas formas. Pero también requiere que tome una decisión arquitectónica sobre la conexión al servidor de la API. Por lo tanto, necesita una comprensión clara de las diversas formas en que se puede establecer la comunicación cliente-servidor.

Este artículo enumera dos enfoques para manejar este problema en el entorno del desarrollador y también una recomendación sobre la arquitectura de producción.

Intente jugar con varias compilaciones y vea cuál se siente más conveniente para usted y su equipo.

¡Diviértete y cuéntame cómo te va!