Bun React Template Starter

This template is a starting point for building modern full-stack web applications using Bun, React, ElysiaJS, and Prisma. This project is designed to provide a fast, efficient, and structured development experience with a cutting-edge technology stack.

Key Features

• Super-Fast Runtime: Built on top of Bun, a high-performance JavaScript runtime.
• End-to-End Typesafe Backend: Utilizes ElysiaJS for a type-safe API from the backend to the frontend.
• Automatic API Documentation: Comes with Elysia Swagger to automatically generate interactive API documentation.
• Modern Frontend: A feature-rich and customizable user interface using React and Mantine UI.
• Easy Database Access: Integrated with Prisma as an ORM for intuitive and secure database interactions.
• Clear Project Structure: Logical file and folder organization to facilitate easy navigation and development.

Tech Stack

• Runtime: Bun
• Backend:
  • Framework: ElysiaJS
  • ElysiaJS Modules:
    • @elysiajs/cors: Manages Cross-Origin Resource Sharing policies.
    • @elysiajs/jwt: JSON Web Token-based authentication.
    • @elysiajs/swagger: Creates API documentation (Swagger/OpenAPI).
    • @elysiajs/eden: A typesafe RPC-like client to connect the frontend with the Elysia API.
• Frontend:
  • Library: React
  • UI Framework: Mantine
  • Routing: React Router
  • Data Fetching: SWR
• Database:
  • ORM: Prisma
  • Supported Databases: PostgreSQL (default), MySQL, SQLite, etc.
• Language: TypeScript

Getting Started

1. Clone the Repository

git clone https://github.com/your-username/bun-react-template-starter.git
cd bun-react-template-starter

2. Install Dependencies

Ensure you have Bun installed. Then, run the following command:

bun install

3. Configure Environment Variables

Copy the .env.example file to .env and customize the values.

cp .env.example .env

Fill in your .env file similar to the example below:

DATABASE_URL="postgresql://user:password@host:port/database?schema=public"
JWT_SECRET=a_super_long_and_secure_secret
BUN_PUBLIC_BASE_URL=http://localhost:3000
PORT=3000

After that, create TypeScript type declarations for your environment variables with the provided script:

bun run generate:env

This command will generate a types/env.d.ts file based on your .env.

4. Database Preparation

Make sure your PostgreSQL database server is running. Then, apply the Prisma schema to your database:

bunx prisma db push

You can also seed the database with initial data using the following script:

bun run seed

5. Running the Development Server

bun run dev

The application will be running at http://localhost:3000. The server supports hot-reloading, so changes in the code will be reflected instantly without needing a manual restart.

6. Accessing API Documentation (Swagger)

Once the server is running, you can access the automatically generated API documentation at:

http://localhost:3000/swagger

Available Scripts

• bun run dev: Runs the development server with hot-reloading.
• bun run build: Builds the frontend application for production into the dist directory.
• bun run start: Runs the application in production mode.
• bun run seed: Executes the database seeding script located in prisma/seed.ts.
• bun run generate:route: A utility to create new route files in the backend.
• bun run generate:env: Generates a type definition file (.d.ts) from the variables in .env.

Project Structure

/
├── bin/              # Utility scripts (generators)
├── prisma/           # Database schema, migrations, and seed
├── src/              # Main source code
│   ├── App.tsx       # Root application component
│   ├── clientRoutes.ts # Route definitions for the frontend
│   ├── frontend.tsx  # Entry point for client-side rendering (React)
│   ├── index.css     # Global CSS file
│   ├── index.html    # Main HTML template
│   ├── index.tsx     # Main entry point for the app (server and client)
│   ├── components/   # Reusable React components
│   ├── lib/          # Shared libraries/helpers (e.g., apiFetch)
│   ├── pages/        # React page components
│   └── server/       # Backend code (ElysiaJS)
│       ├── lib/      # Server-specific libraries (e.g., prisma client)
│       ├── middlewares/ # Middleware for the API
│       └── routes/   # API route files
└── types/            # TypeScript type definitions

Contributing

Contributions are highly welcome! Please feel free to create a pull request to add features, fix bugs, or improve the documentation.