F8 App 2017 - Deployment and Usage Guide

Prerequisites

Before setting up the F8 app, ensure you have the following installed:

Node.js (v10 or higher)
npm (v6 or higher)
React Native CLI (npm install -g react-native-cli)
Xcode (for iOS development, macOS only)
Android Studio (for Android development)
Cocoapods (for iOS dependencies, install with sudo gem install cocoapods)
Watchman (recommended for better file watching)
Git (for cloning the repository)

Installation

Clone the repository:

git clone https://github.com/fbsamples/f8app.git
cd f8app

Install dependencies:
```
npm install
```
Install iOS dependencies:
```
cd ios
pod install
cd ..
```
Set up the GraphQL server (required for data):
```
cd server
npm install
npm start
```

Configuration

The F8 app requires several configuration files and environment variables:

Create a .env file in the root directory with the following variables:
```
GRAPHQL_URL=http://localhost:4000
FB_APP_ID=YOUR_FACEBOOK_APP_ID
```
Facebook App Configuration:
- Create a Facebook App at developers.facebook.com
- Add iOS and Android platforms to your app
- Configure the bundle ID and package name as needed
GraphQL Server Configuration:
- The server runs on port 4000 by default
- No additional configuration needed for local development

Build & Run

iOS (macOS only)

Run on iOS Simulator:
```
react-native run-ios
```
Run on Physical Device:
- Connect your device via USB
- Open ios/F8.xcworkspace in Xcode
- Select your device and click "Run"

Android

Start the Android emulator or connect a physical device
Run the app:
```
react-native run-android
```

Development Mode

Both platforms support hot reloading
Metro bundler runs automatically on npm start
For debugging, use Chrome DevTools or React Native Debugger

Deployment

iOS App Store

Configure release settings in ios/F8.xcodeproj
Create an archive in Xcode using Product → Archive
Upload to App Store Connect using Xcode Organizer

Google Play Store

Generate a signed APK:
```
cd android
./gradlew assembleRelease
```
Upload the APK to Google Play Console

Alternative Deployment Options

Expo (for easier deployment, requires Expo SDK conversion)
Microsoft App Center (for CI/CD and distribution)
CodePush (for over-the-air updates)

Troubleshooting

Common Issues and Solutions

"Unable to resolve module" errors:
```
rm -rf node_modules && npm install
```
Metro bundler fails to start:
```
npm start -- --reset-cache
```

iOS build fails with Cocoapods:

cd ios && pod deintegrate && pod install

Android duplicate class errors:
- Check for conflicting dependencies in android/app/build.gradle
- Ensure React Native version matches your dependencies
Facebook login not working:
- Verify your Facebook App ID is correctly configured
- Check that your app domains are properly set in Facebook Developer Console
GraphQL data not loading:
- Ensure the GraphQL server is running on port 4000
- Check network connectivity in the app
Performance issues on older devices:
- Reduce image sizes in js/common/F8StyleSheet.js
- Consider enabling Hermes engine for better performance

Debug Mode

Enable remote debugging in development
Use console.log() statements for debugging
Check the React Native Debugger for network requests and state management

Testing

Run unit tests with npm test
Use Jest for component testing
Test on multiple device sizes and orientations

For more detailed setup instructions, visit the official tutorial at http://makeitopen.com/docs/en/1-A1-local-setup.html.

How to Deploy & Use fbsamples/f8app