Skip to content

Commit 8b8ec0d

Browse files
Feiyang1Feiyang1
authored
update READMEs with v9 info (#5383)
* update READMEs with v9 info * address comments
1 parent c8701ec commit 8b8ec0d

File tree

2 files changed

+213
-2
lines changed

2 files changed

+213
-2
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
<!-- BADGES -->
44
![Build Status](https://img.shields.io/github/workflow/status/firebase/firebase-js-sdk/Run%20All%20Tests.svg)
5-
[![Build Status](https://saucelabs.com/buildstatus/firebase-oss)](https://saucelabs.com/u/firebase-oss)
65
[![Version](https://img.shields.io/npm/v/firebase.svg?label=version)](https://www.npmjs.com/package/firebase)
76
[![Coverage Status](https://coveralls.io/repos/github/firebase/firebase-js-sdk/badge.svg?branch=master)](https://coveralls.io/github/firebase/firebase-js-sdk?branch=master)
87
<!-- END BADGES -->
@@ -19,6 +18,8 @@ To get started using Firebase, see
1918

2019
[![Release Notes](https://img.shields.io/npm/v/firebase.svg?style=flat-square&label=Release%20Notes%20for&labelColor=039be5&color=666)](https://firebase.google.com/support/release-notes/js)
2120

21+
## Upgrade to Version 9
22+
Version 9 has a redesigned API that supports tree-shaking. Read the [Upgrade Guide](https://firebase.google.com/docs/web/modular-upgrade) to learn more.
2223
## Supported Environments
2324
Please see [Environment Support](https://firebase.google.com/support/guides/environments_js-sdk).
2425

‎packages/firebase/README.md

Lines changed: 211 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,215 @@
1+
<!-- BADGES -->
2+
![Build Status](https://img.shields.io/github/workflow/status/firebase/firebase-js-sdk/Run%20All%20Tests.svg)
3+
[![Version](https://img.shields.io/npm/v/firebase.svg?label=version)](https://www.npmjs.com/package/firebase)
4+
[![Coverage Status](https://coveralls.io/repos/github/firebase/firebase-js-sdk/badge.svg?branch=master)](https://coveralls.io/github/firebase/firebase-js-sdk?branch=master)
5+
<!-- END BADGES -->
6+
17
# Firebase - App success made simple
28

9+
## Upgrade to Version 9
10+
Version 9 has a redesigned API that supports tree-shaking. Read the [Upgrade Guide](https://firebase.google.com/docs/web/modular-upgrade) to learn more.
11+
312
## Overview
413

5-
TODO
14+
[Firebase](https://firebase.google.com) provides the tools and infrastructure
15+
you need to develop, grow, and earn money from your app. This package supports
16+
web (browser), mobile-web, and server (Node.js) clients.
17+
18+
For more information, visit:
19+
20+
- [Firebase Realtime Database](https://firebase.google.com/docs/database/web/start) -
21+
The Firebase Realtime Database lets you store and query user data, and makes
22+
it available between users in realtime.
23+
- [Cloud Firestore](https://firebase.google.com/docs/firestore/quickstart) -
24+
Cloud Firestore is a flexible, scalable database for mobile, web, and server
25+
development from Firebase and Google Cloud Platform.
26+
- [Firebase Storage](https://firebase.google.com/docs/storage/web/start) -
27+
Firebase Storage lets you upload and store user generated content, such as
28+
files, and images.
29+
- [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) -
30+
Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests.
31+
- [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging/js/client) -
32+
Firebase Cloud Messaging is a cross-platform messaging solution that lets you
33+
reliably deliver messages at no cost.
34+
- [Firebase Performance Monitoring](https://firebase.google.com/docs/perf-mon/get-started-web) -
35+
Firebase Performance Monitoring helps you gain insight into your app's performance issues.
36+
- [Google Analytics](https://firebase.google.com/docs/analytics/get-started?platform=web) -
37+
Google Analytics is a free app measurement solution that provides insight on app usage and user engagement.
38+
- [Remote Config](https://firebase.google.com/docs/remote-config/get-started?platform=web) -
39+
Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your
40+
app without requiring users to reload your app.
41+
- [App Check](https://firebase.google.com/docs/app-check/web/recaptcha-provider) -
42+
App Check helps protect your backend resources from abuse, such as billing fraud and phishing. It
43+
works with both Firebase services and your own backends to keep your resources safe.
44+
- [Create and setup your account](https://firebase.google.com/docs/web/setup) -
45+
Get started using Firebase for free.
46+
47+
This SDK is intended for end-user client access from environments such as the
48+
Web, mobile Web (e.g. React Native, Ionic), Node.js desktop (e.g. Electron), or
49+
IoT devices running Node.js. If you are instead interested in using a Node.js
50+
SDK which grants you admin access from a privileged environment (like a server),
51+
you should use the
52+
[Firebase Admin Node.js SDK](https://firebase.google.com/docs/admin/setup/).
53+
54+
### Install the SDK
55+
56+
Install the Firebase NPM module:
57+
```
58+
$ npm init
59+
$ npm install --save firebase
60+
```
61+
62+
### Use Firebase in your app
63+
64+
1. Initialize Firebase in your app and create a Firebase App object:
65+
```js
66+
import { initializeApp } from 'firebase/app';
67+
68+
// TODO: Replace the following with your app's Firebase project configuration
69+
const firebaseConfig = {
70+
//...
71+
};
72+
73+
const app = initializeApp(firebaseConfig);
74+
```
75+
76+
2. Access Firebase services in your app
77+
78+
Firebase services (like Cloud Firestore, Authentication, Realtime Database, Remote Config, and more) are available to import within individual sub-packages.
79+
80+
The example below shows how you could use the Cloud Firestore Lite SDK to retrieve a list of data.
81+
82+
```js
83+
import { initializeApp } from 'firebase/app';
84+
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
85+
// Follow this pattern to import other Firebase services
86+
// import { } from 'firebase/<service>';
87+
88+
// TODO: Replace the following with your app's Firebase project configuration
89+
const firebaseConfig = {
90+
//...
91+
};
92+
93+
const app = initializeApp(firebaseConfig);
94+
const db = getFirestore(app);
95+
96+
// Get a list of cities from your database
97+
async function getCities(db) {
98+
const citiesCol = collection(db, 'cities');
99+
const citySnapshot = await getDocs(citiesCol);
100+
const cityList = citySnapshot.docs.map(doc => doc.data());
101+
return cityList;
102+
}
103+
```
104+
105+
### Use a module bundler for size reduction
106+
107+
The Firebase Web SDK is designed to work with module bundlers to remove any
108+
unused code (tree-shaking). We strongly recommend using this approach for
109+
production apps. Tools such as the [Angular CLI](//angular.io/cli),
110+
[Next.js](//nextjs.org/), [Vue CLI](//cli.vuejs.org/), or [Create
111+
React App](//reactjs.org/docs/create-a-new-react-app.html) automatically
112+
handle module bundling for libraries installed through npm and imported into
113+
your codebase.
114+
115+
See [Using module bundlers with Firebase](/docs/web/module-bundling) for more information.
116+
117+
### Script include
118+
You can also load Firebase packages as script modules in browsers that support native ES modules.
119+
120+
```html
121+
<!-- use script module by specifying type="module" -->
122+
<script type="module">
123+
import { initializeApp } from 'https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-app.js';
124+
import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-firestore-lite.js';
125+
// Follow this pattern to import other Firebase services
126+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-analytics.js";
127+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-app-check.js";
128+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-auth.js";
129+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-functions.js";
130+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-firestore.js";
131+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-storage.js";
132+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-performance.js";
133+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-remote-config.js";
134+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-messaging.js";
135+
// import {} from "https://www.gstatic.com/firebasejs/${FIREBASE_VERSION}/firebase-database.js";
136+
137+
// TODO: Replace the following with your app's Firebase project configuration
138+
const firebaseConfig = {
139+
//...
140+
};
141+
142+
const app = initializeApp(firebaseConfig);
143+
const db = getFirestore(app);
144+
145+
// Get a list of cities from your database
146+
async function getCities(db) {
147+
const citiesCol = collection(db, 'cities');
148+
const citySnapshot = await getDocs(citiesCol);
149+
const cityList = citySnapshot.docs.map(doc => doc.data());
150+
return cityList;
151+
}
152+
</script>
153+
```
154+
155+
_Note: To get a filled in version of the above code snippet, go to the
156+
[Firebase console](https://console.firebase.google.com/) for your app and click on "Add
157+
Firebase to your web app"._
158+
159+
## Get the code (Node.js - server and command line)
160+
161+
### Install the SDK
162+
163+
While you can write entire Firebase applications without any backend code, many
164+
developers want to write server applications or command-line utilities using the
165+
Node.js JavaScript runtime.
166+
167+
You can use the same npm module to use Firebase in the Node.js runtime (on a
168+
server or running from the command line):
169+
170+
```
171+
$ npm init
172+
$ npm install --save firebase
173+
```
174+
175+
In your code, you can access Firebase using:
176+
177+
```js
178+
const { initializeApp } = require('firebase/app');
179+
const { getFirestore, collection, getDocs } = require('firebase/firestore');
180+
// ...
181+
```
182+
183+
If you are using native ES6 module with --experimental-modules flag (or Node 12+)
184+
you should do:
185+
186+
```js
187+
import { initializeApp } from 'firebase/app';
188+
import { getFirestore, collection, getDocs } from 'firebase/firestore';
189+
// ...
190+
```
191+
192+
Please see [Environment Support](https://firebase.google.com/support/guides/environments_js-sdk) for which packages
193+
are available in Node.js.
194+
195+
## Compat packages
196+
Version 9 provides a set of compat packages that are API compatible with Version 8. They are intended to
197+
be used to make the upgrade to the modular API easier by allowing you to upgrade your app piece by piece.
198+
See the [Upgrade Guide](https://firebase.google.com/docs/web/modular-upgrade) for more detail.
199+
200+
To access the compat packages, use the subpath `compat` like so:
201+
```js
202+
// v9 compat packages are API compatible with v8 code
203+
import firebase from 'firebase/compat/app';
204+
import 'firebase/compat/auth';
205+
import 'firebase/compat/firestore';
206+
```
207+
208+
## Changelog
209+
210+
The Firebase changelog can be found at
211+
[firebase.google.com](https://firebase.google.com/support/release-notes/js).
212+
213+
## Browser/environment compatibility
214+
215+
Please see [Environment Support](https://firebase.google.com/support/guides/environments_js-sdk).

0 commit comments

Comments
 (0)