diff --git a/docs/documentation/stories/include-angularfire.md b/docs/documentation/stories/include-angularfire.md new file mode 100644 index 000000000000..b20a449343ad --- /dev/null +++ b/docs/documentation/stories/include-angularfire.md @@ -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! \ No newline at end of file