Report this

What is the reason for this report?

How To Set Up Firebase in Ionic 4 and Angular

Published on April 13, 2019
Caroline Choi

By Caroline Choi

How To Set Up Firebase in Ionic 4 and Angular

Google Firebase is the love of my life. It’s noSQL and easily accessible online, thanks to Google’s sweet UX team. Firebase gives you functionality like analytics, auth, databases, messaging and crash reporting so you can move quickly and focus on your users.

Interested yet? Let’s get started with Firebase and Ionic 4 by showing you how to set things up.

The setup illustrated in this post is based on an Ionic/Angular project, so this same setup will work just as well in a regular Angular project without Ionic.

Starting a New Project

Start a new Ionic 4 project that uses Angular by running the ionic start in your command line:

$ ionic start alligator_firebase --type=angular

While your new Ionic 4 project is building, let’s head over to the Firebase Console. If you are not logged into a Google account, do so now!

This is the easy part. Click the white and blue “Add Project” button and type in a name for your awesome new project under “Project Name”. I’m going to go with “Alligator”.

Click “Create Project”. Once it loads, proceed to your new project.

Getting the Config Rules

You should now be on a blue page with your project title written on the top left corner.

Click the HTML div tag icon underneath your project title. You should now see a pop-up that contains a code snippet that looks very similar to the one below.

<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "djlsjdflkasjlfk__339201",
    authDomain: "alligator-9930.firebaseapp.com",
    databaseURL: "https://alligator-9930.firebaseio.com",
    projectId: "alligator-9930",
    storageBucket: "alligator-9930.appspot.com",
    messagingSenderId: "20948309483"
  };
  firebase.initializeApp(config);
</script>

The config credentials I am showing you above are not real API keys and URLs. Be wary when publishing Firebase configs in a repository or website. Anyone with those credentials, as we will soon see, may read and write to your database.

Copy the portion on your Firebase project that corresponds to the highlighted code above.

Install AngularFirebase Dependencies

Before you add any Firebase to your new Ionic 4 project, make sure that you have installed AngularFire2. To do so, run the following command in your CLI:

$ npm install @angular/fire

Transferring Config Rules to Ionic

Now that you have your config rules, you must paste them into a few files in your Ionic 4 app. cd into the Ionic 4 app we started, and head on over to the file environment.prod.ts (the production environment file), located in the environments folder.

Add in the config credentials that you copied earlier:

environment.prod.ts
export const environment = {
  production: true,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectID",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

Next, head over to the environment.ts, located in the same folder:

environment.ts
export const environment = {
  production: false,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectId",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

Finally, locate the root module file (app.module.ts). Import your newly installed @angular/fire modules and your environment.ts file like the highlighted code snippet below.

app.module.ts
// ...

// firebase imports, omit what you don't need for your app
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';
// environment
import { environment } from '../environments/environment';

That’s all there is to it! Go out there and make your AngularFire Ionic app a success!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author

Caroline Choi
Caroline Choi
Author
Category:
Tags:
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Was this helpful?


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

If you’re going to use Firebase for the Ionic app, then it’s better to use existing Cordova/Capacitor plugins.

Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.