Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire
Tags: angular8, firebase, angularfire
Published: 2021-03-13 16:48:03

https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire

<strong><a href="https://grokonez.com/tag/firebase">Firebase</a></strong> is a mobile and web application development platform developed by <strong>Google</strong>. We can build our apps very fast, without making complex back-end system. It helps to scale automatically, for even the largest apps. In this <a href="https://grokonez.com/angular-tutorial">Angular</a> 8 Firebase tutorial, we're gonna integrate <strong>Firebase</strong> into <strong>Angular 8 App</strong> with <code>@angular/fire</code> module (official library for Firebase and Angular).

Related Posts:
- <a href="https://grokonez.com/frontend/angular/angular-8-firebase-tutorial-crud-operations-angular-fire-example">Angular 8 Firebase Realtime Database CRUD operations with @angular/fire</a>
- <a href="https://grokonez.com/frontend/angular/angular-8-firestore-tutorial-crud-examples-angularfire">Angular 8 Firestore tutorial with CRUD application example – @angular/fire</a>
- <a href="https://grokonez.com/frontend/upload-display-delete-files-angular-8-firebase-storage-angular-fire">Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire</a>

<!--more-->
<h2>Technology</h2>
- Angular 8
- @angular/fire 5.1.2
- firebase 5.9.4
<h2>Instructional Video</h2>
<iframe width="853" height="480" src="https://www.youtube.com/embed/6AX-fhx59Hg?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

<h2>Integrate Firebase into Angular 8 App</h2>
<h3>Step 1: Set up the Firebase Project</h3>
Go to <a href="https://console.firebase.google.com" rel="nofollow">Firebase Console</a>, login with your Google Account, then click on <strong>Add Project</strong>.

Enter <strong>Project name</strong>, set <strong>Project Id</strong> and select <strong>Country/Region</strong>:

<img src="https://grokonez.com/wp-content/uploads/2019/04/angular-8-firebase-tutorial-integrate-angular-fire-create-project.png" alt="angular-8-firebase-tutorial-integrate-angular-fire-create-project" width="514" height="702" class="alignnone size-full wp-image-17749" />

Press <strong>CREATE PROJECT</strong>, browser turns into:

<img src="https://grokonez.com/wp-content/uploads/2019/04/angular-8-firebase-tutorial-integrate-angular-fire-add-app.png" alt="angular-8-firebase-tutorial-integrate-angular-fire-add-app" width="424" height="442" class="alignnone size-full wp-image-17753" />

Click on <strong>Web App</strong>, a Popup will be shown:

<img src="https://grokonez.com/wp-content/uploads/2019/04/angular-8-firebase-tutorial-integrate-angular-fire-popup.png" alt="angular-8-firebase-tutorial-integrate-angular-fire-popup" width="663" height="403" class="alignnone size-full wp-image-17756" />

Save the information for later usage.

Choose <strong>Database</strong> in the left (list of Firebase features) -> Realtime Database -> Tab <strong>RULES</strong>, then change <strong>.read</strong> and <strong>.write</strong> values to <strong>true</strong>:

<img src="https://grokonez.com/wp-content/uploads/2019/04/angular-8-firebase-tutorial-integrate-angular-fire-config-firebase-database.png" alt="angular-8-firebase-tutorial-integrate-angular-fire-config-firebase-database" width="243" height="128" class="alignnone size-full wp-image-17757" />

<h3>Step 2: Install @angular/fire and firebase</h3>
Run command:
<code>npm install firebase @angular/fire --save</code>

<h3>Step 3: Add Firebase config to environments variable</h3>
Open <strong>/src/environments/environment.ts</strong>, add your Firebase configuration that we have saved when Popup window was shown:
<pre><code class="language-javascript">
export const environment = {
  production: false,
  firebase: {
    apiKey: 'xxx',
    authDomain: 'gkz-angular-firebase.firebaseapp.com',
    databaseURL: 'https://gkz-angular-firebase.firebaseio.com',
    projectId: 'gkz-angular-firebase',
    storageBucket: 'gkz-angular-firebase.appspot.com',
    messagingSenderId: '189575342164'
  }
};
</code></pre>

More:  https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire