Angular and Firebase are a match made in heaven

Every Angular website needs a backend. Even a static website needs to be served from somewhere. Enter Firebase: Google’s “platform-as-a-service”. Angular and Firebase are a match made in heaven.

 

Why does Angular need Firebase?

The top 3 things an Angular app needs are:

  • Hosting – You need to upload the dist folder to somewhere.
  • Database – Your Angular app needs to store and retrieve data.
  • Authentication – Your Angular app needs to be secure.

Firebase provides three products to meet these requirements:

 

I looked at the Firebase website and now I’m confused

Me too! The Firebase website is overwhelming. Ignore the other products and stick to the basics: Hosting, Firestore and Authentication. Once you have grasped the basics the other products will make a lot more sense.

 

Getting Started

If you want to kick the tyres the easiest thing you can do is hosting (serving a compiled Angular app from Firebase).

Before we begin you need to create an account. Firebase has a generous free plan. Go ahead and pick the free tier.

Next, head to the Firebase Consolehttps://console.firebase.google.com and add a project. Enter a project name (anything will do) and accept the terms and conditions.

 

Host an Angular app on Firebase

Head over to the Firebase Console and click the Hosting link on the left.

Click the Get Started button and follow the instructions. The instructions will walk you through installing the firebase-cli, creating a folder and initialising Firebase on your pc.

Once you have initialised Firebase, open the folder you created and navigate to the public folder. The folder will be empty. Anything you put in this folder will be uploaded to Firebase.

Go to one of your Angular projects, run ng build –prod and copy the contents of the dist folder to the public folder.

Run the command firebase deploy to upload the files from your public folder to Firebase.

That’s it. Once the files have uploaded you can view your Angular app online. Firebase automatically generates a URL which you can find on the Firebase website.

If you own a domain name you connect it to your Firebase project by pressing the Connect Domain button. Connecting a domain is quick and easy. I got mine up and running in 5 minutes.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.