Skip to main content
This guide will walk you through setting up Papillon for local development. Papillon is built with React Native and Expo, making it easy to develop for both iOS and Android.

​
Prerequisites

Before you begin, ensure you have the following installed:
1

Node.js

Install Node.js (LTS version recommended). You can download it from nodejs.org or use a version manager like nvm.
2

Git

Install Git for version control. Download from git-scm.com.
3

Platform-specific tools

Depending on your target platform:For iOS development:
  • macOS is required
  • Xcode 14 or later
  • CocoaPods (sudo gem install cocoapods)
  • iOS Simulator (included with Xcode)
For Android development:
  • Android Studio
  • Android SDK (API 34 or later)
  • Java Development Kit (JDK 11 or later)
  • Android Emulator or physical device

​
Clone the Repository

First, fork and clone the Papillon repository: 
git clone https://github.com/YOUR_USERNAME/Papillon.git
cd Papillon
Replace YOUR_USERNAME with your GitHub username if you’ve forked the repository.

​
Install Dependencies

Install all project dependencies using npm: 
npm install
This will install all packages defined in package.json, including:
  • Expo SDK (~54.0.32) - React Native framework
  • React Native (0.81.5) - Mobile app framework
  • WatermelonDB - Local database
  • Zustand - State management
  • Service integration libraries (pawnote, skolengojs, etc.)
The postinstall script will automatically run patch-package to apply any necessary patches to dependencies.

​
Run the Development Server

​
Start Expo

Start the Expo development server: 
npm start
This opens the Expo Dev Tools in your browser, where you can:
  • Press i to open iOS Simulator
  • Press a to open Android Emulator
  • Scan the QR code with Expo Go app on your physical device

​
Run on iOS

To run directly on iOS Simulator: 
npm run ios
iOS development requires macOS. The minimum iOS version supported is 17.6.

​
Run on Android

To run directly on Android Emulator or connected device: 
npm run android
Make sure you have an Android emulator running or a physical device connected with USB debugging enabled.

​
Run on Web

Papillon also supports web development for testing: 
npm run web

​
Development Scripts

Papillon includes several useful npm scripts for development: 
# Start Expo development server
npm start

# Run on specific platforms
npm run ios
npm run android
npm run web

​
Configuration Files

​
App Configuration

The main app configuration is in app.config.ts: 
{
  expo: {
    name: "Papillon",
    slug: "papillon",
    version: "8.3.4", // Auto-synced with package.json
    newArchEnabled: true, // React Native New Architecture enabled
    platforms: ["ios", "android"],
    // ... more configuration
  }
}
Papillon uses Expo’s New Architecture for improved performance. This is enabled by default in app.config.ts.

​
TypeScript Configuration

TypeScript is configured in tsconfig.json with strict mode enabled: 
{
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": ["./*"]
    }
  }
}
You can use the @/ alias to import from the project root: 
import { Pronote } from "@/services/pronote";
import { useAccountStore } from "@/stores/account";

​
Code Quality Tools

​
ESLint

Papillon uses ESLint with strict rules configured in eslint.config.mjs:
  • Indentation: 2 spaces
  • No console statements: Use the logger utility instead
  • Camelcase naming: Properties must use camelCase
  • Auto-sort imports: Imports are automatically sorted
  • Unused imports removal: Automatically removed on lint
Run the linter: 
npm run lint

​
Prettier

Code formatting is handled by Prettier with these settings: 
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": false,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}
Format your code: 
npm run format
Most editors can be configured to format on save. Check your editor’s Prettier integration.

​
Development Environment

​
Expo Dev Client

Papillon uses Expo Dev Client (not Expo Go) for development. This allows:
  • Native module development
  • Custom native code
  • Third-party libraries with native dependencies

​
Hot Reloading

The development server supports:
  • Fast Refresh: Instantly see changes without losing state
  • Hot Module Replacement: Update modules without full reload

​
Debugging

You can debug Papillon using:
  • React Native Debugger: Standalone debugging tool
  • Flipper: Facebook’s debugging platform
  • Chrome DevTools: For JavaScript debugging
  • Expo Dev Tools: Built-in Expo debugging interface

​
Common Issues

Clear the Metro bundler cache:
npx expo start --clear
Navigate to the iOS directory and reinstall pods:
cd ios
pod deintegrate
pod install
cd ..
Clean the Android build:
cd android
./gradlew clean
cd ..
Try these steps in order:
  1. Clear watchman: watchman watch-del-all
  2. Delete node_modules: rm -rf node_modules
  3. Clear cache: npm cache clean --force
  4. Reinstall: npm install
  5. Reset Metro: npx expo start --clear

​
Next Steps

Now that your development environment is set up:
Join our Discord community if you need help or have questions!

Build docs developers (and LLMs) love

Get started for freeTalk to us