npm package: @t.general/expo-firebase-starter
Description: A starter kit for expo with firebase
Author: Tafarry Goodman
Latest version: 0.0.9

# Expo Firebase Starter Kit (1.0.0)

This project serves as a starter kit to build expo applications with a firebase backend. <br/>
Designed to work with Android, Ios &amp; Web.<br/>
The app is written in [Typescript](https://www.typescriptlang.org/) primarily for code documentaion and ease of use. The rules are relaxed to allow vanilla JS and can be adjusted in `tsconfig.json`. <br/>
It comes prepacked with:
* firebase setup
* firebase emulators
* basic navigation
* basic admin web setup
* React Native Paper UI kit
* Bootstrap css for web admin

# Table of contents
1. [Getting Started](#Requirements)
2. [Installation](#Installation)
3. [Configurations](#Configurations)
4. [Commands](#Commands)
5. [Structure](#Structure)
   
   5.1.[Breakdown](#Breakdown) 
6. [Resources](#Resources)
7. [TODOS](#TODO)


# Getting Started

#### **Requirements**

* Install [nodejs 16](https://nodejs.org/en/download/)
* Install [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
* Intall [Expo cli](https://docs.expo.dev/workflow/expo-cli/) - `yarn global add expo-cli`
* Install [Firebase cli](https://firebase.google.com/docs/cli) - `yarn global add firebase-tools`
  
#### **Prerequisites**

Before begining, ensure that you have already been added to the firebase project in the [firebase console](https://console.firebase.google.com/) and have the project name ready at installation.


# Installation
Run `npx ...` in your terminal in your directory of choice and enter the required data when prompted. <br/>
The script will:
* create an app directory
* download the starter kit files
* setup firebase
* install all npm packages
 

From your [firebase console](https://console.firebase.google.com/), select the project and create: 

A web application. Copy the generated `firebaseConfig` data into the `./config/firebaseconfig.js` file.

An android application. Copy the generated `google-service.json` file into the `./assets/googleService/` directory.

An IOS application. Copy the generated `GoogleService-info.plist` file into the `./assets/googleService/` directory.


# Configurations

# Commands
The following commmands are found in the `package.json` file in the `script` section and can be used to assist development.


### Development Mode
* `yarn start` - starts up the expo application for development
* `yarn startWithEmulator` - starts up the expo application for development and connect it to the firebase emulator
* `yarn android` - starts up expo for android development only
* `yarn ios` - starts up expo for ios development only
* `yarn web` - starts up expo for web development only

cloud functions:
* `yarn start-firebase-emulators` - starts up the firebase emulators
* `yarn functions-dev` - starts up the firebase cloud function for development
* `yarn functions-deploy` - builds and deploys firebase cloud functions

building:
* `yarn build-android` - creates an android development build of the application
* `yarn build-ios` - creates an ios development build of the application
* `yarn build-web` - creates a web development build of the application
* `yarn publish` - publish updates to expo server ([doc](https://docs.expo.dev/workflow/publishing/))
* `yarn publish-web` - both builds and uploads web to firebase hosting (may need configuring)
* `yarn deploy` - only uploads web to firebase hosting (may need configuring)

msc.:
* `yarn release` - bumps app version


### Staging Mode
* `yarn stag-start` - starts up the expo application for development
* `yarn stag-startWithEmulator` - starts up the expo application for development and connect it to the firebase emulator
* `yarn stag-android` - starts up expo for android development only
* `yarn stag-ios` - starts up expo for ios development only
* `yarn stag-web` - starts up expo for web development only

building:
* `yarn stag-build-android` - creates an android development build of the application
* `yarn stag-build-ios` - creates an ios development build of the application
* `yarn stag-build-web` - creates a web development build of the application
* `yarn stag-publish` - publish updates to expo server ([doc](https://docs.expo.dev/workflow/publishing/))
* `yarn stag-publish-web` - both builds and uploads web to firebase hosting (may need configuring)
* `yarn stag-deploy` - only uploads web to firebase hosting (may need configuring)

msc.:
* `yarn stag-bump-Version` - bumps app version


### Production Mode
* `yarn prod-start` - starts up the expo application for development
* `yarn prod-startWithEmulator` - starts up the expo application for development and connect it to the firebase emulator
* `yarn prod-android` - starts up expo for android development only
* `yarn prod-ios` - starts up expo for ios development only
* `yarn prod-web` - starts up expo for web development only

building:
* `yarn prod-build-android` - creates an android development build of the application
* `yarn prod-build-ios` - creates an ios development build of the application
* `yarn prod-build-web` - creates a web development build of the application
* `yarn prod-publish` - publish updates to expo server ([doc](https://docs.expo.dev/workflow/publishing/))
* `yarn prod-publish-web` - both builds and uploads web to firebase hosting (may need configuring)
* `yarn prod-deploy` - only uploads web to firebase hosting (may need configuring)

msc.:
* `yarn prod-bump-Version` - bumps app version


# Structure
```
/
|__assets
|__config (stores app config for dev,staging,prod + firestore rules and indexes)
|__functions (cloud functions dev area) 
|__src
|__
|  |__componentLibrary
|  |__components (holds all reuseable components)
|  |__constants 
|  |__context (global state (react context))
|  |__hooks (react external hooks)
|  |  |__useCachedResources.ts (preload stuff during splash screen)
|  |__layouts (global page layouts)
|  |__navigation (react navigation v6)
|  |__routes 
|  |__screens (main app pages)
|  |__utils (handly reuseable functions)
|__web (expo's index.html + other web files)
|__web-build
|__.firebaserc
|__.versionrc.js
|__app.config.js
|__App.tsx (entry point)
|__eas.json (configure expo builds)
|__firebase.json (configure firebase)
|__package.json
|__tsconfig.json (configure typescript)

```
## Breakdown
1. **/assets** --- Used for core app assets such as icons, splash screens, etc
 
   1.1 **/assets/googleService** --- Used to store google-services.json &amp; GoogleService-Info.plist from firebase

2. **/config** --- Used to store the config files for:
   
   * expo's [app.json](https://docs.expo.dev/versions/latest/config/app/)
   * firebaseconfig.js (where you add the config generated by the firebase console)
   * all firebase rules and indexes
3. **/functions** --- Used as the dev directory for cloud functions
   3.1. **/functions/lib** --- Typescript generated file

   3.2. **/functions/src** --- Used as main dev directory
   
     &nbsp;&nbsp;&nbsp;&nbsp;3.2.1. **/functions/src/** ---
4. **/src** --- Used as the main app/web dev directory
 
   4.1. **/src/componentLibrary** ---
   
   4.2. **/src/components** --- Used for all reuse able individual components

   4.3. **/src/constants** --- Used for global configurations
   
   * **Firebase.ts** --- Used to initialize firebase
   * **GlobalTypes.ts** --- used for global typescript types
   *  **Schemas.ts** --- Used for [formik](https://formik.org/docs/api/withFormik#validationschema-schema--props-props--schema) forms schemas
   *  **Strings.ts** --- Used to avoid "hard coding" text
   *  **Theme.ts** --- Used for [React Native Paper](https://callstack.github.io/react-native-paper/) theming config

   4.4. **/src/context** --- Used for the app's global state using [React Context](https://reactjs.org/docs/context.html). Controls stuff like login status, used data, etc.

   4.5. **/src/hooks** --- Used as the app's data layer. Move all "business logic" from inside components/screens(view layer) to external, reuseable files, following [react hooks](https://reactjs.org/docs/hooks-custom.html) conventions.

   * **useCachedResources.ts** --- Used as an app preloader to load data during the splashscreen

   4.6. **/src/layouts** --- Used for global screen layouts and component designs

   4.7. **/src/navigation** --- Used for navigation design using [React Navigation](https://reactnavigation.org/docs/getting-started)

   4.8. **/src/routes** --- Used for navigation route design where links to new screens are added.

   4.9. **/src/screens** --- Used for app screes/pages

   4.10. **/src/utils** --- Used for resuable helper functions
5. **/web** --- Used as expo's web directory and stores index.html + other web files
6. **/web-build** --- Used as the web build directory
7. **.firebaserc**
8. **.versionrc.js** --- Used as the Standard Version config
9.  **app.config.js** --- expo's [app config](https://docs.expo.dev/versions/latest/config/app/)
10. **App.tsx** --- App entry point
11. **eas.json** --- Expo's [eas config](https://docs.expo.dev/build/eas-json/)
12. **firebase.json** --- Firebase's config file
13. **package.json**
14. **tsconfig.json** --- Typescript's configuration

# Resources
* [Expo documentation](https://docs.expo.dev/)
* [Firebase Documentation](https://firebase.google.com/docs/build)
* [React Context](https://reactjs.org/docs/context.html)
* [React Hooks](https://reactjs.org/docs/hooks-intro.html)
* [React Native Paper](https://callstack.github.io/react-native-paper/)
* [React Navigation](https://reactnavigation.org/docs/getting-started)
* [Standard Version](https://www.npmjs.com/package/standard-version)
* []()

# TODO:
* add scripts for firebase rules
* design a test layer