Como Publicar una Página Web en Firebase Hosting – Parte 2 (Final)

6 minuto(s)

En esta página:

Demo

En el capitulo anterior Como Publicar una Página Web en Firebase Hosting – Parte 1 hicimos una introducción sobre que es Firebase Hosting, creamos un proyecto nuevo en Firebase y realizamos los primeros pasos para publicar la página web en Firebase Hosting, en esta Parte 2 y última terminaremos de configurar Firebase Hosting y publicaremos la página web.

Partes

Parte 1
Parte 2 (Final)

Publicando una web en Firebase Hosting — Las webs alojadas en Firebase Hosting, cargan rápido

Antes de continuar te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación”:

Spotify	SoundCloud

Bien ahora continuemos con el Post: Como Publicar una Página Web en Firebase Hosting – Parte 2 (Final).

Luego que en la Parte 1 iniciamos sesión con la cuenta de gmail con la cual creamos el proyecto en Firebase, ahora vamos a ejecutar el siguiente comando para comenzar a publicar la página web en Firebase Hosting, me preguntará si deseo continuar y le digo que yes (si).


firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\laragon\www\nc\tutoriales\publicar_web_en_firebase_hosting

Before we get started, keep in mind:

  * You are currently outside your home directory
  * You are initializing in an existing Firebase project directory

? Are you ready to proceed? (Y/n) y

firebase init

######## #### ######## ######## ######## ### ###### ########

## ## ## ## ## ## ## ## ## ## ##

###### ## ######## ###### ######## ######### ###### ######

## ## ## ## ## ## ## ## ## ## ##

## #### ## ## ######## ######## ## ## ###### ########

You're about to initialize a Firebase project in this directory:

C:\laragon\www\nc\tutoriales\publicar_web_en_firebase_hosting

Before we get started, keep in mind:

* You are currently outside your home directory

* You are initializing in an existing Firebase project directory

? Are you ready to proceed? (Y/n) y

