Skip to main content

Add Firebase To Your Web Based App

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, we will take a look at how you can add Firebase Web SDK to your Ionic / Angular app.

Note here that we will be adding the Web SDK here. This means that you will have to use JavaScript to work with firebase. Alternatively, firebase has an AngularFire library that you can use as well, check out this post to see how you can Add Firebase AngularFire2 To Ionic Apps. But in this post, we will focus on the Web SDK side of things.

Step 1)

We will start by creating a new app. We do that by running the following command in the command prompt.

Note here that I have navigated my terminal inside of the newly created folder as I will be running other commands inside the app folder.

Step 2)

Now we will install firebase. To do that we will run the following command.

As we are using the--save option, NPM will make an entry of the firebase installation in the package.json file. The package.json file will look something like this.

 

 

Step 3)

Head over to firebase.google.com and create a new project (You can use your existing one as well). Then click Add Firebase to your Web App.

 

After that, you will get a modal that will have your configuration code. The code will look something like this.

As we are using Angular/Ionic, from the above snippet we will need only the config object as we already have the firebase files npm installed for us.

 

Step 4)

Now it’s time to add the configuration code to our app. So open up the main module file of your app, for Ionic it is app.module.ts and code it as follows.

Here we are importing firebase and then creating a variable with our configuration and then passing it to firebase.initializeApp(). And just like that, we have our app configured to use firebase.

Conclusion

The goal of this tutorial was to teach you how you can add firebase to your app. Keep in mind that we are using the Firebase Web SDK in this tutorial. Alternatively, you can also use the AngularFire2 library to use firebase with Angular/Ionic. Actually, using AngularFire2 should be your first choice, but as things are the AngularFire2 library can have some breaking changes as things upgrade also AngularFire2 uses Observables, which can be a bit tough to work with. That is the reason why you should also know how you can add firebase web SDK directly as well.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: