File size: 3,169 Bytes
246d201 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
# 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
```sh
# 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:
```sh
npm run dev
```
This will start the application in development mode. Open [http://localhost:3001](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:
```sh
# Build the application from the root directory
make build
# Start the application
make start
```
OR
```sh
# 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
```sh
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**.
```sh
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:
```sh
npm run test
```
## Contributing
Please read the [CONTRIBUTING.md](../CONTRIBUTING.md) file for details on our code of conduct, and the process for submitting pull requests to us.
## Troubleshooting
TODO
|