Make It Your Own

here come the steps to create your backends, deploy the API, and get your endpoints

Step 1: Create a Firebase project

  • In the Firebase console, click Add project, then select or enter a Project name.(e.g. pencilr)

  • (Optional) If you are creating a new project, you can edit the Project ID.

    Firebase automatically assigns a unique ID to your Firebase project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID.

  • Click Continue

  • Click Create project

Step 2: Register Your App With Firebase

  • In the center of the Firebase console's project overview page, click the Web icon (</>) to launch the setup workflow.

  • If you've already added an app to your Firebase project, click Add app to display the platform options.

  • Enter your app's nickname.

    This nickname is an internal, convenience identifier and is only visible to you in the Firebase console.

  • No need to setup “hosting”. Just uncheck hosting option.

  • Click Register app.

  • In the Firebase console, open Settings > Service Accounts.

  • Choose Nodejs, and then click Generate New Private Key, then confirm by clicking Generate Key.

  • Securely store the JSON file containing the key.

Step 3: Configure the database

  • Go to Databases , click on create database button, then choose production mode and then click next. If there was no create database but you see this window

then, click on Go to Cloud Platform button. It will take to you google cloud console. You will see the following option

click on Swtich to native mode button. That's it.

  • in the Firebase console, go to Databases > Rules and update the rules with the following:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}
  • Go to Databases > indexes and add indexes as follows:

  • Go to Storage > Rules and update it with the following:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
    }
  }
}

Step 4: Update some files in the api folder

  • Copy the content of the JSON file you saved in Step 2, copy everything between the braces {} and paste it here in api/functions/src/utils/serviceAccountKey.ts file:

    Leave const acc and export { acc } as-is

  • Go to the Firebase console, open Settings > General. Copy the following config:

    and paste it in src/utils/config.ts

  • Change the default project to the project name you just created. You can go to api/ .firebaserc file

  • Install firebase CLI

$  npm install -g firebase-tools
  • Open your terminal and cd to api/functions directory

$  cd api/functions
  • deploy your api to your firebase cloud by running the following commands

$ npm install
$ firebase login
$ npm run deploy
  • Copy your endpoint from your terminal or go to firebase console > your project >Functions.

Step 5: Update the endpoint in the app folder

  • Go to app/src/utils/config.ts file and update the endpoints PencilrAPI.API constant variable.

Step 6: Registering your app with Facebook

  • Enroll as a Facebook Developer: In order to create a Facebook app, open Facebook Developer and login to your account.

  • Add new app: option from the drop-down menu in the upper right corner.

  • Set up Facebook Login: Once the App ID is created, Add a Product webpage opens. Click set up option under Facebook login.

  • Select the platform of your application : select iOS and Android

  • Add host.exp.Exponent as an iOS Bundle ID.

  • Add rRW++LUjmZZ+58EbN5DVhGAnkX4= as an Android key hash.

  • Go to your facebook app dashboard and copy the app id

  • Go to app/src/utils/config.ts file and update the FBConfig.id constant variable with your new id you have just created.

Step 7: Test The App:

  • run the following command:

$ cd app

$ yarn start

Your browser will popup running a localhost server as follows:

Last updated