JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 118
  • Score
    100M100P100Q69485F
  • License MIT

Create BembaJS apps with one command (like create-next-app)

Package Exports

  • create-bembajs
  • create-bembajs/index.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-bembajs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

create-bembajs

npm version License: MIT

create-bembajs - Create BembaJS apps with one command (like create-next-app) πŸ‡ΏπŸ‡²

πŸš€ Quick Start

Using npm

npm create bembajs@latest my-app

Using npx

npx create-bembajs my-app

Using Bun

bun create bembajs my-app

πŸ“‹ Interactive Prompts

When you run create-bembajs, you'll be prompted with:

? What is your project name? β€Ί my-app
? Which template would you like to use? β€Ί Base (Recommended)
? Would you like to use TypeScript? β€Ί No
? Would you like to install dependencies? β€Ί Yes
? Would you like to initialize git? β€Ί Yes
? Would you like to open in VS Code? β€Ί Yes

🎯 Available Templates

A basic BembaJS application with:

  • Home page (amapeji/index.bemba)
  • About page (amapeji/about.bemba)
  • Button component (ifikopo/Button.bemba)
  • Card component (ifikopo/Card.bemba)
  • Hello API route (maapi/hello.bemba)

Dashboard

An admin dashboard template with:

  • Dashboard layout
  • Analytics components
  • Data tables
  • Charts and graphs
  • User management

E-commerce

An online store template with:

  • Product catalog
  • Shopping cart
  • Checkout process
  • User authentication
  • Payment integration

Blog

A content management template with:

  • Article listing
  • Individual post pages
  • Author profiles
  • Comment system
  • Search functionality

πŸ—οΈ Generated Project Structure

my-app/
β”œβ”€β”€ amapeji/              # Pages (like Next.js pages/)
β”‚   β”œβ”€β”€ index.bemba       # Home page
β”‚   └── about.bemba       # About page
β”œβ”€β”€ ifikopo/              # Components (like Next.js components/)
β”‚   β”œβ”€β”€ Button.bemba      # Reusable button
β”‚   └── Card.bemba        # Reusable card
β”œβ”€β”€ maapi/                # API routes (like Next.js api/)
β”‚   β”œβ”€β”€ hello.bemba       # Hello API
β”‚   └── users.bemba       # Users API
β”œβ”€β”€ maungu/               # Static files (like Next.js public/)
β”‚   β”œβ”€β”€ logo.png          # BembaJS logo
β”‚   └── style.css         # Global styles
β”œβ”€β”€ .vscode/              # VS Code configuration
β”‚   β”œβ”€β”€ settings.json     # Editor settings
β”‚   β”œβ”€β”€ extensions.json   # Recommended extensions
β”‚   └── launch.json       # Debug configuration
β”œβ”€β”€ bemba.config.js       # BembaJS configuration
β”œβ”€β”€ package.json          # Project dependencies
└── README.md             # Project documentation

βš™οΈ Configuration Options

Project Name

  • Required: Yes
  • Description: Name of your BembaJS project
  • Example: my-awesome-app

Template Selection

  • Base: Basic application structure
  • Dashboard: Admin dashboard with analytics
  • E-commerce: Online store template
  • Blog: Content management system

TypeScript Support

  • Default: No
  • Description: Enable TypeScript for type safety
  • Files: Adds .ts support and type definitions

Dependency Installation

  • Default: Yes
  • Description: Automatically install npm dependencies
  • Command: Runs npm install after project creation

Git Initialization

  • Default: Yes
  • Description: Initialize git repository
  • Command: Runs git init and creates initial commit

VS Code Integration

  • Default: Yes
  • Description: Open project in VS Code after creation
  • Command: Runs code . to open project

🎨 Custom Templates

You can create custom templates by:

  1. Creating template directory:
mkdir templates/my-template
  1. Adding template files:
templates/my-template/
β”œβ”€β”€ amapeji/
β”œβ”€β”€ ifikopo/
β”œβ”€β”€ maapi/
β”œβ”€β”€ maungu/
β”œβ”€β”€ package.json
└── README.md
  1. Updating template list:
const templates = [
  { name: 'Base', value: 'base' },
  { name: 'Dashboard', value: 'dashboard' },
  { name: 'E-commerce', value: 'ecommerce' },
  { name: 'Blog', value: 'blog' },
  { name: 'My Template', value: 'my-template' } // Add your template
];

πŸ”§ Advanced Usage

Programmatic Usage

const createBembaApp = require('create-bembajs');

await createBembaApp({
  name: 'my-app',
  template: 'base',
  typescript: false,
  install: true,
  git: true,
  vscode: false
});

Custom Options

# Skip prompts with flags
npx create-bembajs my-app --template dashboard --typescript --no-install

# Available flags:
--template <name>    # Template to use
--typescript         # Enable TypeScript
--no-install         # Skip dependency installation
--no-git             # Skip git initialization
--no-vscode          # Skip VS Code opening

πŸ“¦ Dependencies

The generated project includes:

Core Dependencies

  • bembajs - Main framework
  • bembajs-core - Compiler engine
  • react - UI library
  • react-dom - DOM rendering

Development Dependencies

  • @types/react - TypeScript types (if TypeScript enabled)
  • @types/react-dom - TypeScript types (if TypeScript enabled)
  • eslint - Code linting
  • prettier - Code formatting

πŸš€ Next Steps

After creating your project:

  1. Navigate to project:
cd my-app
  1. Start development server:
npm run dev
# or
bemba tungulula
  1. Build for production:
npm run build
# or
bemba akha
  1. Deploy:
npm run deploy

πŸ“„ License

MIT License - see LICENSE file for details.

🀝 Contributing

We welcome contributions! Please see our Contributing Guide.


Made with ❀️ in Zambia πŸ‡ΏπŸ‡²