Bun_HTML_Server

A simple demonstration of Bun's HTML server capabilities with React and Svelte components integration.

📋 Overview

This project demonstrates Bun's ability to serve HTML files directly as a server using the command bun index.html. It explores the integration of both React and Svelte components within this simple server setup, along with state management using Preact's Signals.

🚀 Getting Started

Prerequisites

• Bun installed (v1.2.5+)

Installation

# Clone the repository
git clone https://github.com/yourusername/Bun_HTML_Server.git
cd Bun_HTML_Server

# Install dependencies
bun install

Running the Server

# Development mode
bun dev

# Build for production
bun build

# Preview production build
bun preview

🎯 Project Goals

The main objectives of this project are:

1. Test Bun's HTML Server Feature: Explore the simplicity of creating a server using just HTML files with bun index.html as described in the Bun HTML documentation.

2. Component Integration: Test the integration of both React (already supported) and Svelte (newly supported in Bun 1.2.5) components.

3. Shared State Management: Experiment with using Preact's Signals (specifically @preact/signals-react) as a shared state management solution that works in both React and Svelte components:

   • Use a single signal instance as the source of truth across different component frameworks
   • Demonstrate that @preact/signals-react can be imported and used effectively in Svelte components
   • Achieve real-time synchronization between React and Svelte components using the same signal

4. Persistence: Implement local storage to maintain state between page navigations and browser sessions.

📝 Key Features

• Multi-framework Integration: Seamlessly integrates React and Svelte components in the same application
• Shared State: Uses Preact's Signals for state management across different component frameworks
• Modern Styling: Implements Tailwind CSS with plugins for forms, typography, and DaisyUI components
• Optimized Build Process: Configured for development and production builds
• Local Storage Persistence: Maintains state between page navigations

🧩 Project Structure

Bun_HTML_Server/
├── src/                        # Source code directory
│   ├── react/                  # React components
│   │   ├── index.tsx           # Main React component
│   │   └── another.tsx         # Secondary page React component
│   ├── svelte/                 # Svelte components
│   │   ├── App.svelte          # Main Svelte component
│   │   └── svelte.ts           # Svelte mounting code
│   ├── stylesheet/             # CSS styles
│   │   └── styles.css          # Main stylesheet with Tailwind imports
│   ├── store.ts                # Shared state management
│   ├── index.html              # Main HTML entry point
│   └── another-page.html       # Secondary page HTML
├── build.ts                    # Build configuration
├── bunfig.toml                 # Bun configuration
├── package.json                # Project dependencies and scripts
├── tsconfig.json               # TypeScript configuration
└── README.md                   # Project documentation

🛠️ Technologies Used

• Bun: All-in-one JavaScript runtime and toolkit
• React 19: Library for building user interfaces
• Svelte 5: Component framework with a new reactive primitive ($state)
• Preact Signals: Fine-grained reactivity system
• Tailwind CSS: Utility-first CSS framework
• DaisyUI: Component library for Tailwind CSS
• TypeScript: Typed JavaScript

🔍 Implementation Details

State Management

The application uses Preact's Signals from the @preact/signals-react package to maintain state between React and Svelte components:

// src/store.ts
import {signal} from "@preact/signals-react";

export const count = signal(Number(localStorage.getItem("count") || 0));

Local Storage Persistence

The counter value is persisted in localStorage, allowing the state to be maintained between page navigations and browser refreshes:

// Example from React component
onClick={() => {
  localStorage.setItem("count", `${count.value + 1}`);
  count.value = Number(localStorage.getItem("count") || 0);
}}

Build Configuration

The project is configured for development and production builds using Bun's build API with plugins for Tailwind and Svelte:

// build.ts
import bunPluginTailwind from "bun-plugin-tailwind"
import bunPluginSvelte from "bun-plugin-svelte"

Bun.build({
  entrypoints: ["src/index.html", "src/another-page.html"],
  outdir: "./dist",
  minify: true,
  splitting: true,
  sourcemap: "linked",
  // ...other options
  plugins: [bunPluginTailwind, bunPluginSvelte],
});

📚 Learn More

• Bun Documentation
• Bun HTML Server - Information about Bun's HTML server capabilities
• React Documentation - Official React documentation
• React 19 Release Notes - Information about the latest React version
• Preact Signals
• Svelte Documentation

🙏 Acknowledgements

Thanks to the following tools and libraries that made this project possible:

• Bun - The all-in-one JavaScript runtime and toolkit
• React - The library for web and native user interfaces
• Svelte - Cybernetically enhanced web apps
• Preact - Fast 3kB alternative to React with the same modern API
• Tailwind CSS - A utility-first CSS framework
• DaisyUI - The most popular component library for Tailwind CSS

📄 License

MIT

This README was written with assistance from Claude, Anthropic's AI assistant.