Add Firebase v9 to your JavaScript App in 10 mins
Tags: javascript, webdev, firebase, programming
Published: 2023-02-25 19:04:07


{% youtube cd1t1AiODYo %}

In this **Firebase** version 9 **tutorial**, you’re going to learn how to **add Firebase** to your **JavaScript web** apps.

This will be the very first step that you need to get started with **Firebase**.

In order to use **Firebase** V9 in your **web app**, you’ll need to

1. [Create A Firebase Project](https://softauthor.com/add-firebase-to-javascript-web-app/#create-a-firebase-project-from-firebase-console)
2. [Register App for web](https://softauthor.com/add-firebase-to-javascript-web-app/#register-app-for-web)
3. [Add Firebase SDK 9 to the JavaScript web app](https://softauthor.com/add-firebase-to-javascript-web-app/#add-firebase-sdk-to-javascript-web-app)


## 1. Create A Firebase Project From Firebase Console

- Go to the [Firebase Console](https://firebase.google.com/) → **Go to the console** or **Sign in** button at the top right.
- Log in with your **Gmail** account.

![alt text](https://softauthor.com/wp-content/uploads/2022/05/create-a-firebase-project-login-1-1024x630.png)

- Once you’re logged in, click the **Add Project** button to create a brand new **Firebase project**.

![alt text](https://softauthor.com/wp-content/uploads/2022/05/create-firebase-project-firebase-dashboard-1024x549.png)

- Give it a **project name** of your choice and click **continue**.

![alt text](https://softauthor.com/wp-content/uploads/2022/05/create-a-firebase-project-name-1024x774.png)

- **Turn off** Enable Google Analytics for this Project and click **Create Project**.

![alt text](https://softauthor.com/wp-content/uploads/2022/05/create-firebase-project-1024x854.png)

- It will take a few seconds to complete the **creating a project process**.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/create-firebase-project-firebase-console-1-1024x559.png)

- Click **continue** and it’ll take you to the **Firebase Project Dashboard**.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/2-create-firebase-project-firebase-console-project-dashboard-1024x636.png)

##2. Register App
The Firebase Project Dashboard offers to register an app for five different platforms:

- iOS
- Android
- **Web**
- Unit, and
- Flutter

Let’s **Register an app** for **Web** (JavaScript).

- Click on the **Web icon** (</>) which opens up **Add Firebase to your web app** page.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/3-create-firebase-project-firebase-console-project-dashboard-register-an-app-1024x640.png)

- Give it an **App Nickname** and Click **Register app**.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/4-create-firebase-project-firebase-console-project-dashboard-register-an-app.png)

##3. Add Firebase SDK to Your Web App

Adding Firebase to your JavaScript web app is a two-step process:

1. Install **Firebase SDK**
2. Add Firebase SDK **Initialization Code**

Firebase offers two ways to install **Firebase SDK** to your **web **project.

- Use **npm** → **Install Firebase SDK** using **NPM** (Node Package Manager) by issuing the **npm install firebase** command (Node JS).

![alt text](https://softauthor.com/wp-content/uploads/2022/06/5-create-firebase-project-firebase-console-project-dashboard-add-firebase-sdk-1024x905.png)

- **Use a script tag** → **Install Firebase SDK** using **CDN** (Content Delivery Network) by adding the following code right above the ending **body** tag.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/6-create-firebase-project-firebase-sdk-cdn-code-1024x1007.png)

At this stage, you’re ready to use any of the **Firebase** services to your **JavaScript** web app.