Hey! :D

Here, I will help you to make the initial configuration of Firebase on your Frontend proyect. This also will be useful if you use vanilla Javascript or a framework like Vue or React.

Configure the Firebase Account

First, we need to create an account on Firebase and add a New Project.

After that, you will have access to the Console of your project. On the Project Settings you can get your credentials for the SDK that we going to install.

Let's write some code!

First, you need to install the SDK.

npm i firebase or yarn add firebase

After, I recommend to create a file called firebase.ts or something like that, where you can initialize Firebase and just imported when is needed, instead of using it globally.

Also, please avoid store your credentials directly on your code, there are packages like dotenv to this type of stuffs.

It's pretty simple, but let's explain some lines:

• Line 5: Here we create our configuration object. This is exactly the same that you saw on your Firebase Console.
• Line 6: If you never saw the import.meta.env.KEY_NAME, it's just the name convention that Vite uses for the enviroment variables. So, if you don't use Vite, don't worry about this.
• Line 17, 19: Initialize and export your Firebase object.

Yeah, just like that.

With this Firebase object, you can start using the different services that Firebase offers (Like databases, authentication, etc).
Here is an example in their own documentation. This Firebase Object always is a parameter when you want to initialize other service.

That's all, I hope it can be helpful for you 🥳