Setting up the project

Project Contents

You will receive a file on download. It will have 3 folders

  1. App - This file contains all the code for Arivaa Firebase
  2. firebase-cloud-functions - Contains the cloud functions that need to deployed to firebase.
  3. Documentation.rtf (Contains the links to the website for Arivaa Firebase and its documentation)

System Requirements

  1. Node.js version >=6.0 and <=8.5.x should be installed. Download here (Note - Please don't use Node 10.x.x since it is not compatible with most of expo and react native yet.)
  2. NPM Version >=3.0 should be installed.
  3. React Native CLI. Install using npm install -g react-native-cli. For help, please check this link.
  4. Latest Expo CLI should be installed. Install using npm install -g expo-cli
  5. If you want to see the app running on your system, then your system should be connected to a simulator which should be installed.

    1. If you are on a Mac machine, then you can simply install X-code and I-phone, where the simulators are automatically installed. Follow the guide on this link.
    2. If you are on a Windows machine, you will be able to test it properly on a Android Simulator which can be installed using Genymotion or Android Studio.
  6. Firebase Tools. Install using npm install -g firebase-tools

Setting up

  1. Extract the folder. (Note -> If you copy the files from extracted folder, Do remember to copy the hidden files like .babelrc etc in app folder. Else you might face issues while starting the project.)

  2. In the extracted directory, Go to app and Run npm install.

  3. Run expo start to start the project using expo.

  4. There are 2 ways to open this project on a simulator. You can even test it on real device using the expo web GUI that will be opened in your browser after step-2.

    1. Via Expo browser GUI - On the left side you will see 2 options, Run on ios and Run on android.
    2. Via command line - Click on the terminal and press i for ios simulator and a for android simulator
  5. You can also run the development code on your mobile.

    1. In the Expo browser GUI on your system, click on publish/republish project. Remember, in order to reflect the requisite changes for internet based access, it is necessary to publish the project or the device should on the same network as the system on which expo is ran
    2. Install the expo app using App store/Play Store and open it.
    3. Click on Scan QR Code and scan the code showing on the Expo browser GUI on the left side in the terminal.
    4. The app should open on your mobile.
  6. Hosting the webview file over the web (Optional - Only required for Phone, Github and Twitter Authentication or if you don't intend to use our web view URL) :

    1. Under components/CustomWebview, there is a index.html which will have to be hosted over any online hosting that you might have. This is neccesary to support Github,Twitter and Phone Authentication. To read why, Check this section. This is a one time process normally, But if you change the index.html, then make sure to push the changes online.
    2. Put the URL of the page under key WEBVIEW_URL in js/config/environment.js.
  7. Firebase setup :

    1. Setup the the project in firebase by following instructions at this link.
    2. Go to the project in firebase console under the Authentication section on left sidebar and enable all sign in methods in Sign In Method Tab.
    3. Add the website url you used in step-4 in authorized domains at the bottom under Sign In Method Tab. Details
  8. Configure Social Authentication for Google and Facebook by following the instructions in this section. (Optional - Required only if facebook and google authentication are to be enabled)

  9. Deploy Cloud functions for sending push notifications via expo from firebase

    1. Go to firebase-cloud-functions/arivaa-firebase-cloud-functions/functions directory

    2. Run command npm install

    3. Run command npm run deploy and follow on screen instructions if any to configure firebase app.

    4. Go to firebase console-> Functions (From left sidebar) and verify that functions are created as per the screenshot. Note the URLs for each cloud function.

    1. Testing Push Notifications

    2. Open the project by following this scanning QR Code from step-5 in your mobile phone and signup.

    3. Go to profile and note down the uid for sending push notifications.

    4. Open the postman collection under firebase-cloud-functions/postman and update the URLs in the endpoints to match the URLs display in step-4.

    5. Test that you are able to send push notification using Send Push Notifications Request.

If you still face any issues in setting up the projects, contact us, and we will get back to you as soon as possible.

Published On June 6, 2020 11:34 PM

Last Updated June 7, 2020 11:11 AM