Environment Variables

The Bun Hono Frontend Next.js application requires environment variables to connect to the backend API and authenticate requests.

Required Environment Variables

The application requires three essential environment variables to function properly:

BACKEND_URL

string

required

The base URL of your Bun Hono backend server.Default: http://localhost:3000If your backend is running on a different port or host, update this value accordingly.

USERNAME

string

required

The username for Basic Authentication with the backend API.Important: This must match the username configured in your Bun Hono backend.

PASSWORD

string

required

The password for Basic Authentication with the backend API.Important: This must match the password configured in your Bun Hono backend.

Setup Instructions

Create the .env file

Create a .env file in the root directory of your project:

touch .env

Add environment variables

Add the following variables to your .env file:

.env

BACKEND_URL=http://localhost:3000
USERNAME=""
PASSWORD=""

The USERNAME and PASSWORD values should match the credentials you configured in your Bun Hono backend.

Configure credentials

Replace the empty strings with your actual credentials:

.env

BACKEND_URL=http://localhost:3000
USERNAME="your-username"
PASSWORD="your-secure-password"

Restart the development server

If your development server is already running, restart it to load the new environment variables:

pnpm run dev

Port Configuration

If your backend is running on port 3000, the Next.js frontend will automatically run on port 3001 to avoid conflicts.

If your backend runs on a different port, update the BACKEND_URL accordingly:

.env

# Backend running on port 8080
BACKEND_URL=http://localhost:8080

How Environment Variables Are Used

These environment variables are accessed in server actions throughout the application. Here’s how they’re used:

Backend URL

The BACKEND_URL is used to construct API endpoints:

src/lib/actions/message/createMessage.ts

const response = await fetch(
  `${process.env.BACKEND_URL}/messages/create-one`,
  {
    method: "POST",
    headers: {
      Authorization: `Basic ${Buffer.from(
        `${process.env.USERNAME}:${process.env.PASSWORD}`
      ).toString("base64")}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(parsedData.data),
  }
);

Authentication Credentials

The USERNAME and PASSWORD are encoded as Base64 for Basic Authentication:

Authorization: `Basic ${Buffer.from(
  `${process.env.USERNAME}:${process.env.PASSWORD}`
).toString("base64")}`

This authentication header is included in every request to the backend API.

Security Best Practices

Never commit your .env file to version control. The .env file should be included in your .gitignore.

Add .env to .gitignore

Ensure your .gitignore includes:

.env
.env.local
.env.production

Use strong passwords

Use strong, unique passwords for the PASSWORD variable, especially in production environments.

Environment-specific files

Consider using different environment files for different stages:

.env.local - Local development (overrides .env)
.env.production - Production settings
.env.example - Template file to commit to version control

Troubleshooting

Connection Refused

If you see connection errors, verify:

The backend server is running
The BACKEND_URL matches the backend’s actual URL and port
There are no firewall rules blocking the connection

Authentication Errors

If you receive 401 Unauthorized errors:

Verify USERNAME and PASSWORD match the backend configuration
Check for extra spaces or quotes in your .env file
Restart the development server after changing credentials