create-blocklet

create-blocklet

The fastest way to create modern blocklet applications

📚 Documentation • 🐛 Issues • 💬 Discussions

✨ Features

• 🚀 Quick Setup - Get started in seconds with a single command
• 🎯 Multiple Templates - Choose from 20+ production-ready templates
• 🔧 Framework Agnostic - Support for React, Vue, Svelte, SolidJS, and more
• 🌐 Full-Stack Ready - Templates for dApps, static sites, and APIs
• 📦 Modern Tooling - Built with Vite, TypeScript, and modern build tools
• 🔒 DID Integration - Built-in support for decentralized identity
• 🎨 Customizable - Easy to extend and customize for your needs

🚀 Quick Start

# Create a new blocklet project
npx create-blocklet my-blocklet

# Or use your preferred package manager
pnpm create blocklet my-blocklet
yarn create blocklet my-blocklet

Compatibility Note: Blocklet templates require Node.js version >=20.0.0.

📋 Available Templates

🌐 Full-Stack Applications (dApps)

Interactive applications with both frontend and backend components.

Template	Description	Tech Stack
react-dapp	React + Express.js application	React, Express, JavaScript
react-dapp-ts	React + Express with TypeScript	React, Express, TypeScript
react-aigne-dapp	React + AIGNE Framework	React, Express, AI Integration
vue-dapp	Vue 3 + Express.js application	Vue 3, Express, JavaScript
svelte-dapp	Svelte + Express.js application	Svelte, Express, JavaScript
solidjs-dapp	SolidJS + Express.js application	SolidJS, Express, JavaScript
nextjs-dapp	Next.js full-stack application	Next.js, React

🎯 Static Applications

Frontend-only applications for static hosting.

Template	Description	Tech Stack
react-static	React single-page application	React, Vite
vue-static	Vue 3 single-page application	Vue 3, Vite
vue-ts-static	Vue 3 with TypeScript	Vue 3, TypeScript, Vite
svelte-static	Svelte single-page application	Svelte, Vite
solidjs-static	SolidJS single-page application	SolidJS, Vite
html-static	Plain HTML static site	HTML, CSS, JavaScript

🔧 API Services

Backend-only services and APIs.

Template	Description	Tech Stack
express-api	Express.js REST API	Express, JavaScript
nestjs-api	NestJS API with TypeScript	NestJS, TypeScript

🎨 Specialized Templates

Purpose-built templates for specific use cases.

Template	Description	Tech Stack
did-connect-dapp	DID Connect integration demo	React, Express, DID Connect
did-wallet-dapp	DID Wallet integration demo	React, Express, DID Wallet
todo-list-example	Full-featured todo app	React, Express, TypeScript
component-studio	Component development studio	React, TypeScript, Vite

🏗️ Project Structure

Each generated blocklet follows this structure:

my-blocklet/
├── blocklet.yml          # Blocklet configuration
├── package.json          # Dependencies and scripts
├── src/                  # Frontend source code
├── api/                  # Backend API (dApps only)
│   ├── index.js         # API entry point
│   ├── libs/            # Shared utilities
│   └── routes/          # API endpoints
├── public/              # Static assets
└── screenshots/         # Blocklet screenshots

⚙️ Common Commands

After creating a blocklet, use these commands:

# Install dependencies
npm install

# Start development server
npm run dev
# or
blocklet dev

# Build for production
npm run build
# or
npm run bundle

# Deploy to Blocklet Server
blocklet deploy

# Run tests (if available)
npm test

🔧 Configuration

blocklet.yml

Core blocklet configuration file:

name: my-blocklet
version: 1.0.0
title: My Blocklet
description: A sample blocklet
keywords: [blocklet, example]
group: dapp
author:
  name: Your Name
  email: [e-mail]
interfaces:
  - type: web
    port: 3000

Package Scripts

Standard scripts included in generated projects:

• dev - Start development server with hot reload
• build - Build for production
• bundle - Create deployable bundle
• lint - Run code linting
• test - Run tests (where applicable)

🛠️ Development

Local Testing

To test the CLI tool locally:

# Clone the repository
git clone https://github.com/blocklet/create-blocklet.git
cd create-blocklet

# Install dependencies
pnpm install

# Test the CLI tool directly
node packages/create-app/index.js test-demo

# Or create a symlink for easier testing
ln -s $(pwd)/packages/create-app/index.js /usr/local/bin/create-blocklet-dev
create-blocklet-dev my-test-project

Adding New Templates

To add a new template:

• Create template directory in packages/create-app/templates/
• Add required files: blocklet.yml, package.json, source code
• Create template-info.json with metadata
• Update template list in packages/create-app/index.js
• Test with: TEMPLATE=your-template sh scripts/ensure-create-blocklet.sh

CLI Architecture

The CLI tool (packages/create-app/index.js) includes:

• Template Selection - Interactive prompts for choosing templates
• Project Generation - File copying and template processing
• DID Generation - Automatic blocklet DID creation
• Package Management - Dependency installation support
• Git Integration - Repository initialization

📖 Documentation

• 📚 Full Documentation
• 🚀 Quick Start Guide
• 🎯 Templates Guide

🌟 Ecosystem

• Blocklet Server - The runtime environment
• Blocklet CLI - Command-line tools
• DID Connect - DID Connect: decentralized identity for your applications
• DID Spaces - DID Spaces: decentralized spaces for your applications

📝 License

This project is licensed under the MIT License.

💖 Support

• Give us a ⭐️ if this project helped you!
• Follow us on Twitter
• Join our Community

Made with ❤️ by the ArcBlock team