Publicando la aplicación

Iniciamos esta serie de artículos destinada a técnicas que no es fácil encontrar en otros manuales y cursos. Aunque es mucho lo que nos queda aún por aprender de Angular (comunicaciones con el servidor, o temas de seguridad, por ejemplo), antes vamos a conocer prácticas y recursos que deberemos implementar en nuestras aplicaciones Angular.

No se trata de temas especialmente delicados, o difíciles de aprender. En realidad son (pido perdón por la forma de expresarlo) «chorradas». Son cosas muy simples, que puedes leer en un rato y quedarte con ellas sin hacer casi esfuerzo mental. Sin embargo, también se trata de cosas que no deberás olvidar en tu día a día con Angular.

En este primer artículo vamos a conocer como compilar toda nuestra aplicación para hacerla distribuible, de forma que, una vez probada y depurada, podamos subirla a cualquier servidor y ponerla en marcha sin más. No te asustes. Verás que es lo más simple del mundo, una vez que tengas en cuenta ciertos detalles.

COMPILANDO LA APLICACIÓN

Compilar tu aplicación con la ayuda de Angular CLI es extremadamente simple y rápido. Pero, ¿qué significa «compilar la aplicación»? Bien. Creo que eso está más que claro. Significa hacerla distribuible, es decir, que podamos subirla a un servidor y funcione perfectamente, sin más. Sin instalar el CLI en el servidor, sin tener que acceder por el puerto 4200… Es decir, que el usuario no tiene por qué preocuparse de que se trate de una aplicación Angular, ni de que recursos emplea, o cómo funciona internamente, si no que funcione, exactamente, como cualquier aplicativo web.

Lo primero que tienes que tener en cuenta, si has usado Sass para crear tus hojas de estilos, es que estas deben haber sido preprocesadas para convertirlas a los correspondientes archivos CSS. Esto, que parece de cajón, lo olvidan muchos desarrolladores. En los ejercicios que hemos hecho hasta ahora hemos escrito el CSS directamente, porque las hojas de estilos eran lo más simplonas que se pueden encontrar. Sin embargo, en proyectos más grandes, es muy posible que emplees Sass. En ese caso, deberás incluir en tu proyecto angular, durante la fase de desarrollo, un preprocesador (como  gulp, por ejemplo) para convertir las hojas de estilos a CSS. En este blog tienes cursos de Sass y Gulp que puedes emplear para esta finalidad.

Lo siguiente es un retoque en el fichero src/index.html. Este se crea automáticamente cuando generas un proyecto nuevo con el comando ng new desde la terminal. Tienes que buscar la siguiente línea:

<base href="/">

y debes modificarla para que quede así:

<base href="./">

Parece una tontería pero, sin esto, tu aplicación no funcionará nunca.

ATENCIÓN. Es muy importante que en la fase de desarrollo tengas el tag como se genera, es decir, <base href="/">. Sólo debes cambiarlo cuando vayas a construir el distribuible. Después, deberás volverlo a su estado original. Si lo prefieres, puedes generar directamente la versión distribuible y, posteriormente, cambiar la etiqueta <base> en el archivo index.html de dicha versión, en lugar de tocar el index.html de tu proyecto.

El siguiente paso es encargarle al CLI que cree la versión para distribución de tu proyecto. En la terminal de VSC teclea lo siguiente:

npm run build

Tras unos segundos (dependiendo de la velocidad de tu máquina), en la raíz del proyecto se habrá creado un directorio llamado dist. Este contiene todo el código necesario para que funcione tu aplicación, tal cómo deberás subirlo al servidor.

Una cosa que debes tener en cuenta es que, si una vez generada la versión distribuible, vuelves a poner en marcha la versión de desarrollo (con npm start), el directorio dist, y todo su contenido, se destruyen. Esto lo hace el CLI porque «asume» que si sigues trabajando con la versión de desarrollo, vas a modificarla y necesitarás crear una nueva versión de producción.

CONCLUYENDO

Este mini artículo ha sido, como te adelanté, muy simple y rápido. En este enlace tienes la versión distribuible (la de producción) del CRUD de miembros que hicimos en el artículo de servicios.

   

Deja un comentario