Skip to main content

​
Prerequisites

Before installing the frontend application, ensure you have the following:
The backend server must be running before starting the frontend. This application connects to the Bun Hono Backend to fetch and manage data.
  • Node.js: Version 20 or higher
  • Package Manager: pnpm, npm, or yarn
  • Backend Server: Bun Hono Backend running and accessible
  • Backend Credentials: Username and password matching your backend configuration

​
Install Dependencies

1

Clone the repository

First, clone the repository to your local machine:
git clone https://github.com/your-repo/bun-hono-frontend-nextjs.git
cd bun-hono-frontend-nextjs
2

Install packages

Install the project dependencies using your preferred package manager:
pnpm install
This will install all required dependencies including:
  • Next.js 15.2.4 with React 19
  • Radix UI components for the interface
  • Tailwind CSS for styling
  • Lucide React for icons
  • Zod for validation

​
Environment Configuration

Create a .env file in the root directory of your project to configure the connection to your backend:
.env
BACKEND_URL=http://localhost:3000
USERNAME="your-backend-username"
PASSWORD="your-backend-password"
The USERNAME and PASSWORD must match the credentials configured in your backend server. These are used for Basic Authentication when making API requests.

​
Environment Variables Explained

VariableDescriptionExample
BACKEND_URLURL where your Bun Hono backend is runninghttp://localhost:3000
USERNAMEBackend authentication usernameSame as backend config
PASSWORDBackend authentication passwordSame as backend config
If your backend is running on a different port, update the BACKEND_URL accordingly. The frontend will automatically run on port 3001 if the backend is on port 3000.

​
Port Configuration

By default:
  • Backend: Runs on port 3000
  • Frontend: Runs on port 3001
If your backend runs on a different port, update the BACKEND_URL in your .env file to match.

​
Next Steps

Once installation is complete, proceed to the Quickstart guide to run the application and start using it.

Build docs developers (and LLMs) love

Get started for freeTalk to us