Deploy app react con Firebase

May 24, 2020 • ☕️ 3 minutos de lectura

Aunque siento predilección por Vercel (este blog está alojado en Vercel), en un proyecto en concreto necesito hacer deploy en Firebabse, así que vi una oportunidad perfecta para crear un mini “how-to” de como se hace.

Firebase

Lo primero que tenemos que hacer es instalar firebase-tools

npm install -g firebase-tools

Ahora que lo tenemos instalado, el siguiente paso será loguearnos. Nos saltará una ventana del navegador pidiendo permisos y debemos aceptarlos.

firebase login

Una vez hemos iniciado sesión en firebase, podemos inicializar firebase en nuestro proyecto con el siguiente comando.

firebase init

Ahora nos pregutará: ¿Qué características de la CLI de Firebase desea configurar para esta carpeta?.

En nuestro caso, queremos hacer uso del hosting, así que lo seleccionamos usando la tecla espacio.

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

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

  /Users/admin/Desktop/test-deploy-firebase

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices.
 ◯ 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

Ahora nos preguntará si queremos usar un proyecto existente o crear uno nuevo, en este ejemplo usaremos uno existente.

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

Seleccionamos nuestro proyecto, si no lo tienes puedes crearlo en console firebase

? Select a default Firebase project for this directory:
❯ test-depoy (test-depoy-firebase)

Ahora nos preguntará que cual es nuestro directorio público, en el caso de create-react-app es build, que es el directorio que aparecerá después de hacer npm run build.

? What do you want to use as your public directory? build

Otra pregunta más… a la que responderemos Y ya que create-react-app es una SPA.

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

Por último, dirá que ya existe build/index.html y que si queremos sobrescribirlo, a lo que responderemos No

? File build/index.html already exists. Overwrite? No

Si todo ha ido bien veremos el siguiente mensaje.

✔  Firebase initialization complete!

Esto nos creará nuestro fichero de configuración firebase.json.

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Recuerda que firebase no se encarga de hacer el build de nuestro proyecto, para ello debeerás ejecutar npm run build.

Ahora que lo tenemos configurado, solo nos que hace el deploy.

firebase deploy

Y empezará la magia, despúes nos devolverá una url en la que podremos ver nuestro resultado.

Hosting URL: https://test-deploy.firebaseapp.com

Por último podemos modificar nuestro package.json para que al ejecutar ambos comandos juntos usando npm run deploy

"scripts": {
    "deploy": "react-scripts build && firebase deploy",
  },

Subdominios

Si queremos añafir un subdominio, primero debes hacerlo desde la consola de firebase, hacemos click en Hoting e irnos a las “Opciones Avanzadas”.

Opciones Avanzadas Hosting

Pulsamos sobre Añadir otro sitio web

Opciones Avanzadas Hosting

Ahora deberemos volver a repetir todos los pasos anteriores, con una excepción. Debemos editar nuestro fichero firebase.json y añadir el la key site con el valor que hemos añadido anteriormente al crear el hosting.nw

{
  "hosting": {
    "site": "subdominio-test-deploy",    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Ahora para hacer deploy le espeficicaremos el hosting en el que deseamos sububirlo.

firebase deploy --only hosting:subdominio-test-deploy

Ahora nos queda añadir nuestro dominio y subdominio.