Configuración de Firebase en el proyecto

👀 Si dominan GIT podemos hacer fork del proyecto en Github y seguir el curso desde este commit para escribir todo el código de la aplicación paso a paso 👍:

• @jggomez/blogeek/3c39e11 - Github

Alguien mas corre el video a 1.5x?

Como la carpeta config tiene el archivo con los datos del proyecto, por lo tanto al subir los archivos a github, no es bueno que vaya ese archivo allí y que lo vean los demás, por eso se agrega ese archivo a .gitignore

¿El archivo ConfigFirebase.js puede ser leído por el cliente?
¿Qué pasa si alguien lo descubre y lo usa en su app?

No me quedó claro eso.

Tengo que poner velocidad 2X porque aveces no entiendo que dice con tanta pausa, parecido a cuando habla AMLO.

¿Cuál es la extensión de VSCode que utiliza el profe para lanzar ese mini efecto de fuego cada vez que editamos el código? 😍🔥

Cuando se haga el deploy de la app en el hosting de firebase esos archivos js seran visibles desde el F12 en el navegador? Cualquiera podria ver mi config de conexion.

El proyecto está en algún repositorio?

Muchas gracias, pero ya encontre que es lo que tiene de diferente, Firebase solo actializao su interfaz.

A los nuevos estudiantes les comento que si quieren segir el paso de copiar el código para la web, Firebase solo te solicita que registre tu app nuevamente con el nombre y despues todo ya es igual.

Espero les sirva

Se debe crear dentro de la carpeta js, la carpeta con nombre config y adentro el archivo ConfigFirebase.js

A la fecha de este comentario, cambió el nombre de la variable config por firebaseConfig, en la documentación de Firebase.

https://jasanhdz.github.io/BlogGeek/src/htmls/

Deberian actualizar este curso, hay muchas cosas en firebase y el codigo que no concuerdan con el video

Yo estoy haciendo este curso con NextJs y aqui dejo mi commit

https://github.com/jlbousing/nextjs-firebase-practica/commit/78de0139ad4ffe6913c53a3b4938344ce62dd1a2

Para hacer el equivalente de lo que se hizo aquí en Next, primero se necesita importar un módulo utilizando firebase. Eso se logra con lo siguiente:

npm install firebase

y en el archivo de configuración, se hace lo mismo que el profe hizo. Se copia el mismo json pero la diferencia es que en nuestro caso se debe exportar la configuración para utilizarla en otras páginas o componentes de NextJs. Justo asi:

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyDcozaEYbaLxHhZ_haJJVGIZCIy7Ai8YRE",
  authDomain: "blogeekplatzi-9d7b3.firebaseapp.com",
  projectId: "blogeekplatzi-9d7b3",
  storageBucket: "blogeekplatzi-9d7b3.appspot.com",
  messagingSenderId: "68896446890",
  appId: "1:68896446890:web:60c48ee8cf52d30d86b3d3",
  measureme ntId: "G-7WBKKRZSFP"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

Por cierto, las configuraciones pueden ser publicas sin ningun problema. Firebase utiliza las reglas para impedir acceso u operaciones indeseadas en la base de datos. Muy seguramente en futuras lecciones de este curso veremos esto.

Si hace falta una actualizacion por ejemplo Gulp … ya tenemos LiveServer 😉

Como creaste ese proyecto O.o?!

Tengo una duda, actualmente estoy usando Nuxt para crear aplicaciones SSR, y quisiera hacer deploy en Firebase hosting, pero me preocupa de si este hosting + firebase functions puedan subir mucho los costos a largo plazo, incluso mas que hacer deploy en otras plataformas con bandwidth ilimitado, que tan recomendable es usar firebase hosting para una gran cantidad de usuarios?

Lo desactualizado que esta este curso hace imposible seguirlo. 👎

Hola alguien sabe como agregar firebase a un proyecto de react ?

acabo de realizar este paso y no me aparece esa pantalla me aparece esta. me podrían ayudar por favor, ¿Que es lo que procede?

1.- ¿Registro el mismo nombre de mi proyecto?
2.- ¿Registro otro nombre?

Comentas que el archivo de configuración es privado pero si se añade en como script de front en el index.html con que me meta en el browser puedo ver ese archivo y sus api keys. No entiendo entonces ¿Es privado ese archivo?

Como aclaración, yo me preocupe cuando el profesor mensiona que los datos de la configuracion son privados, me generó la duda de como protegerlos (al final lo hice con variables de entorno) pero de igual forma al investigar un poco encontré lo siguiente en la documentación de Firebase:
Nota: El objeto de configuración de Firebase contiene identificadores únicos, pero no secretos, para tu proyecto.
Consulta la Información sobre los proyectos de Firebase para obtener más detalles sobre este objeto de configuración.
Link
Acá les dejo el enlance, indican que los valores de este archivo realmente son pubicos, textual indican:
El contenido del archivo de configuración de Firebase se considera público, incluido el ID específico de la plataforma (que ingresaste en el flujo de trabajo de configuración de Firebase console) y los valores específicos de tu proyecto de Firebase, como la clave de API, la URL de Realtime Database y el nombre del depósito de Storage. Por ello debes usar reglas de seguridad para proteger los datos y los archivos que almacenas en Realtime Database, Cloud Firestore y Cloud Storage.

Quien puede aclarare cual es el nombre del servidor local que nombro el profesor? no se lo entiendo bien.

Acabo de crear una aplicación IONIC con REACT y la mayoría de configuración actual a fecha de 21/03/2020, si alguien le interesa compartir algún consejo o pedirlo solo debe contactarme vía twitter, la verdad que es increíble la de cosas que ofrece ahora mismo Firebase, y si te interesa el potencial de todas las opciones de configuración para aprenderlas , cuenta con mi ayuda!!

Lo que he entendido hasta ahora es que Firebase es un backend gestionado, le quedaría a uno hacer el front end. Con qué herramienta se puede hacer el front end rápidamente?

Los que no les salga igual al profesor debemos:

1. crear la carpeta config dentro de JS y nombrarla como ConfigFirebase.js
2. en firebase: en configuracion/general/tus aplicaciones/firebase SDK snippet nos sale por defecto en Automatico, lo colocamos en RED CDN aqui ya encontramos la variable firebaseConfig, OJO! nuestra variable tiene un nombre diferente a la del profesor (seguro esto sera importante mas adelante ) para que tengamos presente

I recommend this article called “How to Build a Full Stack App with Next.js 13 and Firebase.”

Este curso está muy desactualizado y usa bastante sintaxis de jQuery lo cual me causa mucho cringe, pero necesito tomarlo. Tendré que adaptarme y sobrevivir. Siganme en esta aventura.

Alguien mas noto que cuando se realiza el código en el archivo
de la ruta js/config/ConfigFirebase.js se nombra el objeto como : VarConfig

const varConfig={
...
}

y al inicializarlo en el js/util/general.js inicializa firebase con el objeto config en ves del objeto VarConfig declarado previamente?

Y si utilizo algun framework como funcionaria? jaja

hay algun problema de seguridad en q el archivo de configuración quede en el lado del cliente

Me estaba rayando porque el proyecto no incluía el archivo de configuración, luego vi el gitiginore, simplemente hay que crear este archivo ya:D

¿Cómo creó el proyecto? usó node?

Simon solo descarga el repo y con un reset --hard al ultimo commit. y dawn listo!

A alguien más no le dan el url de su storageBucket en el script? Alguien sabe el por que?

¿Qué pasa con el script src=“https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js” , se supone que es el más importante ya que exporta la coleccion completa de firebase , pero no lo encuentro en el proyecto jeje 😄?

Hola, estoy apenas tomando el curso y veo muchos cambios de lo que dice el video, en mi consola me dice que instale “firebase cli” en el curso no se contempla nada de esto, alguien tiene esto actualizado?? el firebase cli debe instalarse en c: directamente?

Todas esas carpetas en js, las creo el profesor? o las copio de alguna parte?

Existe algun paqueta donde vengan todos estos archivos ya configurados por defecto como los tiene el profesor?

tengo una pregunta ahora se crean sdk?

para añadirle firebase eso es cierto sirve?

En un proyecto donde yo creo mi frontend y uso firebase como backend (no nodejs) al publicar mis datos de configuracion (id y project) que impide que usuarios tomen esos datos y hagan hit a el api de auth para crear/crack/bruteforce usuarios validos y una vez que lo consigan, tener acceso a mi base de datos?