Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js

Version 18.x or higher recommended

npm

Comes bundled with Node.js

Expo CLI

For React Native development

PostgreSQL

Required for the backend database

​
Initial Setup

1

Clone the repository

Clone the Rippler source code to your local machine:
git clone <repository-url>
cd source
2

Install dependencies

Install all project dependencies using npm:
npm install
This will install both production and development dependencies including:
  • React Native and Expo framework
  • Express server dependencies
  • Drizzle ORM for database management
  • TypeScript and linting tools
3

Configure environment variables

Set up your environment variables for database connection:
export DATABASE_URL="postgresql://user:password@localhost:5432/rippler"
The DATABASE_URL is required for Drizzle ORM to connect to your PostgreSQL database.
4

Initialize the database

Push the database schema to your PostgreSQL instance:
npm run db:push
This uses Drizzle Kit to create the necessary tables based on the schema defined in shared/schema.ts.

​
Development Environment Options

​
Expo Development (Mobile)

For React Native mobile development, use the Expo development server: 
npm run expo:dev
This command:
  • Starts the Expo development server
  • Enables hot reload for rapid development
  • Sets up proxy URLs for Replit environment (if applicable)
  • Allows testing on physical devices or emulators
The development server includes special environment variables for Replit deployment:
  • EXPO_PACKAGER_PROXY_URL
  • REACT_NATIVE_PACKAGER_HOSTNAME
  • EXPO_PUBLIC_DOMAIN

​
Backend Development

Run the Express server in development mode: 
npm run server:dev
This uses tsx to run TypeScript files directly with hot reload enabled.

​
Running Both Concurrently

For full-stack development, you’ll need to run both the Expo client and the backend server in separate terminal windows: 
npm run expo:dev

​
IDE Setup

ESLint

Lint your code with the Expo ESLint configuration

Prettier

Format code automatically on save

TypeScript

Enhanced TypeScript support

React Native Tools

Debugging and IntelliSense for React Native

​
TypeScript Configuration

The project uses strict TypeScript settings: 
{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "paths": {
      "@/*": ["./client/*"],
      "@shared/*": ["./shared/*"]
    }
  }
}
Path aliases are configured for cleaner imports:
  • @/* → maps to ./client/*
  • @shared/* → maps to ./shared/*

​
Code Quality Tools

​
Linting

The project uses ESLint with Expo’s configuration and Prettier integration: 
# Check for linting issues
npm run lint

# Automatically fix linting issues
npm run lint:fix

​
Type Checking

Run TypeScript type checking without emitting files: 
npm run check:types

​
Code Formatting

npm run check:format
The Prettier configuration formats:
  • JavaScript (.js)
  • TypeScript (.ts, .tsx)
  • CSS files
  • JSON files

​
Troubleshooting

If you encounter strange errors with the Metro bundler, try clearing the cache:
npx expo start --clear
Ensure your DATABASE_URL environment variable is set correctly and your PostgreSQL server is running:
# Check if PostgreSQL is running
pg_isready

# Verify your DATABASE_URL
echo $DATABASE_URL
Some dependencies require native modules. If you see errors related to native modules, try:
# Clear node modules and reinstall
rm -rf node_modules
npm install

# For iOS (if on macOS)
cd ios && pod install && cd ..
Path aliases are configured in three places:
  • tsconfig.json for TypeScript
  • babel.config.js for runtime resolution
Ensure all three are in sync if you add new aliases.

​
Next Steps

Project Structure

Learn about the codebase organization

Available Scripts

Explore all npm scripts and commands

Testing

Set up and run tests

Program Management

Understand the Rippler program structure

Build docs developers (and LLMs) love

Get started for freeTalk to us