Me pregunta que servicio de Firebase es el que voy a usar, me muevo con la fecha del teclado hacia abajo y selecciono con la barra espaciadora (spacebar) la opción Hosting: Configure and deploy Firebase Hosting sites y preiono la tecla ENTER para confirmar la selección.


Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to selec
t, <a> to toggle all, <i> to invert selection)
 ( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
>( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
 ( ) Emulators: Set up local emulators for Firebase features

Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to selec

t, <a> to toggle all, <i> to invert selection)

( ) Database: Deploy Firebase Realtime Database Rules

( ) Firestore: Deploy rules and create indexes for Firestore

( ) Functions: Configure and deploy Cloud Functions

>( ) Hosting: Configure and deploy Firebase Hosting sites

( ) Storage: Deploy Cloud Storage security rules

( ) Emulators: Set up local emulators for Firebase features

Luego elijo la opción que dice Use an existing project (Usar un proyecto existente) y presiono ENTER


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

=== Project Setup

First, let's associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use --add,

but for now we'll just set up a default project.

Please select an option: (Use arrow keys)

> Use an existing project

Create a new project

Add Firebase to an existing Google Cloud Platform project

Don't set up a default project

Selecciono el nombre de mi proyecto, el proyecto que yo he creado se llama mi Proyecto, entonces lo selecciono y pulso ENTER para continuar.


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

Please select an option: Use an existing project
Select a default Firebase project for this directory:
  integrar-firebase-y-angular (Integrar Firebase y Angular)
> mi-proyecto-9d4ac (Mi Proyecto)
  restaurante-rmhaow (Restaurante)

=== Project Setup

First, let's associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use --add,

but for now we'll just set up a default project.

Please select an option: Use an existing project

Select a default Firebase project for this directory:

integrar-firebase-y-angular (Integrar Firebase y Angular)

> mi-proyecto-9d4ac (Mi Proyecto)

restaurante-rmhaow (Restaurante)

Para mantener un orden, Firebase Hosting nos menciona que podemos hacer uso de un directorio llamado public para subir los archivos de la página web, no muevo nada, solo presiono ENTER para continuar y luego me pregunta si quiero reescribir todas las urls para que apunten al archivo index.html, le digo que yes (si) y presiono ENTER para continuar.


Which Firebase CLI features do you want to set up for this folder? Press Spa

 to select features, then Enter to confirm your choices. Hosting: Configure an

deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  .firebaserc already has a default project, using mi-proyecto-9d4ac.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

What do you want to use as your public directory? (public) 
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

Which Firebase CLI features do you want to set up for this folder? Press Spa

to select features, then Enter to confirm your choices. Hosting: Configure an

deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use --add,

but for now we'll just set up a default project.

i .firebaserc already has a default project, using mi-proyecto-9d4ac.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

What do you want to use as your public directory? (public)

Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

Firebase CLI nos dice que la inicialización ha sido completada.


+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!

+ Wrote public/index.html

i Writing configuration info to firebase.json...

i Writing project information to .firebaserc...

i Writing gitignore file to .gitignore...

+ Firebase initialization complete!

Con estos pasos que he realizado, Firebase CLI me ha creado en la ubicación en donde ejecute los comandos anteriores, un directorio public y unos archivos indispensables para poder subir mi página web a Firebase Hosting.


/publicar_web_en_firebase_hosting  
├── /public
├── .firebaserc
├── .gitignore 
├── firebase.json // Abro este archivo

/publicar_web_en_firebase_hosting

├── /public

├── .firebaserc

├── .gitignore

├── firebase.json // Abro este archivo

Para verificar que la carpeta publica ha sido configurada como la carpeta para alojar los archivos de mi página web, abro el archivo firebase.json y debería tener la siguiente estructura.


{
  "hosting": {
    "public": "public", // Carpeta publica para los archivos de la web 
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

{

"hosting": {

"public": "public", // Carpeta publica para los archivos de la web

"ignore": [

"firebase.json",

"**/.*",

"**/node_modules/**"

"rewrites": [

{

"source": "**",

"destination": "/index.html"

}

]

}

Ahora voy publicar mi página web en el directorio public, yo usaré los archivos del tutorial Diseña Tu Primera Página Web con Bootstrap 4, me bajo el código del repositorio GitHub y lo coloco en la carpeta public.


/publicar_web_en_firebase_hosting 
├── /public // Directorio publico con los archivos del sitio web 
    ├── /css 
    ├── /js 
    ├── /svg 
    ├── blog.html
    ├── contacto.html
    ├── index.html
    ├── nosotros.html
    ├── noticias.html 
├── .firebaserc
├── .gitignore 
├── firebase.json

/publicar_web_en_firebase_hosting

├── /public // Directorio publico con los archivos del sitio web

├── /css

├── /js

├── /svg

├── blog.html

├── contacto.html

├── index.html

├── nosotros.html

├── noticias.html

├── .firebaserc

├── .gitignore

├── firebase.json

Entonces con esto debemos recordar que todos los archivos de una página web se deben de colocar en la carpeta public, para que el Hosting de Firebase pueda publicarlos sin problemas.

Antes de subir los archivos a Firebase Hosting, puedo ver una vista previa del sitio web en mi computadora, ejecutando el siguiente comando.


firebase serve

=== Serving from '...\publicar_web_en_firebase_hosting'
...

i  hosting: Serving hosting files from: public
+  hosting: Local server: http://localhost:5000

firebase serve

=== Serving from '...\publicar_web_en_firebase_hosting'

...

i hosting: Serving hosting files from: public

+ hosting: Local server: http://localhost:5000

Voy al navegador y escribo localhost:5000 y puedo ver una vista previa de mi página web, si hay algo que corregir, es un buen momento para hacerlo, pero no te preocupes, igual podemos actualizar los cambios en Firebase Hosting más adelante.

Bien mi sitio web esta ok, entonces voy a pasar a publicarlo en Firebase Hosting, para esto ejecuto el siguiente comando.


firebase deploy

=== Deploying to 'mi-proyecto-9d4ac'...

i  deploying hosting
i  hosting[mi-proyecto-9d4ac]: beginning deploy...
i  hosting[mi-proyecto-9d4ac]: found 30 files in public
+  hosting[mi-proyecto-9d4ac]: file upload complete
i  hosting[mi-proyecto-9d4ac]: finalizing version...
+  hosting[mi-proyecto-9d4ac]: version finalized
i  hosting[mi-proyecto-9d4ac]: releasing new version...
+  hosting[mi-proyecto-9d4ac]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/mi-proyecto-9d4ac/o
verview
Hosting URL: https://mi-proyecto-9d4ac.web.app

firebase deploy

=== Deploying to 'mi-proyecto-9d4ac'...

i deploying hosting

i hosting[mi-proyecto-9d4ac]: beginning deploy...

i hosting[mi-proyecto-9d4ac]: found 30 files in public

+ hosting[mi-proyecto-9d4ac]: file upload complete

i hosting[mi-proyecto-9d4ac]: finalizing version...

+ hosting[mi-proyecto-9d4ac]: version finalized

i hosting[mi-proyecto-9d4ac]: releasing new version...

+ hosting[mi-proyecto-9d4ac]: release complete

+ Deploy complete!

Project Console: https://console.firebase.google.com/project/mi-proyecto-9d4ac/o

verview

Hosting URL: https://mi-proyecto-9d4ac.web.app

Y me sale que el Deploy o Despliegue ha sido completado, ahora para ver el resultado de mi página web, accedemos al Hosting URL que Firebase Hosting nos crea automáticamente, puedes ver al final en la consola que me aparece el Hosting URL, solo lo copia y lo pego en el navegador y debería de ver mi página web publicada en Firebase Hosting.

Eso es todo, al inicio de este tutorial he colocado una Demo para ver la página web alojada en Firebase Hosting.

Conclusión

Hemos aprendido a publicar un sitio web en Firebase Hosting, personalmente pienso que es un buen hosting, pertenece a Google y es una garantía importante para pensar que nuestro proyecto alojado en este servicio va ir muy bien.

Nota

Los pasos mencionadas en este Post pueden ser modificados, eliminados o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Firebase.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.