Publicar una aplicación Angular en un Hosting compartido
Pasos a seguir para publicar en una app Angular en un Hosting que soporta HTML, PHP, CSS y JS
Vamos a seguir con la línea de tutoriales en el que os enseño a publicar aplicaciones de Angular en diferentes servicios como Zeit Now, Firebase,…
En este caso, os voy a enseñar a publicar nuestras aplicaciones Angular en producción en un hosting compartido, cuyas características son que son compatibles con sitios PHP, HTML, CSS y JS con bases de datos MySQL y PostgreSQL según el hosting.
Lo que nos interesa es que el hosting sea compatible con HTML, CSS y JS, que será el tipo de archivos que se crearán cuando compilemos nuestro proyecto.
0.- Requisitos previos para trabajar en este artículo.
- Tener instalado Node y NPM.
- Tener instalado Angular CLI
- Un hosting compartido. Si no lo tenéis, yo os mostraré hacerlo con Webhost.
1.- Crear proyecto Angular
Una vez que ya tenemos lo necesario para publicar un proyecto, comenzamos creando el proyecto con el que vamos a trabajar que será el que publicaremos al final del artículo.
Para crear el proyecto de Angular, teniendo el CLI de Angular instalado en nuestro equipo ejecutamos la siguiente orden, donde vamos a crear nuestro proyecto con los estilos definidos como CSS y la configuración de las rutas añadidas:
ng new hosting-app --style=css --routing
A tener en cuenta:
- ng: Para ejecutar un comando del CLI de Angular.
- new: Para hacer referencia que queremos crear un nuevo proyecto.
- hosting-app: Nombre del proyecto (esto podeís poner lo que queráis).
- — styles=css: Para especificar que vamos a usar estilos CSS.
- — routing: Para añadir configuración de rutas.
Una vez que se crea el proyecto, ejecutamos la orden para inicializar la aplicación y poder acceder al contenido de ella.
npm start
Por defecto se inicializa en el puerto 4200, por lo que para acceder al contenido de la aplicación debemos de acceder mediante la URL:
Una vez que accedamos a la url mencionada, nos tiene que aparecer algo de este estilo, que será la apariencia que tiene una aplicación de Angular a partir de la versión 8.3.x del CLI de Angular.
Ahora que ya tenemos en marcha el proyecto, vamos a pasar al apartado donde vamos a acceder a un hosting para publicar esta aplicación.
2.- Acceder a un hosting compartido
Yo este caso voy a usar un hosting compartido gratuito que tiene un Cpanel.
Quizás lo que es la interfaz os resulte diferente a lo que podáis encontraros, pero simplemente si os fijáis bien lo podréis completar.
El hosting que he elegido para este artículo es Webhost, que es un hosting que nos ofrece la posibilidad de subir nuestros proyectos web en PHP ó HTML con CSS y JS o sin el. La base de datos que podemos utilizar en este tipo es la de MySQL.
Teniendo estas características, podemos subir sin ningún problema nuestros proyectos de Angular, ya que aunque en el desarrollo trabajemos en Typescript, cuando lo compilamos todo el contenido lo tendremos con HTML, CSS y JS.
Si ya tenéis uno propio que habéis contratado, pasamos al siguiente punto, ya que aquí voy a a hablar del registro en Webhost y como iniciar el primer Site.
2.1.- Registro
Para acceder al registro accedemos desde aquí: https://es.000webhost.com/registro-sitio-gratis o haciendo click en la opción que está marcada en la siguiente imagen
El proceso de registro es muy sencillo, no tiene mucho misterio. Podemos hacerlo con el correo electrónico o iniciando desde nuestra cuenta de Facebook o Google.
2.2.- Crear un nuevo sitio
Una vez que ya hemos completado el proceso del registro, tenemos que crear nuestro proyecto para alojar el sitio. Tenemos cupo con la cuenta gratuita de crear hasta 3 (a menos que haya cambiado a día de hoy) proyectos.
Para crear el proyecto del nuevo sitio, pinchamos en “Create New Site”
Nos piden que introduzcamos el nombre de la web, lo introducimos e introducimos el password que creamos más conveniente. Cuando tengamos todo OK, simplemente le damos a “Create”.
2.3.- Preparativos para subir nuestra aplicación
Al crear nos redirecciona al apartado del sitio que hemos creado. Si os fijaís, tenemos a la derecha la opción de “File Manager”. Esta opción será la que usemos para subir nuestra app de Angular. Tenemos que tener en cuenta esa opción.
Una vez abierto el apartado para gestionar los ficheros, estaremos en una opción como la siguiente, en la que tenemos que tener preparado el directorio “public_html”, que es la carpeta donde va a ir los ficheros que vamos a usar para publicarlo.
Una vez que hemos llegado a este punto, ya tenemos el hosting con el sitio donde se va a añadir la app de Angular listo para ello. Lo que nos falta será compilar para publicarlo en producción. No cerréis esta ventana.
3.- Compilar aplicación Angular en producción
Para finalizar con el objetivo principal del artículo que es publicar nuestra aplicación Angular, tenemos que seguir un par de pasos.
Doy por hecho que ya tenéis desarrollada vuestra app con las funcionalidades y páginas que queráis, yo publicaré con un contenido que ya he trabajado anteriormente.
Tenemos que ir al fichero “angular.json” y comprobamos donde tenemos configurado nuestro path de salida, para tenerlo en cuenta cuando vayamos a coger la carpeta para publicarla en el hosting. Nos fijamos en ese apartado.
En mi caso, tengo especificado que cuando compilemos, todo el contenido lo añada en la carpeta “dist”.
Por defecto, actualmente los proyectos de Angular vienen con ese valor establecido como “dist/<nompre-de-la-app>” donde si tenemos un proyectos con el nombre “anartz”, estaría como “dist/anartz”.
Hay que fijarse bien en este aspecto.
Ahora que ya tenemos ese aspecto en consideración, vamos a compilar para generar los ficheros de nuestra app Angular en producción.
ng build --prod --base-href="./"Esto será lo que nos debería de imprimir más o menos en el terminal:
Una vez terminado, si nos fijamos en el árbol de directorios y ficheros del proyecto, deberíamos de tener la carpeta dist, y dentro, todos los ficheros compilados de nuestra app de Angular.
4.- Publicar aplicación
Una vez que ya hemos seguido todos los pasos anteriores, solo nos hace falta subir la aplicación y para facilitar la subida de todos los ficheros, si vuestro hosting os permite, os recomiendo que hagáis primero comprimir todo el contenido del directorio donde esté y una vez subido, descomprimirlo.
Una vez comprimido el contenido del proyecto tendremos algo de este estilo, donde podéis ver el fichero zip con todo el contenido que veís en esa carpeta y los directorios y ficheros generados en el paso 3.
Vamos al apartado del hosting, y le damos a subir, seleccionando el fichero “zip”. Yo voy a seguir haciéndolo con Webhost, pero en vuestros hostings será muy similar esa opción. En la siguiente imagen, os enseño como sería en Webhost.
Nos aparece un modal para seleccionar los ficheros, seleccionando en nuestro caso el fichero comprimido “.zip” y le damos a subir con “Upload”
El fichero ya estará subido y como podemos ver, dentro del directorio “public_html”
Ahora lo que nos queda es, simplemente extraer los directorios y ficheros y lo vamos a hacer mediante click derecho sobre el fichero, “Extract” y seleccionamos en que directorio. Lo que nos interesa es hacerlo en el directorio raíz, es decir, donde tenemos ahora mismo ese fichero subido.
Una vez descomprimido, nos debería de aparecer algo del estilo.
Volvemos al apartado donde gestionamos todos nuestros proyectos web:
Y hacemos click en la URL del Website que estamos gestionando.
Esta será la apariencia más o menos, lo importante no es lo visual, es que ya tenemos nuestra app Angular subida en un hosting compartido!
La url será la siguiente: https://medium-anartz.000webhostapp.com/
5.- Conclusión
En este artículo hemos aprendido a subir una aplicación Angular en un hosting compartido, que he usado como ejemplo Webhost.
Si tenéis dudas concretas sobre vuestro hosting, podéis consultarme sin miedo, aunque si váis a hacerlo os pediré de antemano que me paséis capturas del panel y las opciones visibles para poder orientaros.
