Skip to content

Getting started

This guide will help you get started with the Ionic Starter using Angular and Firebase.

Prerequisites

Before you begin, make sure your development environment meets the following requirements:

Create a repository from a template

After your purchase, you will receive an email with a license key to activate. Visit https://ionstarter.dev/activate to activate your license with your GitHub username and license key, you will be invited to the private GitHub repository.

Now follow the steps below to create a new repository from the template:

  1. Navigate to the GitHub repository page.
  2. Above the file list, click Use this template. Use this template
  3. Select Create a new repository.
  4. Select the owner for the repository and enter a name for your repository.
  5. Make sure the repository is private and click Create repository.

Next, clone the repository to your local machine, navigate into the project root and run the following commands:

npm install
npm run setup

That's it! Read on to learn how to set up Firebase.

Set up Firebase

While the Firebase SDKs are already added to the app and configured, you still need to perform a few manual steps to connect the app to your Firebase project.

Create a Firebase project

If you don't have a Firebase project yet, create one in the Firebase console. Click Add project, then follow the on-screen instructions to create a Firebase project.

Create a Firebase project

Authentication

This starter template supports various authentication providers. However, only password authentication is enabled by default.

Enable password authentication

Open the Authentication product in your Firebase project and click the Get started button. After that, click the Email/Password provider and enable it.

Enable password authentication (Form)

Cloud Firestore

Create a database

Open the Firestore Database product in your Firebase project and click the Create database button. Select a location for your database and click Next.

Create a Cloud Firesore database (Location)

Select a starting mode for your Cloud Firestore Security Rules and click Enable.

Create a Cloud Firesore database (Secure rules)

Enable rules deployment

In order for the Firestore Rules to be automatically deployed via a CI/CD pipeline, changes must be made to the service account permissions. To do this, follow the steps below:

  1. Navigate to the IAM section of the Google Cloud Console.
  2. Make sure that the correct project is selected via the project selection in the toolbar above.
  3. Edit the principal of the service account with the name firebase-adminsdk.
  4. Click Add another role and select the Firebase Rules Admin role.
  5. Save the changes.

After that, it should look like this:

Enable Firestore rules deployment

Cloud Storage

Create a bucket

Open the Storage product in your Firebase project and click the Get started button. Select a starting mode for your Cloud Storage Security Rules and click Next.

Create a Cloud Sotorage bucket (Secure rules)

Then click Done.

Enable cross-service communication

In order for Cloud Storage to access the Cloud Firestore data, cross-service communication must be enabled.1 To do this, follow the steps below:

  1. Navigate to the IAM section of the Google Cloud Console.
  2. Make sure that the correct project is selected via the project selection in the toolbar above.
  3. Set a check mark at Include Google-provided role grants.
  4. Edit the principal of the service account with the name Cloud Storage for Firebase Service Agent.
  5. Click Add another role and select the Firebase Rules Firestore Service Agent role.
  6. Save the changes.

After that, it should look like this:

Enable cross-service communication

CORS configuration

Follow the instructions in the Firebase documentation to configure CORS for Cloud Storage.

Add Firebase to your app

Last but not least, you need to add your Firebase project to the app. To do this, follow the platform-specific instructions on the following pages:

Run the app

Now that you have set up Firebase, you app should be ready to go. To start the local development server, navigate into your project root and run the following command:

npm start

Navigate to http://localhost:4200/ in your browser to see the app running.

Take a look at the Development page to learn more about the development workflow and how to run the app on a mobile device.

  1. Manage permissions for cross-service Cloud Storage Security Rules ↩