Prerequisites
Before you begin, you'll need a JavaScript (web or Node.js) app to add Firebase to. If you don't have an app already, you can download one of our quickstart samples.
Add Firebase to Your app
To add Firebase to your app, you'll need a Firebase project, the Firebase SDK, and a short snippet of initialization code that has a few details about your project.
- Create a Firebase project in the Firebase console, if you don't already
have one.
- If you already have an existing Google project associated with your app, click Import Google Project. Otherwise, click Create New Project.
- If you already have a Firebase project, click Add App from the project overview page.
- Click Add Firebase to your web app.
- Note the initialization code snippet, which you will use in a minute.
Web
Click Copy, then paste the code snippet into your application HTML. The code snippet should look like this:
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
The snippet contains initialization information to configure the Firebase JavaScript SDK to use Authentication, Storage and the Realtime Database. You can reduce the amount of code your app uses by just including the features you need. The individually installable components are:
firebase-app- The corefirebaseclient (required).firebase-auth- Firebase Authentication (optional).firebase-database- The Firebase Realtime Database (optional).firebase-storage- Firebase Storage (optional).firebase-messaging- Firebase Cloud Messaging (optional).
From the CDN, include the individual components you need (include firebase-app
first):
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-messaging.js"></script>
<!-- Leave out Storage -->
<!-- <script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-storage.js"></script> -->
<script>
var config = {
// ...
};
firebase.initializeApp(config);
</script>
If you are using a bundler like Browserify or webpack, you can just require()
the components that you use:
var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");
// Leave out Storage
//require("firebase/storage");
var config = {
// ...
};
firebase.initializeApp(config);
Node.js
Install the Firebase Node.js module with npm from the command line:
$ npm install firebase --save
To use the Firebase Node.js module in your application, require the
Firebase module:
var firebase = require("firebase");
Then, initialize the Firebase SDK using the code snippet from above, which should look like this:
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);
Use Firebase services
A Firebase App can use multiple Firebase services. Each service can be
accessed from the firebase namespace:
firebase.auth()- Authenticationfirebase.storage()- Storagefirebase.database()- Realtime Database
See the individual services for documentation on their use.
Run a Local Web Server for Development
If you are building a web app, you will find that some parts of the Firebase JavaScript SDK require that your web app be served from a server rather than from the local filesystem. You can use the Firebase CLI to run a local server like this:
$ npm install -g firebase-tools $ firebase serve
Deploy your Web App Using Firebase Hosting
If you are building a web app and your web app is entirely static content, you can deploy it easily using Firebase Hosting.
Firebase Hosting is developer-focused static web hosting for modern front-end web applications. Using Firebase Hosting, you can deploy SSL-enabled web apps to your own domain on a global content-delivery network (CDN) from a single command.
Advanced Usage
For advanced developers, Firebase has the capability to access multiple Apps at a time, each with their
own configuration information. Usually, a program will only have a single
(default) App. In that case, you can use a shorthand notation, such as
firebase.database(), to access individual services of the default App.
When you need to access services across multiple Firebase Apps, you do so
via methods of each individual Firebase App:
// Intialize the "[DEFAULT]" App
var mainApp = firebase.initializeApp({
// ...
});
// Intialize a "Secondary" App
var secondaryApp = firebase.initializeApp({
// ...
}, "Secondary");
// Each app has its own configuration options and authentication state
mainApp.database().ref("path/to/data").set(value);
secondaryApp.database().ref("path/to/data").set(anotherValue);
Need help? Visit our