blocklet / create-blocklet Goto Github PK

产生出来的project的readme 能不能也是模版产生， 可以其中一段是介绍create-blocklet的，但不要照抄create-blocklet自己的。

现在如果用户用这个创建后不修改，容易造成错觉就是create-blocklet.

实际上，我们允许创建的是纯前端的，还是全栈的，这两个选项可以改成：

• fullstack: webapp with backend code
• webapp: browser only

#8

这个需要想办法 enforce，不然 auth-service 没法用，思路如下：

• 把 abtnode cli 作为生成项目的 dev dependency
• abtnode 已经支持在任意路径下初始化启动，比如 abtnode start -a
• 启动 blocklet 之前确保 node 已经起来了，可以看看 start-server-and-test

The init create blocklet command fails on ABTNode 1.4.6 docker image.

$ docker run  -p 80:80 -p 443:443  -v "$(pwd)":/data/abtnode -it  arcblock/abtnode:1.4.6 bash
arcblock@460effcae987:/data/abtnode$ npm init blocklet@latest demo1
npx: installed 117 in 9.243s
file:///home/arcblock/.npm/_npx/10/lib/node_modules/create-blocklet/lib/npm.js:5
  return conf?.[key] || '';
              ^

SyntaxError: Unexpected token '.'
    at Loader.moduleStrategy (internal/modules/esm/translators.js:140:18)
arcblock@460effcae987:/data/abtnode$ $?
bash: 1: command not found

The above command failed without generating the blocklet.

arcblock@460effcae987:/data/abtnode$ ls
'Untitled Diagram (3).png'   abt-node-arch-overview-en.png   abtnode-docs   create-blocklet   lts.gif   lts.mov   node-password-token.md

When working with node :16 the blocket causes the following errors :

• The generation reports an error but still generated the blocklet code.

