Installation

Set up the Bun Hono Frontend Next.js application

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

   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

Variable	Description	Example
BACKEND_URL	URL where your Bun Hono backend is running	http://localhost:3000
USERNAME	Backend authentication username	Same as backend config
PASSWORD	Backend authentication password	Same 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.