Getting Started with the OpenHands Frontend

Overview

This is the frontend of the OpenHands project. It is a React application that provides a web interface for the OpenHands project.

Tech Stack

Remix SPA Mode (React + Vite + React Router)
TypeScript
Redux
TanStack Query
Tailwind CSS
i18next
React Testing Library
Vitest
Mock Service Worker

Getting Started

Prerequisites

Node.js 20.x or later
npm, bun, or any other package manager that supports the package.json file

Installation

# Clone the repository
git clone https://github.com/All-Hands-AI/OpenHands.git

# Change the directory to the frontend
cd OpenHands/frontend

# Install the dependencies
npm install

Running the Application in Development Mode

We use msw to mock the backend API. To start the application with the mocked backend, run the following command:

npm run dev

This will start the application in development mode. Open http://localhost:3001 to view it in the browser.

NOTE: The backend is partially mocked using msw. Therefore, some features may not work as they would with the actual backend.

Running the Application with the Actual Backend (Production Mode)

There are two ways to run the application with the actual backend:

# Build the application from the root directory
make build

# Start the application
make start

# Start the backend from the root directory
make start-backend

# Build the frontend
cd frontend && npm run build

# Serve the frontend
npm start -- --port 3001

Environment Variables

TODO

Project Structure

frontend
├── __tests__ # Tests
├── public
├── src
│   ├── api # API calls
│   ├── assets
│   ├── components
│   ├── context # Local state management
│   ├── hooks # Custom hooks
│   ├── i18n # Internationalization
│   ├── mocks # MSW mocks for development
│   ├── routes # React Router file-based routes
│   ├── services
│   ├── state # Redux state management
│   ├── types
│   ├── utils # Utility/helper functions
│   └── root.tsx # Entry point
└── .env.sample # Sample environment variables

Components

Components are organized into folders based on their domain, feature, or shared functionality.

components
├── features # Domain-specific components
├── layout
├── modals
└── ui # Shared UI components

Features

Real-time updates with WebSockets
Internationalization
Router data loading with Remix
User authentication with GitHub OAuth (if saas mode is enabled)

Testing

We use Vitest for testing. To run the tests, run the following command:

npm run test

Contributing

Please read the CONTRIBUTING.md file for details on our code of conduct, and the process for submitting pull requests to us.

Troubleshooting