Add Firebase SDK V9 to JavaScript Web App In Minutes [2022]
Tags: javascript, firebase, webdev, beginners
Published: 2022-06-27 12:04:54

---
canonical_url: https://softauthor.com/add-firebase-to-javascript-web-app/
---

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

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

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

- [Create A Firebase Project](https://softauthor.com/add-firebase-to-javascript-web-app/#create-a-firebase-project-from-firebase-console)
- [Register App for web](https://softauthor.com/add-firebase-to-javascript-web-app/#register-app-for-web)
- [Add Firebase SDK 9 to 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 console** or **Sign in** button at the top right.
- Log in with **Gmail** account.

![alt text](https://softauthor.com/wp-content/uploads/2022/05/create-a-firebase-project-login-1.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-1536x824.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-1536x1160.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-1536x1280.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-1536x839.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-1536x954.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-1536x960.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:

- Install **Firebase SDK**
- 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-1536x1357.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.png)

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