🚀 React + Elysia Starter Template

A modern, blazing-fast full-stack starter template combining the power of React, Vite, Elysia, and Bun.

✨ Features

Frontend

• React 19 - Latest version with cutting-edge features
• Vite - Lightning-fast development experience with HMR
• Tailwind CSS 4 - Utility-first CSS framework for rapid UI development
• Framer Motion - Production-ready motion library for React

Backend

• Elysia - Fast and elegant web framework for Bun
• Bun - All-in-one JavaScript runtime & toolkit (faster than Node.js)

📦 Project Structure

react-elysia-starter/
├── client/                 # Frontend React application
│   ├── public/            # Static assets
│   │   ├── react.svg
│   │   ├── vite.svg
│   │   └── elysia.svg
│   ├── src/
│   │   ├── App.tsx        # Main app component
│   │   ├── main.tsx       # React entry point
│   │   └── index.css      # Global styles (Tailwind)
│   ├── package.json
│   └── vite.config.ts     # Vite configuration
│
└── server/                # Backend Elysia application
    ├── index.ts           # Main server file
    ├── package.json
    └── tsconfig.json

🛠️ Prerequisites

Make sure you have Bun installed on your machine.

# Install Bun (macOS, Linux, and WSL)
curl -fsSL https://bun.sh/install | bash

# Install Bun (Windows)
powershell -c "irm bun.sh/install.ps1 | iex"

🚀 Getting Started

1. Clone the repository

git clone https://github.com/N0Vee/react-elysia-starter.git
cd react-elysia-starter

2. Install dependencies

# Install client dependencies
cd client
bun install

# Install server dependencies
cd ../server
bun install

3. Run the development servers

Terminal 1 - Frontend (Vite Dev Server):

cd client
bun dev

The frontend will be available at http://localhost:5173

Terminal 2 - Backend (Elysia Server):

cd server
bun dev

The backend will be available at http://localhost:3001

📝 Available Scripts

Client

Command	Description
bun dev	Start development server with HMR
bun build	Build for production
bun preview	Preview production build
bun lint	Run ESLint

Server

Command	Description
bun dev	Start Elysia server with hot reload
bun index.ts	Run server without hot reload

🌐 API Endpoints

The backend server provides the following endpoints:

• GET / - Welcome message

  "Hello from Elysia + Bun!"

• GET /api/hello - API test endpoint

  {
    "message": "Hello API"
  }

🎨 Tech Stack

Frontend

• React - UI library
• Vite - Build tool
• Tailwind CSS - CSS framework
• Framer Motion - Animation library
• React Router - Routing
• Axios - HTTP client

Backend

• Elysia - Web framework
• Bun - JavaScript runtime

Development

• TypeScript - Type safety
• ESLint - Code linting

🔧 Configuration

Vite Configuration

The Vite config includes:

• React plugin with Babel React Compiler
• Tailwind CSS plugin
• Fast Refresh for instant HMR

Tailwind CSS

Tailwind CSS v4 is configured with the new @import "tailwindcss" syntax in index.css.

CORS

CORS is enabled on the Elysia server for cross-origin requests from the frontend.

Docker

Production Deployment

# Build and run with Docker Compose
docker-compose up -d --build

# Access the application
# Frontend: http://localhost:3000
# Backend: http://localhost:3001

# View logs
docker-compose logs -f

# Stop services
docker-compose down

Individual Services

# Build and run server only
cd server
docker build -t elysia-server .
docker run -p 3001:3001 elysia-server

# Build and run client only
cd client
docker build -t react-client .
docker run -p 3000:80 react-client

�📚 Learn More

• React Documentation
• Vite Documentation
• Elysia Documentation
• Bun Documentation
• Tailwind CSS Documentation
• Framer Motion Documentation

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

📄 License

MIT

🎉 Happy Coding!

Built with ❤️ using React, Vite, Elysia, and Bun

react-elysia-starter