Skip to content

Update README #5214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 2, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 72 additions & 95 deletions packages/firebase/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
[![Build Status](https://travis-ci.org/firebase/firebase-js-sdk.svg?branch=master)](https://travis-ci.org/firebase/firebase-js-sdk)
<!-- TODO: Build/Test badges when available. -->

# Firebase - App success made simple

Expand Down Expand Up @@ -36,25 +36,41 @@ you should use the

## Get the code (browser)

### Script include
>This brings in all Firebase features. See
>["Include only the features you need"](#include-only-the-features-you-need)
>below for
>how to minimize download size by only including the scripts you need.
We recommend only installing the features you need. The individually installable services are:

Include Firebase in your web application via a `<script>` tag:
- `firebase-app` - The core `firebase` client (required).
- `firebase-app-check` - Firebase App Check (optional).
- `firebase-analytics` - Firebase Analytics (optional).
- `firebase-auth` - Firebase Authentication (optional).
- `firebase-database` - The Firebase Realtime Database (optional).
- `firebase-firestore` - Cloud Firestore (optional).
- `firebase-storage` - Firebase Storage (optional).
- `firebase-messaging` - Firebase Cloud Messaging (optional).
- `firebase-functions` - Firebase Cloud Functions (optional).
- `firebase-remote-config` - Firebase Remote Config (optional).
- `firebase-performance` - Firebase Performance (optional).

### Script include
Include Firebase in your web application via `<script>` tags. Create a script tag for each of the individual services you use (include `firebase-app`
first):

```html
<script src="https://www.gstatic.com/firebasejs/${JSCORE_VERSION}/firebase.js"></script>
<!-- Always required. -->
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-app.js"></script>
<!-- Include only the services you use, for example auth and database below. -->
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-database.js"></script>
<!-- See above list for names of the other services. -->

<script>
var app = firebase.initializeApp({
const app = firebase.initializeApp({
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
projectId: '<your-cloud-firestore-project>',
storageBucket: '<your-storage-bucket>',
messagingSenderId: '<your-sender-id>'
messagingSenderId: '<your-sender-id>',
appId: '<your-app-id>'
});
// ...
</script>
Expand All @@ -64,100 +80,76 @@ _Note: To get a filled in version of the above code snippet, go to the
[Firebase console](https://console.firebase.google.com/) for your app and click on "Add
Firebase to your web app"._

### npm bundler (Browserify, Webpack, etc.)
#### Alternative - all-in-one import

>This brings in all Firebase features. See
>["Include only the features you need"](#include-only-the-features-you-need)
>below for
>how to minimize bundle size by only importing the features you need.
>This brings in all Firebase features. We recommend the method above to
>minimize download size by only including the scripts you need.

Include Firebase in your web application via a `<script>` tag:

```html
<script src="https://www.gstatic.com/firebasejs/${JSCORE_VERSION}/firebase.js"></script>

The Firebase JavaScript npm package contains code that can be run in the browser
after combining the modules you use with a package bundler (e.g.,
[Browserify](http://browserify.org/), [Webpack](https://webpack.github.io/)).
<script>
const app = firebase.initializeApp({ ... });
// ...
</script>
```

Install the Firebase npm module:
### NPM Bundler (Browserify, Webpack, Rollup, etc.)

Install the Firebase NPM module:
```
$ npm init
$ npm install --save firebase
```

In your code, you can access Firebase using:
In your code, you can import the services you use:

```js
var firebase = require('firebase');
var app = firebase.initializeApp({ ... });
```

If you are using ES6 imports or TypeScript:
// This import loads the firebase namespace along with all its type information.
import firebase from 'firebase/app';

```js
import firebase from 'firebase';
var app = firebase.initializeApp({ ... });
// These imports load individual services into the firebase namespace.
import 'firebase/auth';
import 'firebase/database';
```

### Include only the features you need
Or if using `require()`:

The full Firebase JavaScript client includes support for Firebase Authentication, the
Firebase Realtime Database, Firebase Storage, and Firebase Cloud Messaging. Including
code via the above snippets will pull in all of these features.
_Use the `.default` import from `firebase/app` in order for
typings to work correctly.
See [release notes for 8.0.0](https://firebase.google.com/support/release-notes/js#version_800_-_october_26_2020)._

You can reduce the amount of code your app uses by just including the features
you need. The individually installable services are:

- `firebase-app` - The core `firebase` client (required).
- `firebase-auth` - Firebase Authentication (optional).
- `firebase-database` - The Firebase Realtime Database (optional).
- `firebase-firestore` - Cloud Firestore (optional).
- `firebase-storage` - Firebase Storage (optional).
- `firebase-messaging` - Firebase Cloud Messaging (optional).
- `firebase-functions` - Firebase Cloud Functions (optional).
```js
const firebase = require('firebase/app').default;
require('firebase/auth');
require('firebase/database');

From the CDN, include the individual services you use (include `firebase-app`
first):
const app = firebase.initializeApp({ ... });
```

```html
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-functions.js"></script>
_The type information from the import statement will include all of the SDKs,
not just the ones you have `required`, so you could get a runtime error if you
reference a non-required service._

<script>
var app = firebase.initializeApp({ ... });
// ...
</script>
```
#### Alternative - all-in-one import

When using the firebase npm package, you can `require()` just the services that
you use:
>This brings in all Firebase features. We recommend the method above to
>minimize download size by only including the scripts you need.

```js
var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');

var app = firebase.initializeApp({ ... });
// This import loads all Firebase services, whether used in your code or not.
import firebase from 'firebase';
```

If you are using TypeScript with the npm package, you can import just the
services you use:
Or with `require()`:

```js
// This import loads the firebase namespace along with all its type information.
import firebase from 'firebase/app';

// These imports load individual services into the firebase namespace.
import 'firebase/auth';
import 'firebase/database';
// This import loads all Firebase services, whether used in your code or not.
const firebase = require('firebase').default;
```

_The type information from the import statement will include all of the SDKs,
not just the ones you have `required`, so you could get a runtime error if you
reference a non-required service._

## Get the code (Node.js - server and command line)

### NPM
Expand All @@ -177,8 +169,10 @@ $ npm install --save firebase
In your code, you can access Firebase using:

```js
var firebase = require('firebase');
var app = firebase.initializeApp({ ... });
const firebase = require('firebase/app').default;
require('firebase/auth');
require('firebase/database');
const app = firebase.initializeApp({ ... });
// ...
```

Expand All @@ -196,23 +190,6 @@ import 'firebase/database';

_Known issue for typescript users with --experimental-modules: you have to set allowSyntheticDefaultImports to true in tsconfig.json to pass the type check. Use it with caution since it makes the assumption that all modules have a default export, which might not be the case for the other dependencies you have. And Your code will break if you try to import the default export from a module that doesn't have default export._

Firebase Storage is not included in the server side Firebase npm module.
Instead, you can use the
[`google-cloud` Node.js client](https://github.com/GoogleCloudPlatform/google-cloud-node).

```
$ npm install --save google-cloud
```

In your code, you can access your Storage bucket using:

```js
var gcloud = require('google-cloud')({ ... });
var gcs = gcloud.storage();
var bucket = gcs.bucket('<your-firebase-storage-bucket>');
...
```

Firebase Cloud Messaging is not included in the server side Firebase npm module.
Instead, you can use the
[Firebase Cloud Messaging Rest API](https://firebase.google.com/docs/cloud-messaging/send-message).
Expand Down