Skip to content
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

chore(docs): add documentation to integrate AngularFire (WIP) #3931

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
91 changes: 91 additions & 0 deletions docs/documentation/stories/include-angularfire.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# Include AngularFire

[Firebase](https://firebase.google.com/) is a mobile and web application platform with tools and infrastructure designed
to help developers build high-quality apps. [AngularFire2](https://github.com/angular/angularfire2) is the official
Angular library to use Firebase in your apps.

#### Create new project

Create a new project and navigate into the project.

```bash
$ ng new my-app
$ cd my-app
```

#### Install dependencies

In the new project you need to install the required dependencies.

```bash
$ npm install --save angularfire2 firebase
```

#### Get Firebase configuration details

In order to connect AngularFire to Firebase you need to get the configuration details.

Firebase offers an easy way to get this, by showing a JavaScript object that you can copy and paste.

- Log in to the [Firebase](https://firebase.google.com) console.
- Create New Project or open an existing one.
- Click `Add Firebase to your web app`.
- From the modal window that pops up you copy the `config` object.

```javascript
var config = {
apiKey: "your-api-key",
authDomain: "your-auth-domain",
databaseURL: "your-database-url",
storageBucket: "your-storage-bucket",
messagingSenderId: "your-message-sender-id"
};
```

#### Configure the Environment

These configuration details need to be stored in our app, one way to do this using the `environment`. This allows you to
use different credentials in development and production.

Open `src/environments/environment.ts` and add a key `firebase` to the exported constant:

```typescript
export const environment = {
production: false,
firebase: {
apiKey: 'your-api-key',
authDomain: 'your-auth-domain',
databaseURL: 'your-database-url',
storageBucket: 'your-storage-bucket',
}
};
```

To define the keys for production you need to update `src/environments/environment.prod.ts`.

#### Import and load FirebaseModule

The final step is to import `AngularFireModule` and initialize it using the parameters from the `environment`.

Open `src/app/app.module.ts` and add the following lines on the top of the file, with the other imports:

```typescript
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
```

To initialize AngularFire add the following line to the `imports` array inside the `NgModule`:

```typescript
@NgModule({
// declarations
imports: [
// BrowserModule, etc
AngularFireModule.initializeApp(environment.firebase),
]
// providers
// bootstrap
})
```

#### Congratulations, you can now use Firebase in your Angular app!