Firebase
1 Lessons
Next Previous

Add Firebase To Your Web App

174

If you already have a Gmail account, go to Firebase Console and log in.

Once you have logged in, you will see the project explorer window like the image above.

⚠️ It may look a bit different depending on when you read this article.

Choose Add Project button

Create project name of your choice and click continue

Click Create Project

⚠️ I have disabled Enable Google Analytics for this project for demo purposes. Feel free to enable it if needed.

Choose Web Platform

You might not see this window for the second time onward. In that case, choose project overview at the top left -> Gear icon -> project settings -> Scroll down -> add app -> then choose the web platform from there.

Register App

Once you choose the web platform, it will take you to the Add Firebase to your web app page.

Give it a nick name and hit Register app

Add Firebase SDK – Javascript

If you have a plain JavaScript project, you can simply copy and paste the scripts below into the bottom of your HTML file above the end of body tag.

If you want to use any of the Firebase services such as Cloud Firestore, Authentication, you will need to add them manually below the core SDK library and above the configuration code.

You can find the additional Firebase SDK links here.

Add Firebase SDK – Vue.js

1. install firebase to the vue project.

npm install firebase --save

2. Import firebase inside the main.js file

import firebase from 'firebase'

3. Add just the configuration code inside the main.js after importing firebase but before the vue instance.

var firebaseConfig = {
    apiKey: "************************",
    authDomain: "************************",
    databaseURL: "************************",
    projectId: "************************",
    storageBucket: "************************",
    messagingSenderId: "************************",
    appId: "************************"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

Don’t forget to replace with your configuration code. 😜

There you have it! 

Sharing is caring!

Next Previous