Install Dependencies
npm install
Set Up Environment Variables
Copy .env.example to .env.local and configure your API keys:
cp .env.example .env.local
Edit .env.local with your actual credentials (Firebase, Supabase, etc.)
Start Development Server
npm start
# or
npx expo start
This will start the Metro bundler. You can then:
i for iOS simulatora for Android emulatorw for web browsernpm run build
This creates a static export in the dist/ directory that can be deployed to:
Deployment Example (Vercel):
npm install -g vercel
vercel --prod
For production mobile builds, use Expo Application Services (EAS):
Install EAS CLI
npm install -g eas-cli
Configure EAS
eas build:configure
Build for iOS
eas build --platform ios --profile production
Build for Android
eas build --platform android --profile production
Submit to App Stores
# iOS App Store
eas submit --platform ios
# Google Play Store
eas submit --platform android
Navigate to the Supabase dashboard:
supabase/migrations/20250101000000_initial_schema.sql20250101000001_rls_policies.sqlAlternatively, use the Supabase CLI:
npm install -g supabase
supabase link --project-ref your-project-ref
supabase db push
Create the following storage buckets in Supabase Dashboard:
vehicle-photos (public)maintenance-attachments (private)owner-manuals (public)Set appropriate RLS policies for each bucket.
From Project Settings → General, get:
Add these to .env.local
Create a Firebase Cloud Function to sync authenticated users to Supabase:
// functions/index.js
const functions = require('firebase-functions');
const { createClient } = require('@supabase/supabase-js');
const supabase = createClient(
process.env.SUPABASE_URL,
process.env.SUPABASE_SERVICE_KEY
);
exports.syncUserToSupabase = functions.auth.user().onCreate(async (user) => {
await supabase.from('users').insert({
firebase_uid: user.uid,
email: user.email,
display_name: user.displayName,
avatar_url: user.photoURL,
});
});
npx tsc --noEmit
npm run lint
To auto-fix linting issues:
npm run lint -- --fix
npm test
expo-image componentBundle Size Analysis:
npx expo export --platform web --source-maps
# Analyze bundle with source-map-explorer
npm install -g source-map-explorer
source-map-explorer dist/_expo/static/js/web/*.js
Profile Performance:
npx expo start --profile
Install Sentry:
npm install @sentry/react-native
Configure in app/_layout.tsx:
import * as Sentry from '@sentry/react-native';
Sentry.init({
dsn: process.env.SENTRY_DSN,
enableInExpoDevelopment: false,
});
Install Mixpanel:
npm install mixpanel-react-native
Initialize in app entry point
Create .github/workflows/build.yml:
name: Build and Test
on:
push:
branches: [main, develop]
pull_request:
branches: [main, develop]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Type check
run: npx tsc --noEmit
- name: Lint
run: npm run lint
- name: Build web
run: npm run build
- name: Run tests
run: npm test
NODE_ENV=development
NODE_ENV=staging
NODE_ENV=production
Metro bundler cache issues:
npx expo start -c
iOS simulator not found:
xcode-select --install
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
Android build errors:
cd android
./gradlew clean
cd ..
npx expo run:android
Dependencies out of sync:
rm -rf node_modules package-lock.json
npm install
npx tsc --noEmit)npm run lint)npm test).env.production template up to date.env.local in .gitignoreUse these tools to track performance:
See Contributing Guidelines for code standards and pull request process.
Last Updated: December 30, 2024
Maintainer: @mmanthe37