Tutorial

How To Set Up Firebase in Ionic 4 and Angular

Published on April 13, 2019
    Default avatar

    By Caroline Choi

    How To Set Up Firebase in Ionic 4 and Angular

    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.

    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 us


    About the authors
    Default avatar
    Caroline Choi

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    1 Comments
    

    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.

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel