Quick start

1. Create a new Bini.js app named my-app
2. cd my-app and start the dev server.
3. Visit http://localhost:3000.

System requirements

Before you begin, make sure your development environment meets the following requirements:

• Operating systems: macOS, Windows, and Linux.
• For desktop builds: Windows (C++ Build Tools), macOS (Xcode CLT), Linux (WebKitGTK)
• For mobile builds: Android (JDK 17, Android Studio), iOS (Xcode, CocoaPods)

Supported browsers

Bini.js supports modern browsers with zero configuration.

• Chrome 111+
• Edge 111+
• Firefox 111+
• Safari 16.4+

Create with the CLI

The quickest way to create a new Bini.js app is using create-bini-app, which sets up everything automatically for you. To create a project, run:

On installation, you'll see the following prompts:

Run the development server

1. Run npm run dev to start the development server.
2. Visit http://localhost:3000 to view your application.
3. Edit the app/page.tsx file and save it to see the updated result in your browser.

CLI Flags

Skip prompts by passing flags directly:

$ npx create-bini-app@latest my-app --typescript --tailwind
$ npx create-bini-app@latest my-app --javascript --css-modules
$ npx create-bini-app@latest my-app --platform macos
$ npx create-bini-app@latest my-app --platform android --app-name "My App" --nosign
$ npx create-bini-app@latest my-app --none
$ npx create-bini-app@latest my-app --force
$ npx create-bini-app@latest my-app --install

Set up TypeScript

Bini.js comes with built-in TypeScript support. To add TypeScript to your project, rename a file to .ts / .tsx and run npm run dev. Bini.js will automatically install the necessary dependencies and add a tsconfig.json file with the recommended config options.

Set up linting

Bini.js uses Oxlint for linting and Oxfmt for formatting — pre-configured and ready to use.

{
  "scripts": {
    "lint": "oxlint",
    "format": "oxfmt",
    "check": "npm run lint && npm run format"
  }
}

These scripts refer to the different stages of developing an application:

• npm run lint: Runs Oxlint (50-100× faster than ESLint).
• npm run format: Runs Oxfmt (Prettier-compatible).
• npm run check: Runs both lint and format.

Set up Absolute Imports and Module Path Aliases

Bini.js has built-in support for path aliases using the "paths" option in tsconfig.json.

These options allow you to alias project directories to absolute paths, making it easier and cleaner to import modules. For example:

// Before
import { Button } from '../../../components/button'

// After
import { Button } from '@/components/button'

Path aliases are configured by default:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { biniroute } from 'bini-router'
import path from 'path'

export default defineConfig({
  plugins: [react(), biniroute()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})