create-blocklet 0.10.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +188 -52
- package/package.json +1 -1
- package/templates/component-studio/package.json +1 -1
- package/templates/did-connect-dapp/package.json +1 -1
- package/templates/did-wallet-dapp/package.json +1 -1
- package/templates/react-aigne-dapp/package.json +1 -1
- package/templates/react-dapp/package.json +1 -1
- package/templates/react-dapp-ts/package.json +1 -1
- package/templates/react-gun-dapp/package.json +1 -1
- package/templates/react-static/package.json +1 -1
- package/templates/solidjs-dapp/package.json +1 -1
- package/templates/solidjs-static/package.json +1 -1
- package/templates/svelte-dapp/package.json +1 -1
- package/templates/svelte-static/package.json +1 -1
- package/templates/todo-list-example/package.json +1 -1
- package/templates/vue-dapp/package.json +1 -1
- package/templates/vue-static/package.json +1 -1
- package/templates/vue-ts-static/package.json +1 -1
- package/templates/vue2-dapp/package.json +1 -1
- package/templates/vue2-static/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,91 +1,227 @@
|
|
|
1
1
|
# create-blocklet
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>The fastest way to create modern blocklet applications</strong>
|
|
5
|
+
</p>
|
|
4
6
|
|
|
5
|
-
>
|
|
6
|
-
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://www.createblocklet.dev">📚 Documentation</a> •
|
|
9
|
+
<a href="https://github.com/blocklet/create-blocklet/issues">🐛 Issues</a> •
|
|
10
|
+
<a href="https://github.com/blocklet/create-blocklet/discussions">💬 Discussions</a>
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<p align="center">
|
|
14
|
+
<img src="https://img.shields.io/npm/v/create-blocklet?style=flat-square" alt="npm version" />
|
|
15
|
+
<img src="https://img.shields.io/npm/dm/create-blocklet?style=flat-square" alt="npm downloads" />
|
|
16
|
+
<img src="https://img.shields.io/github/license/blocklet/create-blocklet?style=flat-square" alt="license" />
|
|
17
|
+
</p>
|
|
7
18
|
|
|
8
|
-
|
|
19
|
+
---
|
|
9
20
|
|
|
10
|
-
|
|
21
|
+
## ✨ Features
|
|
11
22
|
|
|
12
|
-
|
|
23
|
+
- 🚀 **Quick Setup** - Get started in seconds with a single command
|
|
24
|
+
- 🎯 **Multiple Templates** - Choose from 20+ production-ready templates
|
|
25
|
+
- 🔧 **Framework Agnostic** - Support for React, Vue, Svelte, SolidJS, and more
|
|
26
|
+
- 🌐 **Full-Stack Ready** - Templates for dApps, static sites, and APIs
|
|
27
|
+
- 📦 **Modern Tooling** - Built with Vite, TypeScript, and modern build tools
|
|
28
|
+
- 🔒 **DID Integration** - Built-in support for decentralized identity
|
|
29
|
+
- 🎨 **Customizable** - Easy to extend and customize for your needs
|
|
13
30
|
|
|
14
|
-
|
|
31
|
+
## 🚀 Quick Start
|
|
15
32
|
|
|
16
33
|
```bash
|
|
17
|
-
|
|
34
|
+
# Create a new blocklet project
|
|
35
|
+
npx create-blocklet my-blocklet
|
|
36
|
+
|
|
37
|
+
# Or use your preferred package manager
|
|
38
|
+
pnpm create blocklet my-blocklet
|
|
39
|
+
yarn create blocklet my-blocklet
|
|
18
40
|
```
|
|
19
41
|
|
|
20
|
-
|
|
42
|
+
> **Compatibility Note:**
|
|
43
|
+
> Blocklet templates require [Node.js](https://nodejs.org/) version >=16.0.0.
|
|
21
44
|
|
|
22
|
-
|
|
23
|
-
yarn create blocklet [blocklet-name]
|
|
24
|
-
```
|
|
45
|
+
## 📋 Available Templates
|
|
25
46
|
|
|
26
|
-
|
|
47
|
+
### 🌐 Full-Stack Applications (dApps)
|
|
48
|
+
Interactive applications with both frontend and backend components.
|
|
27
49
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
50
|
+
| Template | Description | Tech Stack |
|
|
51
|
+
|----------|-------------|------------|
|
|
52
|
+
| `react-dapp` | React + Express.js application | React, Express, JavaScript |
|
|
53
|
+
| `react-dapp-ts` | React + Express with TypeScript | React, Express, TypeScript |
|
|
54
|
+
| `react-aigne-dapp` | React + AIGNE Framework | React, Express, AI Integration |
|
|
55
|
+
| `vue-dapp` | Vue 3 + Express.js application | Vue 3, Express, JavaScript |
|
|
56
|
+
| `svelte-dapp` | Svelte + Express.js application | Svelte, Express, JavaScript |
|
|
57
|
+
| `solidjs-dapp` | SolidJS + Express.js application | SolidJS, Express, JavaScript |
|
|
58
|
+
| `nextjs-dapp` | Next.js full-stack application | Next.js, React |
|
|
31
59
|
|
|
32
|
-
|
|
60
|
+
### 🎯 Static Applications
|
|
61
|
+
Frontend-only applications for static hosting.
|
|
33
62
|
|
|
34
|
-
|
|
63
|
+
| Template | Description | Tech Stack |
|
|
64
|
+
|----------|-------------|------------|
|
|
65
|
+
| `react-static` | React single-page application | React, Vite |
|
|
66
|
+
| `vue-static` | Vue 3 single-page application | Vue 3, Vite |
|
|
67
|
+
| `vue-ts-static` | Vue 3 with TypeScript | Vue 3, TypeScript, Vite |
|
|
68
|
+
| `svelte-static` | Svelte single-page application | Svelte, Vite |
|
|
69
|
+
| `solidjs-static` | SolidJS single-page application | SolidJS, Vite |
|
|
70
|
+
| `html-static` | Plain HTML static site | HTML, CSS, JavaScript |
|
|
35
71
|
|
|
36
|
-
|
|
37
|
-
-
|
|
38
|
-
- `vue2`
|
|
39
|
-
- `solid-js`
|
|
40
|
-
- `svelte`
|
|
41
|
-
- `next.js`
|
|
42
|
-
- `react + gunjs`
|
|
72
|
+
### 🔧 API Services
|
|
73
|
+
Backend-only services and APIs.
|
|
43
74
|
|
|
44
|
-
|
|
75
|
+
| Template | Description | Tech Stack |
|
|
76
|
+
|----------|-------------|------------|
|
|
77
|
+
| `express-api` | Express.js REST API | Express, JavaScript |
|
|
78
|
+
| `nestjs-api` | NestJS API with TypeScript | NestJS, TypeScript |
|
|
45
79
|
|
|
46
|
-
|
|
47
|
-
-
|
|
48
|
-
- `vue2`
|
|
49
|
-
- `solid-js`
|
|
50
|
-
- `svelte`
|
|
51
|
-
- `website powered by blocklet pages`
|
|
52
|
-
- `documentation site powered by blocklet pages`
|
|
53
|
-
- `html`
|
|
80
|
+
### 🎨 Specialized Templates
|
|
81
|
+
Purpose-built templates for specific use cases.
|
|
54
82
|
|
|
55
|
-
|
|
83
|
+
| Template | Description | Tech Stack |
|
|
84
|
+
|----------|-------------|------------|
|
|
85
|
+
| `did-connect-dapp` | DID Connect integration demo | React, Express, DID Connect |
|
|
86
|
+
| `did-wallet-dapp` | DID Wallet integration demo | React, Express, DID Wallet |
|
|
87
|
+
| `todo-list-example` | Full-featured todo app | React, Express, TypeScript |
|
|
88
|
+
| `component-studio` | Component development studio | React, TypeScript, Vite |
|
|
56
89
|
|
|
57
|
-
|
|
90
|
+
## 🏗️ Project Structure
|
|
58
91
|
|
|
59
|
-
|
|
92
|
+
Each generated blocklet follows this structure:
|
|
60
93
|
|
|
61
|
-
|
|
94
|
+
```
|
|
95
|
+
my-blocklet/
|
|
96
|
+
├── blocklet.yml # Blocklet configuration
|
|
97
|
+
├── package.json # Dependencies and scripts
|
|
98
|
+
├── src/ # Frontend source code
|
|
99
|
+
├── api/ # Backend API (dApps only)
|
|
100
|
+
│ ├── index.js # API entry point
|
|
101
|
+
│ ├── libs/ # Shared utilities
|
|
102
|
+
│ └── routes/ # API endpoints
|
|
103
|
+
├── public/ # Static assets
|
|
104
|
+
└── screenshots/ # Blocklet screenshots
|
|
105
|
+
```
|
|
62
106
|
|
|
63
|
-
|
|
64
|
-
npx degit user/blocklet my-blocklet
|
|
65
|
-
cd my-blocklet
|
|
107
|
+
## ⚙️ Common Commands
|
|
66
108
|
|
|
109
|
+
After creating a blocklet, use these commands:
|
|
110
|
+
|
|
111
|
+
```bash
|
|
112
|
+
# Install dependencies
|
|
67
113
|
npm install
|
|
114
|
+
|
|
115
|
+
# Start development server
|
|
68
116
|
npm run dev
|
|
69
|
-
|
|
117
|
+
# or
|
|
118
|
+
blocklet dev
|
|
70
119
|
|
|
71
|
-
|
|
120
|
+
# Build for production
|
|
121
|
+
npm run build
|
|
122
|
+
# or
|
|
123
|
+
npm run bundle
|
|
72
124
|
|
|
73
|
-
|
|
74
|
-
|
|
125
|
+
# Deploy to Blocklet Server
|
|
126
|
+
blocklet deploy
|
|
127
|
+
|
|
128
|
+
# Run tests (if available)
|
|
129
|
+
npm test
|
|
75
130
|
```
|
|
76
131
|
|
|
77
|
-
##
|
|
132
|
+
## 🔧 Configuration
|
|
133
|
+
|
|
134
|
+
### blocklet.yml
|
|
135
|
+
Core blocklet configuration file:
|
|
136
|
+
|
|
137
|
+
```yaml
|
|
138
|
+
name: my-blocklet
|
|
139
|
+
version: 1.0.0
|
|
140
|
+
title: My Blocklet
|
|
141
|
+
description: A sample blocklet
|
|
142
|
+
keywords: [blocklet, example]
|
|
143
|
+
group: dapp
|
|
144
|
+
author:
|
|
145
|
+
name: Your Name
|
|
146
|
+
email: you@example.com
|
|
147
|
+
interfaces:
|
|
148
|
+
- type: web
|
|
149
|
+
port: 3000
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Package Scripts
|
|
153
|
+
Standard scripts included in generated projects:
|
|
154
|
+
|
|
155
|
+
- `dev` - Start development server with hot reload
|
|
156
|
+
- `build` - Build for production
|
|
157
|
+
- `bundle` - Create deployable bundle
|
|
158
|
+
- `lint` - Run code linting
|
|
159
|
+
- `test` - Run tests (where applicable)
|
|
78
160
|
|
|
79
|
-
|
|
161
|
+
## 🛠️ Development
|
|
162
|
+
|
|
163
|
+
### Local Testing
|
|
164
|
+
To test the CLI tool locally:
|
|
80
165
|
|
|
81
166
|
```bash
|
|
82
|
-
|
|
167
|
+
# Clone the repository
|
|
168
|
+
git clone https://github.com/blocklet/create-blocklet.git
|
|
169
|
+
cd create-blocklet
|
|
170
|
+
|
|
171
|
+
# Install dependencies
|
|
172
|
+
pnpm install
|
|
83
173
|
|
|
84
|
-
|
|
174
|
+
# Test the CLI tool directly
|
|
175
|
+
node packages/create-app/index.js test-demo
|
|
176
|
+
|
|
177
|
+
# Or create a symlink for easier testing
|
|
178
|
+
ln -s $(pwd)/packages/create-app/index.js /usr/local/bin/create-blocklet-dev
|
|
179
|
+
create-blocklet-dev my-test-project
|
|
85
180
|
```
|
|
86
181
|
|
|
87
|
-
|
|
182
|
+
### Adding New Templates
|
|
183
|
+
To add a new template:
|
|
184
|
+
|
|
185
|
+
1. Create template directory in `packages/create-app/templates/`
|
|
186
|
+
2. Add required files: `blocklet.yml`, `package.json`, source code
|
|
187
|
+
3. Create `template-info.json` with metadata
|
|
188
|
+
4. Update template list in `packages/create-app/index.js`
|
|
189
|
+
5. Test with: `TEMPLATE=your-template sh scripts/ensure-create-blocklet.sh`
|
|
190
|
+
|
|
191
|
+
### CLI Architecture
|
|
192
|
+
The CLI tool (`packages/create-app/index.js`) includes:
|
|
193
|
+
|
|
194
|
+
- **Template Selection** - Interactive prompts for choosing templates
|
|
195
|
+
- **Project Generation** - File copying and template processing
|
|
196
|
+
- **DID Generation** - Automatic blocklet DID creation
|
|
197
|
+
- **Package Management** - Dependency installation support
|
|
198
|
+
- **Git Integration** - Repository initialization
|
|
199
|
+
|
|
200
|
+
## 📖 Documentation
|
|
201
|
+
|
|
202
|
+
- [📚 Full Documentation](https://www.createblocklet.dev)
|
|
203
|
+
- [🚀 Quick Start Guide](https://www.createblocklet.dev/docs/quick-start)
|
|
204
|
+
- [🎯 Templates Guide](https://www.createblocklet.dev/docs/templates)
|
|
205
|
+
|
|
206
|
+
## 🌟 Ecosystem
|
|
207
|
+
|
|
208
|
+
- [Blocklet Server](https://www.arcblock.io/docs/blocklet-developer) - The runtime environment
|
|
209
|
+
- [Blocklet CLI](https://www.arcblock.io/docs/blocklet-developer/en/blocklet-cli) - Command-line tools
|
|
210
|
+
- [DID Connect](https://www.arcblock.io/docs/did-connect) - DID Connect: decentralized identity for your applications
|
|
211
|
+
- [DID Spaces](https://www.arcblock.io/docs/did-spaces) - DID Spaces: decentralized spaces for your applications
|
|
212
|
+
|
|
213
|
+
## 📝 License
|
|
214
|
+
|
|
215
|
+
This project is licensed under the MIT License.
|
|
216
|
+
|
|
217
|
+
## 💖 Support
|
|
218
|
+
|
|
219
|
+
- Give us a ⭐️ if this project helped you!
|
|
220
|
+
- Follow us on [Twitter](https://twitter.com/blocklet_io)
|
|
221
|
+
- Join our [Community](https://community.arcblock.io/)
|
|
88
222
|
|
|
89
|
-
|
|
223
|
+
---
|
|
90
224
|
|
|
91
|
-
|
|
225
|
+
<div align="center">
|
|
226
|
+
<p>Made with ❤️ by the <a href="https://arcblock.io">ArcBlock</a> team</p>
|
|
227
|
+
</div>
|
package/package.json
CHANGED
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"typescript": "^5.7.2",
|
|
99
99
|
"vite": "^7.0.0",
|
|
100
100
|
"vite-node": "^3.2.4",
|
|
101
|
-
"vite-plugin-blocklet": "^0.10.
|
|
101
|
+
"vite-plugin-blocklet": "^0.10.1",
|
|
102
102
|
"vite-plugin-require": "^1.2.14",
|
|
103
103
|
"vite-plugin-svgr": "^4.3.0",
|
|
104
104
|
"vite-tsconfig-paths": "^5.1.4",
|