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.

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

             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)
🖥️ SSR-ready configuration
📱 Mobile-optimized responsive design

🚀 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 at http://localhost:3000

📦 Project Structure

my-bini-app/
├── src/
│   ├── pages/         # Page components (Home, About, etc.)
│   ├── components/    # Reusable React components
│   ├── styles/        # Global styles and CSS
│   ├── injection/     # Runtime code injection system
│   ├── App.jsx/tsx    # Main app component with routing
│   └── main.jsx/tsx   # Application entry point
├── index.html         # Vite HTML template
├── vite.config.js     # Vite configuration
├── startDev.js        # Custom development script with Bini.js branding
└── package.json

💉 Code Injection System

Bini.js includes a powerful runtime 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 when needed
window.biniInjector.removeInjection('custom-analytics');

🎨 Styling Options

Bini.js supports multiple styling approaches:

Tailwind CSS (Recommended) - Utility-first CSS framework

CSS Modules - Scoped CSS with modular imports

None - Bring your own styling solution

📝 Available Scripts

npm run dev - Start development server with Bini.js branding

npm run build - Build for production

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

Opt-in TypeScript support with strict type checking and modern TSX.

SSR Ready

Pre-configured for Server-Side Rendering when needed.

Customizable

Modify vite.config.js to add plugins, configure aliases, or adjust build options.

🚀 Production Deployment

npm run build

JSPM

create-bini-app