Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 12, 2023 04:07 am GMT

How setup Firebase on your Frontend project

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.

Get your credentials for Firebase SDK

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.


Original Link: https://dev.to/nicolasmontielf/how-setup-firebase-on-your-frontend-project-1ap

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To