Skip to main content
The Hayon frontend is a Next.js application (v16) built with TypeScript, Tailwind CSS, and shadcn/ui components. It communicates with the backend exclusively over HTTP REST and WebSocket (Socket.IO).
The backend must be running before you start the frontend. The frontend depends on NEXT_PUBLIC_API_BASE_URL to communicate with the API.
From the repository root: 
cd frontend
Or, if you installed workspace dependencies from the root, you can run frontend scripts directly: 
pnpm run dev --filter frontend

​
Install dependencies

If you haven’t already installed all workspace dependencies from the root, install them now: 
# From the repository root
pnpm install

# Or from inside frontend/
pnpm install

​
Configure environment variables

Create a .env.local file in the frontend/ directory. Next.js reads this file automatically during development and build. 
touch frontend/.env.local

# Backend API URL
NEXT_PUBLIC_API_BASE_URL=http://localhost:5000

# Google OAuth client ID (must match the backend GOOGLE_CLIENT_ID)
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
Only variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Never add secrets (API keys, private tokens) to .env.local with the NEXT_PUBLIC_ prefix.

​
Environment variable reference

VariableDescriptionExample
NEXT_PUBLIC_API_BASE_URLThe full URL of the running Hayon backendhttp://localhost:5000
NEXT_PUBLIC_GOOGLE_CLIENT_IDGoogle OAuth 2.0 client ID, used for the Google sign-in button123456789-xxxx.apps.googleusercontent.com
For the full environment variable reference (including backend variables), see Environment variables.

​
Start the development server

pnpm run dev
The application starts at http://localhost:3000. The dev script runs Next.js with the webpack bundler explicitly: 
"dev": "next dev --webpack"
The frontend runs on port 3000 by default. The backend runs on port 5000. Make sure NEXT_PUBLIC_API_BASE_URL matches the actual backend port.

​
Available scripts

ScriptCommandDescription
Development serverpnpm run devStarts the Next.js dev server with hot reload
Buildpnpm run buildCompiles and optimises the app for production
Production serverpnpm run startStarts the compiled production build
Lintpnpm run lintRuns ESLint on all files
Formatpnpm run formatRuns Prettier on all files

​
Production deployment on Vercel

Hayon’s frontend is designed to deploy to Vercel, which provides zero-configuration deployment for Next.js apps.
1

Push your code to GitHub

Make sure your latest changes are committed and pushed to a GitHub repository.
2

Import the project in Vercel

  1. Log in to vercel.com.
  2. Click Add New > Project.
  3. Import your GitHub repository.
  4. Set the Root Directory to frontend.
  5. Vercel will automatically detect the Next.js framework.
3

Configure environment variables in Vercel

In the Vercel project settings, navigate to Settings > Environment Variables and add:
VariableValue
NEXT_PUBLIC_API_BASE_URLYour production backend URL (e.g., https://api.yourdomain.com)
NEXT_PUBLIC_GOOGLE_CLIENT_IDYour Google OAuth client ID
Set these for the Production, Preview, and Development environments as appropriate.
4

Deploy

Click Deploy. Vercel will build and publish the application. Subsequent pushes to your main branch will trigger automatic re-deployments.
Set up a Preview deployment for each pull request by connecting your GitHub repository to Vercel. Preview deployments are useful for reviewing frontend changes before merging.

​
CORS configuration

The backend enforces strict CORS. Only requests from the origin specified in FRONTEND_URL (a backend environment variable) are allowed. Ensure the following values match exactly:
Backend variableFrontend origin
FRONTEND_URL=http://localhost:3000Development frontend at http://localhost:3000
FRONTEND_URL=https://app.yourdomain.comProduction Vercel deployment URL
If the origins do not match, all API requests from the frontend will be blocked by the browser with a CORS error. Update FRONTEND_URL on the backend whenever you change the frontend domain.

​
Adding a custom domain in Vercel

If you assign a custom domain to your Vercel deployment:
  1. Go to Settings > Domains in your Vercel project.
  2. Add your domain (e.g., app.yourdomain.com).
  3. Update FRONTEND_URL in your backend environment to match the new domain.
  4. Redeploy the backend so the change takes effect.

​
Connecting to the backend WebSocket

The frontend connects to the backend over Socket.IO for real-time notifications. The WebSocket connection is established using the same base URL as the REST API (NEXT_PUBLIC_API_BASE_URL). Make sure your production backend URL supports WebSocket connections. If you are using Nginx as a reverse proxy, include the WebSocket upgrade headers in your Nginx configuration (see Backend setup).

​
Troubleshooting

Check that the FRONTEND_URL environment variable on the backend matches the exact origin of the running frontend, including the protocol (http vs https) and port.
Verify that NEXT_PUBLIC_GOOGLE_CLIENT_ID is set in .env.local and that you have restarted the dev server after adding the variable.
Ensure the backend is running and that NEXT_PUBLIC_API_BASE_URL points to the correct host and port. Check the browser console for the specific WebSocket error.
Run pnpm run lint to identify type errors. Ensure you are using the correct Node.js and pnpm versions (see Prerequisites).

Build docs developers (and LLMs) love

Get started for freeTalk to us