Hoy te mostraré cómo crear y configurar un proyecto de Firebase para usarlo en la web con JavaScript usando NPM y Webpack.

Al final vamos a obtener las claves de acceso al proyecto para poder usar el SDK de Firebase en tu aplicación web.

Creando proyecto

Ve a la consola de Firebase en: https://console.firebase.google.com/u/0/?hl=es y agrega un nuevo proyecto. Coloca el nombre que quieras y continúa.

Si quieres puedes usar Analytics, yo lo he deshabilitado. Luego haz clic en Crear proyecto y espera a que termine de crearse. Ahora agregar una aplicación web al proyecto:

En el nombre de tu app puedes colocar cualquier nombre. Yo dejé desmarcada la opción de Firebase Hosting.

Luego te va a dar tus claves de acceso al SDK, te recomiendo guardarlas en un lugar seguro y tenerlas a la mano para cuando inicies tu proyecto.

Nota: recomiendo seguir lo que dice la guía, que es instalar firebase con npm install firebase. Si no tienes Node o NPM mira este enlace.

Y ya con eso puedes comenzar a usar los servicios de Firebase desde la web. A continuación te mostraré cómo agregar la base de datos si vas a usar Firestore.

Agregar Firestore

Firebase ofrece varias cosas como Firestore Database o Realtime Database. Si vas a almacenar datos yo recomiendo Firestore Database, ya que permite hacer consultas, modo sin conexión y sincronización en tiempo real.

Para agregarlo simplemente elige Firestore Database en el menú de la izquierda y crea una base de datos:

Configura la reglas como sea necesario, yo recomiendo hacerlo en modo prueba y más tarde actualizarlo a modo producción. En cuanto a la ubicación, recomiendo elegir cualquiera de los multiregión.

Y finalmente ya habrás creado tu base de datos. Desde ahí puedes administrar reglas, ver los datos, el uso, etcétera:

Opcional: modificar reglas para permitir todo tipo de acceso

Si tu app no maneja datos confidenciales, solo es por diversión / aprendizaje y no quieres configurar reglas por usuario, puedes hacer que cualquiera pueda leer y escribir. Si elegiste el modo prueba, las reglas se ven así:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if
          request.time < timestamp.date(2021, 12, 24);
    }
  }
}

Nota: el timestamp.date puede cambiar dependiendo de la fecha de creación de tu proyecto, que son 30 días me parece.

Pues bien, si quieres que cualquiera tenga permiso de leer y escribir, cambia a lo siguiente:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if
          true;
    }
  }
}

Básicamente es cambiar la condición para que siempre regrese true. Luego haz clic en Publicar y las reglas se aplicarán.

Te repito que deberías hacer esto si tú no vas a manejar usuarios, autenticación y eso. Haces esto bajo tu responsabilidad.

Conclusión

A partir de aquí ya puedes comenzar a usar Firestore y Firebase con JS y tu (opcionalmente) framework favorito.

Puedes ver la documentación aquí.