Repository: All-Hands-AI/OpenHands
Pull request: Fix issue #4103: Improve description of how to do frontend setup and testing in `.openhands_instructions`
This pull request fixes #4103.

The PR successfully addresses the issue by updating the .openhands_instructions file to include separate descriptions for both frontend and backend. The agent has added a concise summary of the frontend based on the frontend/README.md file, covering key aspects such as setup, development commands, testing, production build, environment variables, and internationalization. The backend section has also been expanded with more details. A new 'General Setup' section has been added for the entire repository. This comprehensive update provides clear instructions for navigating both parts of the repository, resolving the original issue of the file being too backend-focused.

Automatic fix generated by [OpenHands](https://github.com/All-Hands-AI/OpenHands/) 🙌

Problem statement:
Improve description of how to do frontend setup and testing in `.openhands_instructions`
**Summary**

The `.openhands_instructions` file provides instructions to the OpenHands coding agent about how to navigate this repository.
However, currently it only really covers backend. This file should be split into separate descriptions of frontend and backend. To gather the necessary information about the frontend, we can read `frontend/README.md` and very concisely summarize it.

This is just a documentation fix, so no tests are necessary.

Hints from issue discussion:
OpenHands started fixing the issue! You can monitor the progress [here](https://github.com/All-Hands-AI/OpenHands/actions/runs/11081614544).

Commit message: Fix issue #4103: Improve description of how to do frontend setup and testing in `.openhands_instructions`

Patch to review:
diff --git a/.openhands_instructions b/.openhands_instructions
index 015ea101a075..2e01582ed565 100644
--- a/.openhands_instructions
+++ b/.openhands_instructions
@@ -1,7 +1,30 @@
 OpenHands is an automated AI software engineer. It is a repo with a Python backend
-(in the `openhands` directory) and typescript frontend (in the `frontend` directory).
+(in the `openhands` directory) and TypeScript frontend (in the `frontend` directory).
 
-- Setup: To set up the repo, including frontend/backend you can `make build`
-- Backend Testing: All tests are in `tests/unit/test_*.py`. To test new code, you
-  can do `poetry run pytest tests/unit/test_xxx.py` where `xxx` is the appropriate
-  file for the current functionality. Write all tests with pytest.
+General Setup:
+- To set up the entire repo, including frontend and backend, run `make build`
+
+Backend:
+- Located in the `openhands` directory
+- Testing:
+  - All tests are in `tests/unit/test_*.py`
+  - To test new code, run `poetry run pytest tests/unit/test_xxx.py` where `xxx` is the appropriate file for the current functionality
+  - Write all tests with pytest
+
+Frontend:
+- Located in the `frontend` directory
+- Prerequisites: A recent version of NodeJS / NPM
+- Setup: Run `npm install` in the frontend directory
+- Development:
+  - Start the app: `npm run start -- --port 3001`
+  - View the app at http://localhost:3001
+- Testing:
+  - Run tests: `npm run test`
+  - To run specific tests: `npm run test -- -t "TestName"`
+- Building:
+  - Build for production: `npm run build`
+- Environment Variables:
+  - Set in `frontend/.env` or as environment variables
+  - Available variables: VITE_BACKEND_HOST, VITE_USE_TLS, VITE_INSECURE_SKIP_VERIFY, VITE_FRONTEND_PORT
+- Internationalization:
+  - Generate i18n declaration file: `npm run make-i18n`


Code review comments:
diff_hunk: @@ -1,7 +1,30 @@
 OpenHands is an automated AI software engineer. It is a repo with a Python backend
-(in the `openhands` directory) and typescript frontend (in the `frontend` directory).
+(in the `openhands` directory) and TypeScript frontend (in the `frontend` directory).
 
-- Setup: To set up the repo, including frontend/backend you can `make build`
-- Backend Testing: All tests are in `tests/unit/test_*.py`. To test new code, you
-  can do `poetry run pytest tests/unit/test_xxx.py` where `xxx` is the appropriate
-  file for the current functionality. Write all tests with pytest.
+General Setup:
+- To set up the entire repo, including frontend and backend, run `make build`
+
+Backend:
+- Located in the `openhands` directory
+- Testing:
+  - All tests are in `tests/unit/test_*.py`
+  - To test new code, run `poetry run pytest tests/unit/test_xxx.py` where `xxx` is the appropriate file for the current functionality
+  - Write all tests with pytest
+
+Frontend:
+- Located in the `frontend` directory
+- Prerequisites: A recent version of NodeJS / NPM
+- Setup: Run `npm install` in the frontend directory
+- Development:
+  - Start the app: `npm run start -- --port 3001`
+  - View the app at http://localhost:3001
path: .openhands_instructions
text: @user1:
```suggestion
```

Delete the stuff about running the app as this will stall OpenHands.