Skip to main content
This guide will help you set up your local development environment for contributing to Openlane UI.

​
Prerequisites

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

Operating System

The project is optimized for macOS environments. If you’re using Linux or Windows, you may need to adapt some commands from the Taskfile.yaml.
2

Node.js

Install Node.js version 24.14.x as specified in the project’s engine requirements.
node --version
# Should output v24.14.x
3

Bun Package Manager

The project uses Bun 1.2.16 as its package manager. Install it using:
curl -fsSL https://bun.sh/install | bash
Verify the installation:
bun --version
# Should output 1.2.16
4

Task Runner

Install Task for running development tasks:
brew install go-task/tap/go-task
5

Pre-commit Hooks

Install pre-commit for code quality checks:
brew install pre-commit

​
Automated Setup

The easiest way to set up your development environment is using the automated setup task: 
task local-setup
This command will:
  • Install Bun package manager
  • Install pre-commit hooks
  • Configure git hooks
  • Run initial code quality checks
The local-setup task is designed for macOS. Linux and Windows users should review the Taskfile.yaml for equivalent commands.

​
Manual Setup

If you prefer to set up your environment manually, follow these steps:
1

Install Bun

task install-bun
2

Install Pre-commit

task install-precommit
3

Configure Git Hooks

pre-commit install && pre-commit install-hooks
pre-commit autoupdate
4

Install Dependencies

task install
This runs bun install to install all project dependencies.

​
Technology Stack

Openlane UI is built with the following technologies:
  • TypeScript - Static type-checking
  • Bun - Fast all-in-one JavaScript runtime and toolkit
  • Turborepo - High-performance build system for monorepos
  • Next.js - React framework for web applications
  • React 19.2.4 - UI library
  • Tailwind CSS - Utility-first CSS framework
  • SWR - Data fetching and caching
  • ESLint - Code linting
  • Prettier - Code formatting

​
Repository Structure

The monorepo is organized into apps and packages:

​
Applications

​
Packages

  • @repo/codegen - Generated GraphQL functions for API requests
  • @repo/ui - Shared UI component library
  • @repo/dally - DAL library for common patterns
  • @repo/eslint-config - ESLint configurations
  • @repo/config-typescript - Shared TypeScript configs
  • @repo/tailwind-config - Shared Tailwind configuration

​
Environment Configuration

The project uses environment variables for configuration. Turborepo v2 requires the .env file to live in the app directory. 
cp ./config/.env.example ./apps/console/.env
Review and update the environment variables based on your needs. Key variables include:
  • NEXT_PUBLIC_OPENLANE_URL - Backend API URL (default: http://localhost:17608)
  • NEXT_PUBLIC_API_GQL_URL - GraphQL API endpoint
  • AUTH_GITHUB_ID / AUTH_GITHUB_SECRET - GitHub OAuth credentials
  • AUTH_GOOGLE_ID / AUTH_GOOGLE_SECRET - Google OAuth credentials
  • NEXT_PUBLIC_ALLOWED_LOGIN_DOMAINS - Allowed email domains for login (leave empty for all)
For local development, you can leave NEXT_PUBLIC_ALLOWED_LOGIN_DOMAINS empty to allow all email domains.

​
Backend Setup

The Openlane UI console communicates with the Openlane Core backend API. To run the full stack locally, you’ll need to set up the backend. See the Core repository README for instructions.

​
Verification

Verify your setup by running: 
task --list
You should see a list of available tasks. If this works, your environment is ready!

​
Next Steps

Now that your environment is set up:

Build docs developers (and LLMs) love

Get started for freeTalk to us