Skip to content

Commit 1a5313d

Browse files
beemanfilipesilva
authored andcommitted
docs: add AngularFire integration docs
Close #3931
1 parent a3918b9 commit 1a5313d

File tree

1 file changed

+91
-0
lines changed

1 file changed

+91
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Include AngularFire
2+
3+
[Firebase](https://firebase.google.com/) is a mobile and web application platform with tools and infrastructure designed
4+
to help developers build high-quality apps. [AngularFire2](https://github.com/angular/angularfire2) is the official
5+
Angular library to use Firebase in your apps.
6+
7+
#### Create new project
8+
9+
Create a new project and navigate into the project.
10+
11+
```bash
12+
$ ng new my-app
13+
$ cd my-app
14+
```
15+
16+
#### Install dependencies
17+
18+
In the new project you need to install the required dependencies.
19+
20+
```bash
21+
$ npm install --save angularfire2 firebase
22+
```
23+
24+
#### Get Firebase configuration details
25+
26+
In order to connect AngularFire to Firebase you need to get the configuration details.
27+
28+
Firebase offers an easy way to get this, by showing a JavaScript object that you can copy and paste.
29+
30+
- Log in to the [Firebase](https://firebase.google.com) console.
31+
- Create New Project or open an existing one.
32+
- Click `Add Firebase to your web app`.
33+
- From the modal window that pops up you copy the `config` object.
34+
35+
```javascript
36+
var config = {
37+
apiKey: "your-api-key",
38+
authDomain: "your-auth-domain",
39+
databaseURL: "your-database-url",
40+
storageBucket: "your-storage-bucket",
41+
messagingSenderId: "your-message-sender-id"
42+
};
43+
```
44+
45+
#### Configure the Environment
46+
47+
These configuration details need to be stored in our app, one way to do this using the `environment`. This allows you to
48+
use different credentials in development and production.
49+
50+
Open `src/environments/environment.ts` and add a key `firebase` to the exported constant:
51+
52+
```typescript
53+
export const environment = {
54+
production: false,
55+
firebase: {
56+
apiKey: 'your-api-key',
57+
authDomain: 'your-auth-domain',
58+
databaseURL: 'your-database-url',
59+
storageBucket: 'your-storage-bucket',
60+
}
61+
};
62+
```
63+
64+
To define the keys for production you need to update `src/environments/environment.prod.ts`.
65+
66+
#### Import and load FirebaseModule
67+
68+
The final step is to import `AngularFireModule` and initialize it using the parameters from the `environment`.
69+
70+
Open `src/app/app.module.ts` and add the following lines on the top of the file, with the other imports:
71+
72+
```typescript
73+
import { AngularFireModule } from 'angularfire2';
74+
import { environment } from '../environments/environment';
75+
```
76+
77+
To initialize AngularFire add the following line to the `imports` array inside the `NgModule`:
78+
79+
```typescript
80+
@NgModule({
81+
// declarations
82+
imports: [
83+
// BrowserModule, etc
84+
AngularFireModule.initializeApp(environment.firebase),
85+
]
86+
// providers
87+
// bootstrap
88+
})
89+
```
90+
91+
#### Congratulations, you can now use Firebase in your Angular app!

0 commit comments

Comments
 (0)