Step-by-step Guide: Setup an AngularFire Ionic Project
Integrate the latest version of
@angular/fire with Ionic Framework
Today I want to share with you a step-by-step guide on how to set-up a new
project so you can start building your apps in no time.
We’re going to break things down into 3 steps you’ll need to follow.
Step #1: Make sure your development environment is up to date
Before writing any code, we are going to take a few minutes to install everything you need to be able to build this app, that way you won’t have to be switching context between coding and installing.
The first thing you’ll do is install nodejs.
The second thing you’ll do is make sure you have Ionic installed, you’ll do that by opening your terminal and typing:
npm install -g @ionic/cli
Step #2: Create the app
Now that you made sure everything is installed and up to date, you’ll create a new Ionic app.
For this, you just need to (while still in your terminal) navigate to the folder you’d like to create it in.
For me, it’s my Development folder in my ~/ directory:
cd Development ionic start
Then follow the prompts to select the app’s name, framework (Angular), and the starting template.
Then, you’ll navigate into the new app folder, that’s where all of your app’s code is going to be.
From now on, whenever you are going to type something in the terminal, it’s going to be in this folder unless I say otherwise.
Step #3: Use the
ng add schematic
The amazing James Daniels created a schematic that will handle ALL the configuration for you.
And I do mean all the configuration, you’ll be able to even create a firebase project from there 🎉.
To get it running, you’ll need to open the terminal in the root of your project and type:
ng add @angular/fire
This will open a prompt and start asking questions for you to answer, things like:
- Picking which Firebase project to use.
- Picking which app inside the project (in case you have many)
- Creating a new app (or even a new project)
- Which Firebase APIs you’ll want to use (Authentication, Firestore, Hosting, etc.)
Once you’re done choosing, it will update your Ionic application, adding the Firebase credentials,
all of the initialization code to the
app.module.ts file, and all the firebase configuration
And that’s it, now you have the skeleton of an app ready to work, let’s do a quick recap of how we got there!
- Step #1: You made sure all the needed packages were up-to-date and installed.
- Step #2: You used the Ionic CLI to create the app.
- Step #3: You used the
ng add @angular/fireschematic to set everything up.