onyx/web

This is a Next.js project bootstrapped with create-next-app.

Getting Started

Install node / npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm Install all dependencies: npm i.

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Note: if you are having problems accessing the ^, try setting the WEB_DOMAIN env variable to http://127.0.0.1:3000 and accessing it there.

Tip

Packages are installed automatically when switching branches after package.json changes with pre-commit configured.

Connecting to a Cloud Backend

To test your local frontend development server against a cloud backend (e.g., staging or production), create a .env.local file in the web/ directory with the following configuration:

# Point local dev server to cloud backend
INTERNAL_URL=https://st-dev.onyx.app/api

# Debug auth cookie for authenticating against remote backend
# This cookie is automatically injected into API requests when in development mode
# To get this value:
#   1. Go to https://st-dev.onyx.app (or your target backend URL) and log in
#   2. Open DevTools (F12) → Application → Cookies → [your backend domain]
#   3. Find the "fastapiusersauth" cookie and copy its value
#   4. Paste the value below (without quotes)
# Note: This cookie may expire, so you may need to refresh it periodically
DEBUG_AUTH_COOKIE=your_cookie_value_here

By default, this does NOT override existing cookies, so if you've logged in previously, you may need to delete the cookies for the localhost domain.

Important notes:

• The .env.local file should be created in the web/ directory (same level as package.json)
• After creating or modifying .env.local, restart your development server for changes to take effect
• The DEBUG_AUTH_COOKIE is only used in development mode (NODE_ENV=development)
• If INTERNAL_URL is not set, the frontend will connect to the local backend at http://127.0.0.1:8080
• Keep your .env.local file secure and never commit it to version control (it should already be in .gitignore)

Testing

This testing process will reset your application into a clean state. Don't run these tests if you don't want to do this!

Bring up the entire application.

0. Install playwright dependencies

npx playwright install

1. Run playwright

npx playwright test

To run a single test:

npx playwright test landing-page.spec.ts

If running locally, interactive options can help you see exactly what is happening in the test.

npx playwright test --ui
npx playwright test --headed

2. Inspect results

By default, playwright.config.ts is configured to output the results to:

web/output/playwright/

3. Visual regression screenshots

Screenshots are captured automatically during test runs and saved to web/output/screenshots/. To compare screenshots across CI runs, use:

ods screenshot-diff compare --project admin

For more information, see tools/ods/README.md.