Follow this guide to use the Firebase JavaScript SDK in your web app or as a client for
end-user access, for example, in a Node.js desktop or IoT application.
Step 1
: Create a Firebase project and register your app
Before you can add Firebase to your JavaScript app, you need to create a
Firebase project and register your app with that project. When you register your
app with Firebase, you'll get a Firebase configuration object that you'll use to
connect your app with your Firebase project resources.
Visit
Understand Firebase Projects
to learn more
about Firebase projects and best practices for adding apps to projects.
Create a Firebase project
-
In the
Firebase console
, click
Add project
.
-
To add Firebase resources to an
existing
Google Cloud project, enter its
project name or select it from the dropdown menu.
-
To create a new project, enter the desired project name. You can also optionally
edit the project ID displayed below the project name.
-
If prompted, review and accept the
Firebase terms
.
-
Click
Continue
.
-
(Optional)
Set up Google Analytics for your project, which enables you
to have an optimal experience using any of the following Firebase products:
Either select an existing
Google Analytics account
or to create a new account.
If you create a new account, select your
Analytics reporting location
, then accept
the data sharing settings and Google Analytics terms for your project.
-
Click
Create project
(or
Add Firebase
, if you're using an
existing Google Cloud project).
Firebase automatically provisions resources for your Firebase project. When
the process completes, you'll be taken to the overview page for your Firebase
project in the Firebase console.
Register your app
After you have a Firebase project, you can register your web app with that project.
-
In the center of the
Firebase console's project
overview
page
, click the
Web
icon
(
plat_web
)
to launch the setup workflow.
If you've already added an app to your Firebase project, click
Add app
to
display the platform options.
-
Enter your app's nickname.
This nickname is an internal, convenience identifier and is only visible to
you in the Firebase console.
-
Click
Register app
.
-
Follow the on-screen instructions to add and initialize the Firebase SDK in your app.
You can also find more detailed instructions for adding, initializing, and using the Firebase
SDK in the next steps of this getting started page.
If you don't already have a JavaScript project and just want to try out a
Firebase product, you can download one of our
quickstart samples
.
Step 2
: Install the SDK and initialize Firebase
This page describes setup instructions for the Firebase JS SDK's modular API,
which uses a
JavaScript Module
format.
This workflow uses npm and requires module bundlers or JavaScript framework
tooling because the modular API is optimized to work with
module bundlers
to eliminate unused code (tree-shaking) and decrease SDK size.
Install Firebase using npm:
npm install firebase
Initialize Firebase in your app and create a Firebase App object:
import { initializeApp } from 'firebase/app';
// TODO: Replace the following with your app's
Firebase project configuration
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
A Firebase App is a container-like object that stores common configuration
and shares authentication across Firebase services. After you initialize a
Firebase App object in your code, you can add and start using Firebase
services.
If your app includes dynamic features based on server-side rendering (SSR),
you'll need to take some additional steps to ensure that your configuration
persists across server rendering and client rendering passes. In
your server logic, implement the
FirebaseServerApp
interface to
optimize your app's
session management with service workers
.
Step 3
: Access Firebase in your app
Firebase services (like Cloud Firestore, Authentication, Realtime Database,
Remote Config, and more) are available to import within individual
sub-packages.
The example below shows how you could use the Cloud Firestore Lite SDK to retrieve
a list of data.
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';
// TODO: Replace the following with your app's
Firebase project configuration
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// Get a list of cities from your database
async function getCities(db) {
const citiesCol = collection(db, 'cities');
const citySnapshot = await getDocs(citiesCol);
const cityList = citySnapshot.docs.map(doc => doc.data());
return cityList;
}
Step 4
: Use a module bundler (webpack/Rollup) for size reduction
The Firebase Web SDK is designed to work with module bundlers to remove any
unused code (tree-shaking). We strongly recommend using this approach for
production apps. Tools such as the
Angular CLI
,
Next.js
,
Vue CLI
, or
Create
React App
automatically
handle module bundling for libraries installed through npm and imported into
your codebase.
See our guide
Using module bundlers with Firebase
for more information.
Available Firebase services for web
Now that you're setup to use Firebase, you can start adding and using any of the
following available Firebase services in your web app.
The following commands show how to import Firebase libraries installed locally
with
npm
. For alternative import options, see the
available libraries documentation
.
Next steps
Learn about Firebase: