Cloud function deploy

First you need to create a project in the firebase .

Firebase

This app uses Firebase as a backend to read and write data from the database. In this section, you will find all the steps required for the app setup and connect with Firebase.

Create a Firebase app

First you should create a free Firebase account and create a new app there. You can visit firebase.google.com signup if you didn't have an account with google earlier. If you have an account you can create a firebase app project. Enter your project Name and Select Region, and it will generate a firebase project for you.

Add Firebase to your ionic app

Once project Created, Navigate into Overview menu on the left side then you can see Add Firebase to your web app like the screenshot below. Latest UI of firebase website may change so our screenshot might look different compared to their new UI but there link and functionality almost same.

Copy app credential

Once you copy the Config credential can replace the current config details on firebase.config.ts

After performing the above steps run the below commands

npm install firebase-functions@latest firebase-admin@latest --save
npm install -g firebase-tools

To initialize your project:

  1. Run firebase login to log in via the browser and authenticate the firebase tool.

  2. Go to your Firebase project directory.

  3. Run firebase init functions. The tool gives you an option to install dependencies with npm. It is safe to decline if you want to manage dependencies in another way.

  4. The tool gives you two options for language support:

    For this tutorial, select JavaScript.

After these commands complete successfully, your project structure looks like this:

myproject
 +- .firebaserc    # Hidden file that helps you quickly switch between
 |                 # projects with `firebase use`
 |
 +- firebase.json  # Describes properties for your project
 |
 +- functions/     # Directory containing all your functions code
      |
      +- .eslintrc.json  # Optional file containing rules for JavaScript linting.
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- index.js      # main source file for your Cloud Functions code
      |
      +- node_modules/ # directory where your dependencies (declared in
                       # package.json) are installed

The package.json file created during initialization contains an important key: "engines": {"node": "8"}. This specifies your node version for writing and deploying functions. You can select other supported versions, but Node.js 8 (effectively the default) is recommended for this tutorial.

Creating Index :

Go to Database>Create database>Indexes >Create index manually >Click on create index as displayed in the screenshot below

After this it navigates to other window where you need to enter collection ID and fields to index select the query scope as collection and click on create index as displayed in the screenshot below (so that your index gets created successfully ).

After this run the below command so that your function gets deployed

$ firebase deploy --only functions

Then go to functions >dashboard you will get a url copy that as displayed in the screenshot below

Once you copy that navigate to your project directory in Visual Studio Code there click on src>app>pages >home.service.ts >you can find private base url:String = paste the url which you copied .

Then run the application again by running the following commands

** $ npm install **
** $ ionic serve **

Last updated