Compilar y subir una aplicación Ionic al hosting Firebase

En esta entrada vamos a ver cómo compilar y subir una aplicación hecha en Ionic al hosting de Firebase .

Es obvio que lo primero tienes que tener creada la aplicación a Ionic antes de todo esto .

Compilando el proyecto para subirlo a Firebase

Desde la linea de comandos de Ionic CLI, al igual que has podido crear la aplicación para iOS o la aplicación para Android tienes que crear la aplicación para el Browser. Qué será la que subiremos al hosting de Firebase.

El siguiente comando lo necesitamos para crear una aplicación

ionic build --prod

Utilizamos –prod si vas a subir la aplicación a tu versión de producción.

Esto generará por defecto el build de nuestra aplicación y lo genera en la carpeta www.

En la configuración de ionic puedes especificar o poner otra carpeta diferente en el caso de que quieras otra carpeta diferente.

Seleccionar el hosting de Firebase

Obviamente para utilizar Firebase tienes que tener una cuenta creada , te vale cualquier cuenta gratuita y puedes utilizar tu Gmail para crear la cuenta

Crear un proyecto en Firebase Hosting

Lo primero que debes de hacer es crear un proyecto en firebase
Para crear un proyecto te tienes que ir a la consola de firebase y darle a crear proyecto
https://console.firebase.google.com/

En este caso seleccionaremos y utilizaremos cómo proyecto el hosting de Firebase.

Ahora nos vamos a nuestro proyecto a Joanic y si no tenemos instalado Firebase en nuestro npm lanzamos el siguiente comando desde la consola:

npm install -g firebase-tools

Una vez instalado Firebase nos logeamos con el siguiente comando:

firebase login

Ahora iniciamos el proyecto con el siguiente comando

firebase init

Después de darle acceso y permitir el acceso desde el proyecto a nuestra cuenta Firebase y haber lanzado el comando de inicializacion nos mostrara las opciones del proyecto:

Seleccionaremos el proyecto tipo hosting le damos a la tecla Enter y nos preguntará que proyecto queremos añadir buscamos el proyecto y volvemos a darle a la tecla Enter.

Nos preguntará que directorio queremos hacerlo público, en nuestro caso le diremos en directorio www

Nos preguntara si lo configura como si single-page app y rescribe todas las URLs a index.html, le diremos que sí

Nos preguntara si rescribe el fichero index.html, y aquí le diremos que no.

Una vez hecho esto habrá creado el fichero firebase.json en el proyecto.

Y finalmente el último paso para poder hacerte Firebase sería lanzar el comando Firebase deploy.

firebase deploy

Y listo con esto tendrás tu flamante aplicación Ionic subida al hosting de Firebase gratuitamente