En este post veremos como es que debemos de configurar firebase hosting para obtener la previsualizacion de nuestros cambios antes de que sean desplegados en nuestro entorno productivo.

Instalando gatsby

Iremos a la pagina oficial de gatsby y realizaremos la instalación, es necesario contar con la instalación de Node.js, si aun no lo tienes instalado ve puedes descargarlo desde la pagina oficial.

Si ya cuentas con la instalación de Node.js seguimos con la instalación de Gatsby

npm install -g gatsby-cli

Para verificar que la instalación se realizo de forma correcta ejecutamos lo siguiente.

gatsby --version

También deberíamos de tener disponible lo siguiente:

$ gatsby --help

Usage: gatsby <command> [options]

Commands:
  gatsby develop                      Start development server. Watches files, rebuilds, and hot reloads if something changes
  gatsby build                        Build a Gatsby project.
  gatsby serve                        Serve previously built Gatsby site.
  gatsby info                         Get environment information for debugging and issue reporting
  gatsby clean                        Wipe the local gatsby environment including built assets and cache
  gatsby repl                         Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.com/docs/gatsby-repl/)
  gatsby plugin <cmd> [plugins...]    Useful commands relating to Gatsby plugins
  gatsby new [rootPath] [starter]     Create new Gatsby project.
  gatsby telemetry                    Enable or disable Gatsby anonymous analytics collection.
  gatsby options [cmd] [key] [value]  View or set your gatsby-cli configuration settings.

Options:
  --verbose                Turn on verbose output                                                                                            [boolean] [default: false]
  --no-color, --no-colors  Turn off the color in output                                                                                      [boolean] [default: false]
  --json                   Turn on the JSON logger                                                                                           [boolean] [default: false]
  -h, --help               Show help                                                                                                                          [boolean]
  -v, --version            Show the version of the Gatsby CLI and the Gatsby package in the current project                                                   [boolean]

Creando sitio

Para crear un sitio usaremos el siguiente comando:

$ gatsby new my-site

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd my-site
  gatsby develop

Para ejecutar nuestro sitio

$ cd my-site
$ gatsby develop

You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 20.445s

Accediendo a http://localhost:8000 seriamos capaces de ver:

hasta este punto ya tenemos configurado un sitio web básico con Gastby.

Creando sitio en firebase

El primer requerimiento que necesitamos es tener una cuenta de google asociada a la consola de firebase. Una vez teniendo el acceso a la consola de firebase agregaremos un nuevo proyecto.

le daremos nombre a nuestro proyecto, en mi caso le colocate my-site, nota que en la parte de abajo te sugiere my-site-290a4 (yo lo deje tal cual me sugiere) y damos click en Continuar.

Dejaremos la configuración que tiene por defecto y continuamos

Para este apartado usaremos una cuenta por default para firebase y damos click en configurar proyecto.

Nuestro proyecto casi estará listo.

Volvemos a la consola y procedemos a agregar firebase a nuestra aplicación web, agregamos el nombre que en mi caso sera el mismo que el de mi proyecto si queremos configurar Firebase Hosting lo podemos hacer en este paso, no lo agregare ahora, mas adelante lo configuraremos, procedemos dando click en Registrar app.

Nos mostrara la forma de agregar el SDK de firebase, podemos usar la instalación mediante npm o usando una etiqueta script dentro de nuestro proyecto de gatsby, por ahora no agregaremos nada y solo damos click en Ir a la consola.

Configurando firebase hosting

Y ya podemos ver que contamos con una aplicación web configurada.

Si damos click nos abrirá las opciones de configuración de firebase hosting donde nos dará los comandos necesarios para la configuración de la herramienta de nuestro proyecto en Gatsby.

Primero instalaremos las herramientas de firebase en nuestro proyecto de gatsby.

Dentro de nuestro proyecto de Gastby ejecutamos en mi caso con yarn lo siguiente:

$ npm install -g firebase-tools

puede ser que para la instalación nos pida permisos de super user para el caso de los sistemas Unix, pero una vez instalada la dependencia verificamos que tengamos disponible el comando firebase mediante:

 which firebase
/usr/local/bin/firebase

Ahora seguiremos con hacer el login con nuestra cuenta de google mediante los comandos: Nos abrirá una ventana de nuestro browser pidiendo la autorización de login, aceptamos y con eso estaríamos listos para inicializar nuestra app.

$ firebase login // login de usuario de google en la consola de firebase

$ firebase init // inicialización del proyecto

my-site git:main  15s
❯ firebase init

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

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

  /Users/my-user/Desktop/my-site

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub
 Action deploys

=== 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: my-site-290a4 (my-site)
i  Using project my-site-290a4 (my-site)

