Skip to Content
ContributeFrontendGetting Started

Getting Started

This guide will help you set up and run the Rhesis frontend application locally for development.

Prerequisites

Before you begin, ensure you have the following installed:

Installation Steps

1. Clone the Repository

Terminal
git clone https://github.com/rhesis-ai/rhesis.git
cd rhesis/apps/frontend

2. Install Dependencies

Terminal
npm install
# or
yarn install

3. Set Up Environment Variables

Copy the example environment file (at the repo root) and fill in the required values:

Terminal
cp ../../.env.example .env.local

Update .env.local with the necessary configurations:

  • NEXTAUTH_SECRET: Generate one using npx auth secret or openssl rand -hex 32.
  • API_BASE_URL: The base URL for your backend API. The frontend exposes it to browser code at runtime through window.__ENV__.
  • AUTH_SECRET: Should be the same as NEXTAUTH_SECRET.
  • GOOGLE_CLIENT_ID: (Optional) Your Google OAuth Client ID. Enables Google sign-in.
  • GOOGLE_CLIENT_SECRET: (Optional) Your Google OAuth Client Secret.
  • GH_CLIENT_ID: (Optional) Your GitHub OAuth Client ID. Enables GitHub sign-in.
  • GH_CLIENT_SECRET: (Optional) Your GitHub OAuth Client Secret.

4. Run the Development Server

Terminal
npm run dev

Open http://localhost:3000  in your browser to see the application.

Development Workflow

Available Scripts

  • npm run dev: Starts the development server (Webpack). npm run dev:turbo runs the same server with Turbopack — this is what ./rh dev frontend uses.
  • npm run build: Cleans .next and builds the application for production. Run type-check and lint separately first, or use make lint/make lint-fast (below), which chain them.
  • npm run start: Starts a production server (after building).
  • npm run lint: Lints the codebase using Next.js’s built-in ESLint configuration.
  • npm run type-check: Validates TypeScript types.
  • npm run clean: Removes the .next directory.

Linting and formatting

From apps/frontend:

lint-and-format.sh
make format        # Prettier — write fixes (npm run format)
make format-check  # Prettier — check only (npm run format:check)
make eslint        # ESLint — fails if eslint output contains "Error:" (npm run lint)

Full gate (format check, types, ESLint, then next build): make lint. Without the production build step: make lint-fast. See targets in Makefile.

Code Editor Setup

We recommend using Visual Studio Code with the following extensions:

  • ESLint
  • Prettier
  • TypeScript and JavaScript Language Features
  • Material Icon Theme (optional)
  • GitLens (optional)

Create or update your .vscode/settings.json file with:

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

Next Steps

After setting up your development environment:

  1. Explore the Architecture Overview to understand the project structure
  2. Check out the Component Library to learn about available UI components
  3. Review the API Integration documentation to understand backend connectivity
  4. Read the Contributing Guidelines  before making changes

Troubleshooting

Common Issues

”Module not found” errors

  • Ensure all dependencies are installed
  • Check for typos in import paths
  • Verify that the module exists in node_modules

Authentication Issues

  • Verify environment variables are correctly set
  • Check browser console for errors
  • Ensure the backend API is running and accessible

Build Errors

  • Run npm run clean to clear the build cache
  • Verify TypeScript types with npm run type-check
  • Check for ESLint errors with npm run lint

For additional help, please refer to the Next.js documentation  or reach out to the team on Discord.

OverviewArchitecture