Skip to main content
This guide covers the complete local development workflow for Skiff applications.

​
Monorepo Structure

Skiff uses a Yarn workspaces monorepo structure with multiple applications and shared libraries: 
skiff-apps/
├── skemail-web/          # Skiff Mail application
├── calendar-web/         # Skiff Calendar application
├── skiff-pages-drive/    # Skiff Pages & Drive application
├── libs/                 # Shared libraries
└── package.json          # Root workspace configuration

​
Environment Setup

​
Install Dependencies

After cloning the repository, install dependencies for all workspaces: 
yarn

​
Build Shared Libraries

Before running any application, build the shared libraries: 
yarn build:lib
This command builds the libs workspace, which includes all shared libraries that the applications depend on.

​
Development Workflow

​
Skiff Mail Development

The following scripts are available in skemail-web/package.json:
  • yarn dev - Start development server
  • yarn build - Build production bundle
  • yarn test - Run tests
  • yarn lint - Lint code
  • yarn lint:fix - Fix linting issues
  • yarn ts - Type check TypeScript
  • yarn codegen - Generate GraphQL types
To start the Skiff Mail development server:
yarn dev
The application will be available at http://localhost:4200/mail/inbox
To create a production build:
cd skemail-web
yarn build
This runs the following steps:
  1. Cleans previous builds (build:clean)
  2. Builds the main application (build-main)
  3. Packages the push service worker (package-push-sw)
Run the test suite:
cd skemail-web
yarn test
For watch mode:
yarn test-watch

​
Skiff Calendar Development

The following scripts are available in calendar-web/package.json:
  • yarn dev - Start development server
  • yarn build - Build production bundle
  • yarn test - Run tests
  • yarn lint - Lint code
  • yarn lint:fix - Fix linting issues
  • yarn ts - Type check TypeScript
  • yarn codegen - Generate GraphQL types
  • yarn protogen - Generate Protocol Buffer types
To start the Skiff Calendar development server:
cd calendar-web
yarn dev
To create a production build:
cd calendar-web
yarn build

​
Code Quality

​
Linting

Run ESLint to check for code quality issues: 
yarn lint
Automatically fix linting issues: 
yarn lint:fix
Check for circular dependencies: 
cd skemail-web
yarn lint:cycles

​
Type Checking

Run TypeScript type checking without emitting files: 
cd skemail-web
yarn ts

​
GraphQL Code Generation

Skiff uses GraphQL Code Generator to create TypeScript types from GraphQL schemas and operations. Generate GraphQL types: 
cd skemail-web
yarn codegen
This reads the configuration from codegen.yml and generates type-safe GraphQL hooks and types.

​
Working with Libraries

When making changes to shared libraries in the libs/ directory, you need to rebuild them: 
yarn build:lib
The build script builds libraries in dependency order to ensure proper linking.

​
Tips for Development

Hot Reload

The development server supports hot module replacement, so most changes will be reflected immediately without a full reload.

Mock Data

The local development environment uses mock data. API access may be added in the future.

Workspaces

Yarn workspaces automatically link dependencies between packages. Changes to libraries are immediately available to applications.

Parallel Testing

Tests run with limited parallelism (--maxWorkers=2) to optimize memory usage.

​
Troubleshooting

​
Clean Build

If you encounter build issues, try cleaning the build artifacts: 
# Clean skemail-web build
cd skemail-web
yarn build:clean

# Clean webpack cache
yarn webpack:clean

​
Rebuild Everything

For persistent issues, rebuild from scratch: 
# From root directory
rm -rf node_modules
rm -rf .yarn/.cache
yarn
yarn build:lib

Build docs developers (and LLMs) love

Get started for freeTalk to us