Bun + React Full-Stack App

Overview

This template provides a high-performance, full-stack application built with Bun and React, offering a unified runtime and server-side rendering. It's ideal for developers seeking speed, type safety, and a streamlined development experience.

Features

✅ Full-Stack with Bun: A single, unified runtime for both server and front-end code.
✅ Server-Side Rendering (SSR): Achieves fast initial page loads and improved SEO.
✅ Type-Safe API: Powered by Igniter.js, ensuring end-to-end type safety between your front-end and back-end.
✅ Feature-Based Architecture: A scalable project structure that organizes code by business domain.
✅ Ready-to-Use Services: Pre-configured examples for:
- Caching: Integrated with Redis via @igniter-js/adapter-redis.
- Background Jobs: Asynchronous task processing with BullMQ via @igniter-js/adapter-bullmq.
- Structured Logging: Production-ready logging.
✅ TailwindCSS: A utility-first CSS framework for rapid UI development.
✅ Auto-Generated API Client: A fully-typed client that mirrors your API, providing autocomplete and compile-time error checking.

Project Structure

igniter.ts

igniter.client.ts

igniter.context.ts

igniter.router.ts

index.tsx

Quick Start

Clone the Repository

git clone https://github.com/felipebarcelospro/igniter-js.git
cd igniter-js/apps/starter-bun-react-app

Install Dependencies

bun install

npm install

pnpm install

yarn install

Configure Environment Variables

Create a .env file in the root of this starter and add your Redis connection URL:

# .env
REDIS_URL="redis://127.0.0.1:6379"

Run the Development Server

bun run dev

Your application will be available at http://localhost:3000.

Ensure you have Bun (v1.0 or higher) installed and a running Redis instance.

Key Features Explained

Bun Server (`src/index.tsx`)

The src/index.tsx file is the main entry point, using Bun's native serve function. It forwards API requests to Igniter.js and serves the React application for client-side routing.

Igniter.js API (`src/igniter.router.ts`)

Backend API logic is defined using Igniter.js:

Initialization (src/igniter.ts): Core Igniter instance configured with adapters for store (Redis), jobs (BullMQ), logging, and telemetry.
Router (src/igniter.router.ts): Defines all API controllers.
Controllers (src/features/example/controllers/example.controller.ts): Group related API actions (queries and mutations), demonstrating cache interaction and background job scheduling.

React Front-End (`src/app/`)

The user interface is a standard React application, with src/app/_app.tsx as the root component setting up providers, including IgniterProvider for the API client.

Type-Safe Client (`src/igniter.client.ts`)

Igniter.js automatically generates a type-safe client for seamless interaction with your backend from the frontend, providing full type-checking and autocompletion.

Deployment

This template can be deployed to various platforms that support Bun applications. Follow the quick start guide to get your application running locally, then refer to Bun's deployment documentation for production environments.

Framework

Use Case

Stack