Skip to content

Setup your project

Jump to bottom
SimCoder edited this page Dec 31, 2021 · 1 revision

  1. In this project you will find the following:

    1. frontend - React Native source code
    2. backend - Firebase Functions source code
    3. admin - admin panel source code

  2. Go to the frontend/app.json -> Change the android -> pachage for one of your own, example: com.xxxxx.yyyyy.

Expo Installation

First you need to install Nodejs and npm, this is different depending on the OS you are running so it is easier to check the node page

Install expo, if it fails run you might need to run this with sudo

npm install expo-cli --global

Install the needed packages while in the frontend folder

npm install expo
npm install

Setup Firebase

  1. Create a new Firebase project in the following link
  2. after that do the following:
    1. Go to the Realtime Database page:
      1. Create.
      2. select test rules.
    2. In the main page:
      1. Add web app.
      2. Copy the firebaseConfig and paste it into frontend/App.js/firebaseConfig of the project and paste them for the placeholder var that is already there
      3. Copy the firebaseConfig and paste it into admin/config/config.js of the project and replace the var that's already there
    3. Go to the Authentication page:
      1. Enter Sign-In Method.
      2. Select and activate: Email and password
      3. Create an admin account from the users page and copy the uid of that account
    4. Go to the Firestore page:
      1. Create Firestore Database
      2. Start in test mode
      3. Add a collection called admin with a doc with an id that's the uid of the admmin account
      4. Go to the rules and copy the contents of the file firestore_rules.txt that is in the root folder of the project and paste them in the rules
      5. In the indexes tab create the following index:
    5. Go to the Storage Page:
      1. Click on get started.
      2. Next
      3. Choose a location and click Done
      4. Go to the rules and copy the contents of the file firestore_rules.txt that is in the root folder of the project and paste them in the rules

Admin page setup

run the following commands while inside the admin folder

npm install
npm run build

Firebase Functions

  1. Install firebase tools, by running the following comand on your terminal npm install -g firebase-tools
  2. Open the backend folder on your terminal by cd to it.
  3. Copy the files in the folder to another place on your pc.
  4. Login to your firebase account by running the following comand: firebase login
  5. initialize the setup project with: firebase init
  6. Enter the following options into the terminal: a. ? Are you ready to proceed? Y b. ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Functions && Hosting. c. ? Please select an option: Use an existing project-> choose your project d. ? What language would you like to use to write Cloud Functions? Javascript e. ? Do you want to install dependencies with npm now? Y h. ? Configure as a single-page app (rewrite all urls to /index.html)? Y e. ? Do you want to use ESLint to catch probable bugs and enforce style? Y
  7. with the index.js file you copied in the begining of the firebase functions setup: a. replace index.js inside the functions folder.
  8. copy the contents of the build folder inside your admin folder to public
  9. Open firebase.json and remove the line inside the "predeploy" var

Run locally

You can now deploy the firebase backend and admin page by running the following command while inside the backend folder: 1. firebase deploy

You can now deploy the project to your device by doing: 1. Run expo start -c 2. Run it on any device you want

Deploy!

If you want to get a standalone apk or ipa file, you'll have to go to expo.io and create an account then do the following:

  1. Run expo build:android or expo build:ios
  2. wait for it to deploy, you can check it on your expo.io account
  3. Run expo credentials:manager and choose android copy the Google Certificate Fingerprint
  4. go to your firebase dashboard and add an android project pasting the sha1 key there along with the package name that you have in the app.json expo.android.package
  5. download the google-services.json
  6. move the google-service.json to the frontend folder
  7. copy the apikey that's inside the google-services.json to app.json -> expo.android.config.googleSignIn.api.key
  8. Run expo build:android or expo build:ios again

That is it! You have successfully deployed the project

Clone this wiki locally