Package Exports

create-bini-app
create-bini-app/create-bini-app.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (create-bini-app) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🌀 Bini.js

A Vite-powered React framework for building fast, modern web applications with built-in API routes.

██████╗ ██╗███╗   ██╗██╗      ██╗███████╗
██╔══██╗██║████╗  ██║██║      ██║██╔════╝
██████╔╝██║██╔██╗ ██║██║      ██║███████╗
██╔══██╗██║██║╚██╗██║██║ ██   ██║╚════██║
██████╔╝██║██║ ╚████║██║ ╚█████╔╝███████║
╚═════╝ ╚═╝╚═╝  ╚═══╝╚═╝  ╚════╝ ╚══════╝

             Developed By Binidu

✨ Features

⚡ Lightning-fast Vite compilation with native ES modules
🔄 Client-side routing with React Router DOM
🎨 Multiple styling options - Tailwind, CSS Modules, or None
💉 Runtime code injection system for dynamic updates
🔥 Hot Module Replacement (HMR) for instant updates
📘 TypeScript support (optional)
📱 Mobile-optimized responsive design
🔌 File-based API routes like Next.js

🚀 Quick Start

Create a new Bini.js app interactively:

npx create-bini-app@latest my-bini-app
cd my-bini-app
npm install

🖥️ Running the Development Server

Start the development server:

npm run dev

This starts the Vite development server with Bini.js branding at http://localhost:3000

Run production preview:

npm run start

This serves the production build from the dist/ folder.

📦 Project Structure

my-bini-app/
├── src/
│   ├── pages/         # Page components (Home, About, etc.)
│   ├── components/    # Reusable React components
│   ├── styles/        # Global styles and CSS
│   ├── api/           # File-based API routes
│   ├── App.jsx/tsx    # Main app component with routing
│   └── main.jsx/tsx   # Application entry point
├── index.html         # Vite HTML template
├── vite.config.js     # Vite configuration with API plugin
├── package.json
└── .env.example       # Environment variables template

🔌 API Routes

Bini.js includes file-based API routes in src/api/.

Example routes:

src/api/
├── hello.js       → /api/hello
├── users.js       → /api/users
├── database-example.js → /api/database-example
└── posts/
    ├── index.js   → /api/posts
    └── [id].js    → /api/posts/1

Usage

// GET request to hello API
const res = await fetch('/api/hello');
const data = await res.json();
console.log(data);

The API routes support GET, POST, PUT, DELETE methods with in-memory defaults. You can integrate Firebase, MongoDB, or any other database by modifying the handler.

💉 Code Injection System

// Inject custom scripts at runtime
window.biniInjector.injectCode({
  id: 'custom-analytics',
  code: 'console.log("Analytics loaded!")',
  type: 'script'
});

// Inject custom styles
window.biniInjector.injectCode({
  id: 'custom-theme',
  code: 'body { background: #f0f0f0; }',
  type: 'style'
});

// Remove injections
window.biniInjector.removeInjection('custom-analytics');

🎨 Styling Options

Tailwind CSS (Recommended)
CSS Modules
None - bring your own styling

📝 Available Scripts

npm run dev - Start development server with Bini.js branding
npm run build - Build for production
npm run start - Preview production build (served from dist/)
npm run preview - Preview production build
npm run dev:vite - Start Vite directly without Bini.js branding

⚡ Performance Features

Fast cold starts with global module caching
Optimized builds with Vite's Rollup configuration
Tree shaking for minimal bundle sizes
Pre-bundled dependencies for faster installs

🔧 Configuration

TypeScript support (optional) with strict type checking
Fully customizable via vite.config.js
API routes ready for database integration

🤝 Contributing

We welcome contributions! Submit issues or pull requests freely.

📄 License

MIT License

Built with ❤️ using Bini.js v5.0.2 | Fast, Elegant, Developer-Friendly