TypeError: Cannot read property 'replace' of undefined
    at getDid (file:///root/.npm/_npx/4daa8ae53dba528c/node_modules/create-blocklet/index.js:353:24)
    at file:///root/.npm/_npx/4daa8ae53dba528c/node_modules/create-blocklet/index.js:284:17
    at init (file:///root/.npm/_npx/4daa8ae53dba528c/node_modules/create-blocklet/index.js:295:5)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

• ABT Node initialization fails to find nginx routing service.

root@12cfd7537d70:/data/abtnode# abtnode init --mode=debug
abtnode init v1.4.6
? Are you sure to initialize a ABT Node instance in the current directory(/data/abtnode) Yes
✖ No supported routing engine found, please install a supported routing engine first.
⚠ Supported routing engines are: nginx

PFA the output.log

create blocklet 是否能帮助用户配置和检查一下ABT Node的环境，这样让下面开发和运行更流畅。

注意可以是本地有abt node, 也可以是配置使用远程的abt node, 或docker里的。

几种情况：

• 没有配置可用的abt node
• abt node没有安装
• abt node 没有运行
• abt node版本太低不兼容
• 设置不正确 （如果能检查出来）
• 没有权限部署

理想中能支持本地安装的abt node, 远程 的 abt node, docker里的abtnode等 （这些情况可能是有交集的）

https://next-auth.js.org/

我们是不是可以把did connect作为一个plugin给集成进来
同时这个nextauth可以create-blocklet 支持。 我们blocklet 可以选择用普通方式login

robmao@roberts-imac work % pnpm create-blocklet test-blocklet
 ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND  No package.json (or package.yaml, or package.json5) was found in "/Users/robmao/work".

#8

带有管理界面的blocklet，应该只需要简单的配置即可。

https://github.com/ArcBlock/blocklet-server/issues/3989

带自己定义的管理界面的app, 如何和blocklet server提供的管理界面集成是一个需要考虑的地方

确保每次都用的最新版，减少每次依赖发完版都要手动升级这个 repo 的麻烦。

另外，因为可能 blocklet/sdk 和项目声明的 ocap/arcblock scope 的依赖版本可能不同步，建议在 package.json 中增加 resolution 字段来确保使用的是最新版，参考：https://github.com/blocklet/ocap-playground/blob/main/package.json#L151

根据 did 生成 svg

xmark 的支持应该是create-blocklet将来默认的，几乎任何blocklet 都有不同程度的内容需求

create-blocklet 的readme和使用实践都应该推荐让用户如何打包运行在blocklet-server上，而不只是本地运行。

本地运行不能让用户充分理解blocklet和blocklet server的关系,也不能展示使用 DID:Connect, team等系列功能

可以以 express 为基础

create-blocklet直出的blocklet 不能直接执行blocklet bundle

我建议这种create-blocklet出来的东西应该所有全部可以直接执行，一路可以发布成为blocklet (虽然没有实际功能）但给用户非常流畅的全过程体验。

能不能把比如生态网站、内容网站、教育内容网站都变成create-blocklet的不同模版，这样要做哪一种，只需要选择一下，就生成了基础的。

至少把 .blocklet build 等目录给忽略掉

两个场景：

1. Node.js 服务端的 Coding Test 只要求实现 API, 现在的模板可能会给面试者带来麻烦
2. 我们自己有几个没有前端的 Blocklet: IP Echo DNS, DID DNS，所以后面可能会有需求

❯ git config --list | grep user
user.name=wangshijun
user.email=wangshijun2010

https://docs.npmjs.com/cli/v8/using-npm/config#initauthorname

Document in https://docs.arcblock.io/abtnode/

=> Documentation: https://docs.arcblock.io/abtnode/

Before you start to development, you might need be sure you have already start a abtnode

=> To run the blocklet, you need a running abtnode instance on local machine.

Read more usage in README.md

=> 重复了两遍，改成 Checkout README.md for more usage instructions.

#8

即然集成了 eslint 和我们自己的 lint config，最好有 npm script

在没有任何外界指导的情况下，通过文档去了解怎么使用该工具，以及使用该工具创建了项目之后，通过创建的项目中的文档去了解怎么去开发、打包、部署、发布该项目
Docs: https://github.com/blocklet/create-blocklet
Issues: Link to this one, New issue

• dapp → react → none service @wangshijun
• dapp → react → auth service @NateRobinson @LancelotLewis
• static → react → none service @PaperHS
• static → react → auth service @donotlb
• 本地开发成功
• 本地打包成功
• 本地部署成功
• 本地发布成功（可以在本地部署一个 registry，再进行后续的操作）

#8

没用到的东西可以删掉，要么增加下测试用例？

为create-blocklet 我们值得专门一个web站点 + 文档

因为这个工具很重要。

如同 https://create-react-app.dev

我们可以用 https://create.blocklet.dev

测试目标：

• 使用 create-blocklet 生成不同的项目后，不同的 blocklet 默认的 logo.png 是不同的

• 使用 create-blocklet 生成项目中的 npm scripts 包含 "upload" 命令

• 通过自带的 upload 命令可以将 blocklet 上传到 test registry （需要设置 bn config registry https://test.registry.arcblock.io/）

• yarn create blocklet demo-name

目前全是zhanghan

可能应该把template都防在单独的repo内，这样可以不断扩展。

可以被create template official 接受的，可以PR进来配置合并

• 缺少 arcblock 的品牌表示？
• 缺少 abtnode 的链接？
• 缺少文档的链接？

https://decentology.com

不过貌似现在他们只是给了几个sample repo:
https://github.com/DappStarter

ubuntu 下执行 make bump-version 报错，建议添加 #!/bin/bash

#8

这和create Blocklet本身无关，但和创建模版相关。

默认产生的应该都是pwa，支持offline使用，除了能提高web使用体验，还能改善钱包侧的体验。

钱包部分相关issue：
https://github.com/ArcBlock/arc-wallet-android/issues/2044

通过 dapp no-service 参数创建的 blocklet，在dev模式中有个接口异常

将 blocklet 打包并发布到 production 环境后运行是正常的

#8

在支持了 ip-dns-domain endpoint 后

• 普通 blocklet build 时不需要指定 PUBLIC_URL
• 只有 component blocklet build 时才需要 PUBLIC_URL='/.blocklet/proxy/xxxxx,

建议：

• 增加一个选项：是否是 component blocklet，默认 false
• 是component blocklet 时，在package.json 中 bundle:client 和现在保持一致，不是 component blocklet 时，在package.json 中 bundle:client 不指定 PUBLIC_URL

优先级低

https://dappstarter.decentology.com/

web的步骤选择，然后直接产生一个github repo给用户去fork或者下载。 这个想法也还不错。

• @testing-library 这组依赖应该是 devDependency？
• 出来的项目没有个很好的 readme，参考 create-react-app 出来的 readme，关于下面这些话题可以都写上：
  • 是用什么创建出来的
  • 如何修改 blocklet.yml https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md
  • 如何打包
  • 里面包含了什么
  • 如何修改 logo
  • 如何 publish --> 介绍下 ci 流程（必须 bump-version）
• package.json scripts 里面很多地方用到了 yarn，不能假设用户那边有 yarn，建议都是用 npm
• blocklet author 信息建议从环境里面读取，可以参考下 https://github.com/ArcBlock/abt-node/blob/master/core/cli/lib/commands/blocklet/init.js#L119
• arcblock eslint config 的包名得改下
• pre-start 里面有个 lint 错误，并且关于 是不是 childComponent 的判断可以直接使用 env，代码更可读
• 前端项目里面最好能包含 react-router-dom？并且帮他把 blocklet 配成 pathPrefix 自适应的
• public/index.html 里面的页面 title 也应该展示用户设置的应用名字？

#28

related: https://github.com/ArcBlock/blocklet-server/issues/3788

或者在项目启动的时候给应用分配当前可用的端口号，目前 webpack、vite 应该都有此能力

纯web terminal 类型的app 现在在dapp里挺流行的，可以作为一种品类支持。

例如： 暗黑森林游戏 https://zkga.me/

这可以用来做一些特别简单的blocklet.

有现成的能支持的：https://www.npmjs.com/package/react-terminal-component