=== Hosting Setup
? Do you want to use a web framework? (experimental) No

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)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote public/404.html
? File public/index.html already exists. Overwrite? No
i  Skipping write of public/index.html

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

✔  Firebase initialization complete!

con lo anterior se crearon dos archivos necesarios para firebase firebase.json y .firebaserc, como paso siguiente subiremos nuestro proyecto a Github para poder configurar el hosting y que encuentre nuestro proyecto, mediante los siguientes commandos.

Anteriormente ya debiste de haber creado el proyecto en github con el nombre que le decidiste dar, en mi caso es my_site.

$ git add .
$ git commit -m "message"
$ git remote add origin https://github.com/{your-user}/my_site.git
$ git branch -M main
$ git push -u origin main

Una vez publicado nuestro repo procedemos a ejecutar:

$ firebase init hosting:github

my-site git:main
❯ firebase init hosting:github

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

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

  /Users/my-user/Desktop/my-site

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory


=== 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  Using project my-site-290a4 (my-site)

=== Hosting:github Setup

i  Detected a .git folder at /Users/my-user/Desktop/my-site
i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
:)

Waiting for authentication...

✔  Success! Logged into GitHub as Josh2604

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) Josh2604/my_site

✔  Created service account :) with Firebase Hosting admin permissions.
✔  Uploaded service account JSON to GitHub as secret.

? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm install && npm run build

? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main

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

✔  Firebase initialization complete!

con este comando se creo una carpeta con archivos de configuración para Github actions y que estos nos permitirá crear un preview de nuestra app en cada pull request y merge de la misma.

❯ git status
On branch main
Your branch is up to date with 'origin/main'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .github/

nothing added to commit but untracked files present (use "git add" to track)

Y dentro encontramos:
.
└── workflows
    ├── firebase-hosting-merge.yml
    └── firebase-hosting-pull-request.yml

Dentro de los archivos sustituir por lo siguiente debido a que se requiere una version mas actual de node: .github/firebase-hosting-pull-request.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MY_SITE_290A4 }}'
          channelId: development
          projectId: my-site-290a4

.github/firebase-hosting-merge.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MY_SITE_290A4 }}'
          channelId: live
          projectId: my-site-290a4

Realizamos commit de lo ultimo agregado y nuestra github action debería de terminar correctamente. Y ya podríamos visualizar nuestro sitio web sin necesidad de ejecutar desde nuestra computadora local.

Creando pull request para probar preview

Para probar la visualización de nuestros PRs (Pull Request) en su liga correspondiente crearemos una nueva rama donde realizaremos un cambio y posteriormente crearemos un pull request hacia nuestro proyecto de Github creado anteriormente.

$ git checkout -b test/pr-preview
  Switched to a new branch 'test/pr-preview'

Modificaremos el archivo index.js de nuestro proyecto puedes modificar lo que tu quieras yo solo eliminare un par de lineas.

teniendo el siguiente resultado:

Posteriormente realizamos commit y subimos nuestros cambios a la rama creada en mi caso test/pr-preview

$ git push origin test/pr-preview

En nuestro proyecto de github podremos ver una notificación de la nueva rama que hemos creado, podemos lanzar el PR dando click en Compare & pull request en mi caso asi lo hare.

Nos abrirá la siguiente pantalla en la que colocamos el nombre del PR en este caso lo dejare como esta y agregare una descripción

damos click en Create pull request y veremos como es que comienza a trabajar nuestra configuración tardara un par de minutos y nos generara una liga donde podremos visualizar nuestros cambios antes de unirlos a nuestra rama principal.

Si todo funciono correctamente podremos ver la liga temporal generada por firebase para ver los cambios de nuestro PR.

Y nuestro sitio principal continua con nuestro despliegue inicial

Por ultimo cerramos el pull request para que se unan los cambios al sitio principal y al final ver los mismos cambios en ambas ligas.

Podremos ver como es que corre la Github action

al terminar nuestro sitio estará desplegado por completo con los últimos cambios.

Solución en caso de error en github action del pull request

Si en la creación del PR te aparece algo como lo siguiente

tendremos que ir a los Settings de nuestro proyecto

nos desplazamos hasta el apartado de Workflow Permissions y lo dejamos tal cual la imagen

Ahora realizamos un commit o ejecutamos manualmente la Github action y debería de estar solucionado el error.

Conclusión

La integración de Github con Firebase Hosting es una herramienta muy ponente que nos permite reducir el tiempo de pruebas de nuestros sitios web ya que estamos creando ligas a previews independientes de nuestro sitio principal sin afectar al usuario final.

---

Código

Link hacia el código fuente, y si te sirvió no olvides compartirlo :) o dejar tu estrella, ademas de compartir el post.

Código