create-blocklet 0.3.0 → 0.3.3

package/index.js

@@ -41,6 +41,11 @@ const TYPES = [
         display: 'vue2 + @vue/cli',
         color: green,
       },
+      {
+        name: 'nextjs',
+        display: 'next.js',
+        color: blue,
+      },
     ],
   },
   {
@@ -69,6 +74,17 @@ const TYPES = [
       },
     ],
   },
+  {
+    name: 'api',
+    color: yellow,
+    frameworks: [
+      {
+        name: 'express',
+        display: 'express',
+        color: yellow,
+      },
+    ],
+  },
 ];
 
 const renameFiles = {
@@ -81,14 +97,7 @@ const renameFiles = {
 async function init() {
   const { version } = await fs.readJSONSync(path.resolve(__dirname, 'package.json'));
 
-  console.log(
-    boxen(`${bold('Blocklet') + dim(' Starter')}  ${blue(`v${version}`)}`, {
-      padding: 1,
-      margin: 1,
-      float: 'center',
-      borderStyle: 'double',
-    })
-  );
+  await echoBrand({ version });
 
   let targetDir = argv._[0] ? String(argv._[0]) : undefined;
 
@@ -142,6 +151,7 @@ async function init() {
             const TYPE_TITLE = {
               dapp: 'fullstack: webapp with backend code',
               static: 'webapp: browser only',
+              api: 'api: backend only',
             };
             return {
               title: TYPE_TITLE[type.name],
@@ -172,12 +182,14 @@ async function init() {
           name: 'authorName',
           message: 'Author name:',
           initial: authorInfo?.name || '',
+          validate: (name) => (name ? true : 'Author name is required'),
         },
         {
           type: 'text',
           name: 'authorEmail',
           message: 'Author email:',
           initial: authorInfo?.email || '',
+          validate: (email) => (email ? true : 'Author email is required'),
         },
       ],
       {
@@ -204,7 +216,6 @@ async function init() {
     fs.mkdirSync(root);
   }
 
-  await echoBrand();
   await echoDocument();
 
   console.log('Checking blocklet server runtime environment...', '\n');
@@ -231,6 +242,10 @@ async function init() {
         // eslint-disable-next-line no-continue
         continue;
       }
+      if (framework === 'express' && ['_eslintignore', '.husky'].includes(file)) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
       const targetPath = renameFiles[file] ? path.join(root, renameFiles[file]) : path.join(root, file);
       copy(path.join(commonDir, file), targetPath);
     }
@@ -335,7 +350,7 @@ async function init() {
       const { agent } = await prompts({
         name: 'agent',
         type: 'select',
-        message: 'Choose the agent',
+        message: 'Select npm client (package manager)',
         choices: agentList.map((i) => ({ value: i, title: i })),
       });
 
@@ -421,7 +436,10 @@ async function init() {
   }
   function read(file) {
     const targetPath = path.join(root, file);
-    return fs.readFileSync(targetPath, 'utf8');
+    if (fs.existsSync(targetPath)) {
+      return fs.readFileSync(targetPath, 'utf8');
+    }
+    return null;
   }
 
   function modifyPackage(modifyFn = () => {}) {
@@ -442,11 +460,12 @@ async function init() {
     write('blocklet.md', modifyMd);
   }
   function modifyEnv(modifyFn = (...args) => ({ ...args })) {
-    try {
-      const env = envfile.parse(read('.env'));
+    const envContent = read('.env');
+    if (envContent) {
+      const env = envfile.parse(envContent);
       modifyFn(env);
       write('.env', envfile.stringify(env));
-    } catch {
+    } else {
       console.warn(`\n${yellow('No .env file found, please add one.')}`);
     }
   }

package/lib/arcblock.js

@@ -5,7 +5,7 @@ import { chalk } from 'zx';
 
 const { green } = chalk;
 
-export function echoBrand() {
+export function echoBrand({ version = '' }) {
   let msg;
   return new Promise((resolve, reject) => {
     figlet.text('ArcBlock', { width: 44 }, (err, data) => {
@@ -14,9 +14,11 @@ export function echoBrand() {
       }
       const symbolLen = 44;
       const indent = (symbolLen - 10) / 2;
-      msg = gradient(['cyan', 'rgb(0, 111, 150)', 'rgb(0, 246,136)']).multiline(
-        ['', `${' '.repeat(indent)}Powered By`, data].join('\n')
-      );
+      const msgList = [`\n${' '.repeat(indent)}Powered By`, data];
+      if (version) {
+        msgList.push(`${' '.repeat((symbolLen - 20) / 2)}Create Blocklet v${version}\n`);
+      }
+      msg = gradient(['cyan', 'rgb(0, 111, 150)', 'rgb(0, 246,136)']).multiline(msgList.join('\n'));
       console.log(msg);
       return resolve(msg);
     });
@@ -28,8 +30,8 @@ export function echoDocument() {
   if (terminalLink.isSupported) {
     msg = green(terminalLink(`Documentation: ${url}`, url));
   } else {
-    msg = green(`Documentation: ${url}`);
+    msg = green(`Check documentation in here: ${url}`);
   }
-  console.log(msg, '\n');
+  console.log('\n', msg, '\n');
   return msg;
 }

package/lib/git.js

@@ -19,7 +19,14 @@ export async function initGitRepo(root) {
 }
 
 export async function getUserInfo() {
-  const { stdout: name } = await $`git config user.name`;
-  const { stdout: email } = await $`git config user.email`;
-  return { name: name.trim(), email: email.trim() };
+  try {
+    const { stdout: name } = await $`git config user.name`;
+    const { stdout: email } = await $`git config user.email`;
+    return { name: name.trim(), email: email.trim() };
+  } catch {
+    return {
+      name: '',
+      email: '',
+    };
+  }
 }

package/lib/index.js

@@ -1,6 +1,7 @@
 import { $ } from 'zx';
 import { getAuthor } from './npm.js';
 import { getUserInfo } from './git.js';
+import { getUserInfo as getServerUserInfo } from './server.js';
 
 $.verbose = false;
 
@@ -10,10 +11,9 @@ export async function getOutput(cmd) {
 }
 
 export async function getUser() {
-  const npmAuthor = await getAuthor();
-  const gitUser = await getUserInfo();
+  const [npmAuthor, gitUser, serverUser] = await Promise.all([getAuthor(), getUserInfo(), getServerUserInfo()]);
   return {
-    name: npmAuthor.name || gitUser.name,
-    email: npmAuthor.email || gitUser.email,
+    name: serverUser.name || npmAuthor.name || gitUser.name || '',
+    email: serverUser.email || npmAuthor.email || gitUser.email || '',
   };
 }

package/lib/npm.js

@@ -4,8 +4,15 @@ import { $ } from 'zx';
 $.verbose = false;
 
 export async function getAuthor() {
-  const { stdout: name } = await $`npm config get init.author.name`;
-  const { stdout: email } = await $`npm config get init.author.email`;
+  try {
+    const { stdout: name } = await $`npm config get init.author.name`;
+    const { stdout: email } = await $`npm config get init.author.email`;
 
-  return { name: name.trim(), email: email.trim() };
+    return { name: name.trim(), email: email.trim() };
+  } catch {
+    return {
+      name: '',
+      email: '',
+    };
+  }
 }

package/lib/server.js

@@ -45,3 +45,19 @@ export async function getServerDirectory() {
   const directory = matchStr.replace(/Blocklet Server Data Directory:[\s]*([\S]+)\/\.abtnode\n/gm, '$1');
   return directory;
 }
+
+export async function getUserInfo() {
+  try {
+    const { stdout: user } = await $`blocklet config get user`;
+    const { stdout: email } = await $`blocklet config get email`;
+    return {
+      user: user?.trim(),
+      email: email?.trim(),
+    };
+  } catch {
+    return {
+      user: '',
+      email: '',
+    };
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-blocklet",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "exports": "./index.js",
   "type": "module",
   "repository": "git@github.com:blocklet/create-blocklet.git",

package/template-api/express/README.md

@@ -0,0 +1,146 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+This blocklet is a dapp project, which means this is a full-stack application. It's contained both `server` and `client` code.
+
+## File Structure
+
+- screenshots/ - Screenshots
+- api/ - Api side code
+  - hooks/ - blocklet lifecycle hooks
+  - libs/ - Api side libraries
+  - middlewares/ - Api side middlewares
+  - routes/ - Api side routes
+  - index.js - Api side entry point
+- .env - Environment variables
+- .env.local - Local environment variables
+- .prettierrc - Prettier configuration
+- blocklet.md - Blocklet README
+- blocklet.yml - Blocklet configuration
+- LICENSE - License file
+- logo.png - Blocklet logo file
+- Makefile - Makefile
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file
+
+## Development
+
+1. Make sure you have [@blocklet/cli](https://www.npmjs.com/package/@blocklet/cli) installed
+
+   Blocklet needs blocklet server as a dependency. So you need to install it first.  
+   `npm install -g @blocklet/cli`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.  
+   `blocklet server init --mode=debug`  
+   `blocklet server start`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node)
+
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local blocklet server, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment).
+  > Or you can simply use `npm run deploy` command.
+- If you want to deploy this blocklet to remote blocklet server, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your blocklet server url} --access-key {blocklet server access key} --access-secret {blocklet server access secret}
+  ```
+
+  > Make sure the blocklet is bundled before deployment.
+
+## Upload to blocklet store
+
+- If you want to upload the blocklet to any store for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Then config blocklet store url.
+  You can use those store url in below.
+
+  1. [https://store.blocklet.dev/](https://store.blocklet.dev/)
+  2. [https://dev.store.blocklet.dev/](https://dev.store.blocklet.dev/)
+  3. A blocklet store started by yourself.
+     > Make sure you have installed a `blocklet store` on your own blocklet server. Check it on here: [https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+
+  ```shell
+  blocklet config set store {store url}
+  ```
+
+  Get a `accessToken` by using this command.
+
+  > Why we need a `accessToken`?  
+  > A `accessToken` is genrate by blocklet store, which help us upload our blocklet to any store.
+
+  Set `accessToken` to blocklet config
+
+  ```shell
+  blocklet config set accessToken {accessToken}
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to a store by Github CI.  
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.  
+  The CI workflow will automatically upload a new version to a store.
+
+## Q & A
+
+1. Q: How to change a blocklet's name?
+
+   A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
+
+   You can also change the `title` field and `description` field in the `blocklet.yml` file.
+
+   Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
+
+   Replace this command `"bundle:client": "PUBLIC_URL='/.blocklet/proxy/{did}' npm run build",` in `package.json`
+
+   Replace `did` field in the `blocklet.yml`
+
+2. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of Blocklet Server & blocklet development: [https://docs.arcblock.io/abtnode/en/introduction](https://docs.arcblock.io/abtnode/en/introduction)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/template-api/express/api/hooks/pre-start.js

@@ -0,0 +1,33 @@
+require('@blocklet/sdk/lib/error-handler');
+require('dotenv-flow').config();
+
+const Client = require('@ocap/client');
+
+const env = require('../libs/env');
+const logger = require('../libs/logger');
+const { wallet } = require('../libs/auth');
+const { name } = require('../../package.json');
+
+const ensureAccountDeclared = async () => {
+  if (env.isComponent) return;
+  if (!env.chainHost) return;
+
+  const client = new Client(env.chainHost);
+  const { state } = await client.getAccountState({ address: wallet.toAddress() }, { ignoreFields: ['context'] });
+  if (!state) {
+    const hash = await client.declare({ moniker: name, wallet });
+    logger.log(`app account declared on chain ${env.chainHost}`, hash);
+  } else {
+    logger.log(`app account already declared on chain ${env.chainHost}`);
+  }
+};
+
+(async () => {
+  try {
+    await ensureAccountDeclared();
+    process.exit(0);
+  } catch (err) {
+    logger.error(`${name} pre-start error`, err.message);
+    process.exit(1);
+  }
+})();

package/template-api/express/api/index.js

@@ -0,0 +1,13 @@
+const express = require('express');
+
+const app = express();
+
+const port = process.env.BLOCKLET_PORT || 3030;
+
+app.get('/', (req, res) => {
+  res.send('Hello World, Blocklet!');
+});
+
+app.listen(port, () => {
+  console.log(`Blocklet app listening on port ${port}`);
+});

package/template-api/express/api/libs/auth.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const AuthStorage = require('@arcblock/did-auth-storage-nedb');
+const getWallet = require('@blocklet/sdk/lib/wallet');
+const WalletAuthenticator = require('@blocklet/sdk/lib/wallet-authenticator');
+const WalletHandler = require('@blocklet/sdk/lib/wallet-handler');
+
+const env = require('./env');
+
+const wallet = getWallet();
+const authenticator = new WalletAuthenticator();
+const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});
+
+module.exports = {
+  authenticator,
+  handlers,
+  wallet,
+};

package/template-api/express/api/libs/env.js

@@ -0,0 +1,6 @@
+const env = require('@blocklet/sdk/lib/env');
+
+module.exports = {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+};

package/template-api/express/api/libs/logger.js

@@ -0,0 +1,3 @@
+const logger = console;
+
+module.exports = logger;

package/template-api/express/blocklet.md

@@ -0,0 +1,3 @@
+# template-react
+
+A react template for creating a new blocklet project.

package/template-api/express/blocklet.yml

@@ -0,0 +1,57 @@
+name: template-express
+title: Blocklet Template Express
+description: A Blocklet Api blocklet
+keywords:
+  - blocklet
+  - react
+group: dapp
+did: ''
+main: api/index.js
+author:
+  name: Blocklet
+  email: blocklet@arcblock.io
+repository:
+  type: git
+  url: 'git+https://github.com/blocklet/create-blocklet.git'
+specVersion: 1.1.1
+version: 0.1.0
+logo: logo.png
+files:
+  - logo.png
+  - README.md
+  - blocklet.md
+  - screenshots
+  - api/hooks/pre-start.js
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+charging:
+  price: 0
+  tokens: []
+  shares: []
+timeout:
+  start: 60
+requirements:
+  server: '>=1.6.29'
+  os: '*'
+  cpu: '*'
+scripts:
+  preStart: node api/hooks/pre-start.js
+  dev: npm run start
+environments:
+  - name: CHAIN_HOST
+    description: What's endpoint of the chain?
+    required: true
+    default: 'https://beta.abtnetwork.io/api/'
+    secure: false
+capabilities: {}
+screenshots: []
+children: []

package/template-api/express/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "express",
+  "version": "0.1.0",
+  "description": "",
+  "main": "api/index.js",
+  "scripts": {
+    "start": "NODE_ENV=development nodemon api/index.js -w api",
+    "clean": "rm -rf .blocklet",
+    "bundle": "npm run clean && blocklet bundle --zip --create-release",
+    "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@arcblock/did-auth-storage-nedb": "^1.6.3",
+    "@blocklet/sdk": "^1.7.0",
+    "@ocap/client": "^1.15.2",
+    "dotenv-flow": "^3.2.0",
+    "express": "^4.17.3"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.15"
+  }
+}

package/template-dapp/nextjs/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: 'next/core-web-vitals',
+};

package/template-dapp/nextjs/README.md

@@ -0,0 +1,153 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+This blocklet is a dapp project, which means this is a full-stack application. It's contained both `api` and `client` code.
+
+## File Structure
+
+- public/ - static files
+  - favicon.ico - favicon
+- screenshots/ - Screenshots
+- api/ - Api side code
+  - hooks/ - blocklet lifecycle hooks
+  - libs/ - Api side libraries
+  - middlewares/ - Api side middlewares
+  - routes/ - Api side routes
+  - index.js - Api side entry point
+- pages/ - next.js pages folder
+- styles/ - next.js styles folder
+- .env - Environment variables
+- .env.local - Local environment variables
+- .eslintrc.js - ESLint configuration
+- .gitignore - Git ignore file
+- .prettierrc - Prettier configuration
+- blocklet.md - Blocklet README
+- blocklet.yml - Blocklet configuration
+- LICENSE - License file
+- logo.png - Blocklet logo file
+- Makefile - Makefile
+- next.config.js - next.js config file
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file
+
+## Development
+
+1. Make sure you have [@blocklet/cli](https://www.npmjs.com/package/@blocklet/cli) installed
+
+   Blocklet needs blocklet server as a dependency. So you need to install it first.  
+   `npm install -g @blocklet/cli`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.  
+   `blocklet server init --mode=debug`  
+   `blocklet server start`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node)
+
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local blocklet server, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment).
+  > Or you can simply use `npm run deploy` command.
+- If you want to deploy this blocklet to remote blocklet server, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your blocklet server url} --access-key {blocklet server access key} --access-secret {blocklet server access secret}
+  ```
+
+  > Make sure the blocklet is bundled before deployment.
+
+## Upload to blocklet store
+
+- If you want to upload the blocklet to any store for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Then config blocklet store url.
+  You can use those store url in below.
+
+  1. [https://store.blocklet.dev/](https://store.blocklet.dev/)
+  2. [https://dev.store.blocklet.dev/](https://dev.store.blocklet.dev/)
+  3. A blocklet store started by yourself.
+     > Make sure you have installed a `blocklet store` on your own blocklet server. Check it on here: [https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+
+  ```shell
+  blocklet config set store {store url}
+  ```
+
+  Get a `accessToken` by using this command.
+
+  > Why we need a `accessToken`?  
+  > A `accessToken` is genrate by blocklet store, which help us upload our blocklet to any store.
+
+  Set `accessToken` to blocklet config
+
+  ```shell
+  blocklet config set accessToken {accessToken}
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to a store by Github CI.  
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.  
+  The CI workflow will automatically upload a new version to a store.
+
+## Q & A
+
+1. Q: How to change a blocklet's name?
+
+   A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
+
+   You can also change the `title` field and `description` field in the `blocklet.yml` file.
+
+   Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
+
+   Replace this command `"bundle:client": "PUBLIC_URL='/.blocklet/proxy/{did}' npm run build",` in `package.json`
+
+   Replace `did` field in the `blocklet.yml`
+
+2. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of Blocklet Server & blocklet development: [https://docs.arcblock.io/abtnode/en/introduction](https://docs.arcblock.io/abtnode/en/introduction)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/template-dapp/nextjs/api/hooks/pre-start.js

@@ -0,0 +1,33 @@
+require('@blocklet/sdk/lib/error-handler');
+require('dotenv-flow').config();
+
+const Client = require('@ocap/client');
+
+const env = require('../libs/env');
+const logger = require('../libs/logger');
+const { wallet } = require('../libs/auth');
+const { name } = require('../../package.json');
+
+const ensureAccountDeclared = async () => {
+  if (env.isComponent) return;
+  if (!env.chainHost) return;
+
+  const client = new Client(env.chainHost);
+  const { state } = await client.getAccountState({ address: wallet.toAddress() }, { ignoreFields: ['context'] });
+  if (!state) {
+    const hash = await client.declare({ moniker: name, wallet });
+    logger.log(`app account declared on chain ${env.chainHost}`, hash);
+  } else {
+    logger.log(`app account already declared on chain ${env.chainHost}`);
+  }
+};
+
+(async () => {
+  try {
+    await ensureAccountDeclared();
+    process.exit(0);
+  } catch (err) {
+    logger.error(`${name} pre-start error`, err.message);
+    process.exit(1);
+  }
+})();

package/template-dapp/nextjs/api/index.js

@@ -0,0 +1,24 @@
+const express = require('express');
+const next = require('next');
+
+const port = parseInt(process.env.BLOCKLET_PORT, 10) || 3000;
+const dev = process.env.NODE_ENV !== 'production';
+const app = next({ dev });
+const handle = app.getRequestHandler();
+
+app.prepare().then(() => {
+  const server = express();
+
+  const router = express.Router();
+  router.use('/api', require('./routes'));
+  server.use(router);
+
+  server.all('*', (req, res) => {
+    return handle(req, res);
+  });
+
+  server.listen(port, (err) => {
+    if (err) throw err;
+    console.log(`> Ready on http://localhost:${port}`);
+  });
+});

package/template-dapp/nextjs/api/libs/auth.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const AuthStorage = require('@arcblock/did-auth-storage-nedb');
+const getWallet = require('@blocklet/sdk/lib/wallet');
+const WalletAuthenticator = require('@blocklet/sdk/lib/wallet-authenticator');
+const WalletHandler = require('@blocklet/sdk/lib/wallet-handler');
+
+const env = require('./env');
+
+const wallet = getWallet();
+const authenticator = new WalletAuthenticator();
+const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});
+
+module.exports = {
+  authenticator,
+  handlers,
+  wallet,
+};

package/template-dapp/nextjs/api/libs/env.js

@@ -0,0 +1,6 @@
+const env = require('@blocklet/sdk/lib/env');
+
+module.exports = {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+};

package/template-dapp/nextjs/api/libs/logger.js

@@ -0,0 +1,3 @@
+const logger = console;
+
+module.exports = logger;

package/template-dapp/nextjs/api/routes/index.js

@@ -0,0 +1,6 @@
+const middleware = require('@blocklet/sdk/lib/middlewares');
+const router = require('express').Router();
+
+router.use('/user', middleware.user(), (req, res) => res.json(req.user || {}));
+
+module.exports = router;

package/template-dapp/nextjs/blocklet.md

@@ -0,0 +1,3 @@
+# template-react
+
+A react template for creating a new blocklet project.

package/template-dapp/nextjs/blocklet.yml

@@ -0,0 +1,58 @@
+name: template-nextjs
+title: Blocklet Template Next.js
+description: A Blocklet DAPP blocklet
+keywords:
+  - blocklet
+  - react
+group: dapp
+did: ''
+main: api/index.js
+author:
+  name: Blocklet
+  email: blocklet@arcblock.io
+repository:
+  type: git
+  url: 'git+https://github.com/blocklet/create-blocklet.git'
+specVersion: 1.1.1
+version: 0.1.0
+logo: logo.png
+files:
+  - .next
+  - logo.png
+  - README.md
+  - blocklet.md
+  - screenshots
+  - api/hooks/pre-start.js
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+charging:
+  price: 0
+  tokens: []
+  shares: []
+timeout:
+  start: 60
+requirements:
+  server: '>=1.6.29'
+  os: '*'
+  cpu: '*'
+scripts:
+  preStart: node api/hooks/pre-start.js
+  dev: npm run dev
+environments:
+  - name: CHAIN_HOST
+    description: What's endpoint of the chain?
+    required: true
+    default: 'https://beta.abtnetwork.io/api/'
+    secure: false
+capabilities: {}
+screenshots: []
+children: []

package/template-dapp/nextjs/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

package/template-dapp/nextjs/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "nodemon -w api api/index.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node api/index.js",
+    "lint": "next lint",
+    "clean": "rm -rf .blocklet",
+    "bundle": "npm run bundle:client && npm run bundle:api",
+    "bundle:client": "PUBLIC_URL='/.blocklet/proxy/<%= did %>' npm run build",
+    "bundle:api": "npm run clean && blocklet bundle --zip --create-release",
+    "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{mjs,js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.{css,less,scss,json,graphql}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@arcblock/did-auth": "^1.15.2",
+    "@arcblock/did-auth-storage-nedb": "^1.6.3",
+    "@blocklet/sdk": "^1.7.0",
+    "@ocap/client": "^1.15.2",
+    "@ocap/mcrypto": "^1.15.2",
+    "@ocap/wallet": "^1.15.2",
+    "dotenv-flow": "^3.2.0",
+    "express": "^4.17.3",
+    "next": "12.1.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "eslint": "8.11.0",
+    "eslint-config-next": "12.1.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "nodemon": "^2.0.15",
+    "npm-run-all": "^4.1.5"
+  }
+}

package/template-dapp/nextjs/pages/_app.js

@@ -0,0 +1,21 @@
+import Head from 'next/head';
+import Script from 'next/script';
+import '../styles/globals.css';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>{process.env.APP_TITLE}</title>
+        <link rel="icon" href={`${process.env.PUBLIC_URL || ''}/favicon.ico`} />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+        <meta name="theme-color" content="#4F6AF5" />
+        <meta name="description" content="Web site created using create-blocklet" />
+      </Head>
+      <Script src="__meta__.js" />
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;

package/template-dapp/nextjs/pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}

package/template-dapp/nextjs/pages/index.js

@@ -0,0 +1,69 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.css'
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>
+          Get started by editing{' '}
+          <code className={styles.code}>pages/index.js</code>
+        </p>
+
+        <div className={styles.grid}>
+          <a href="https://nextjs.org/docs" className={styles.card}>
+            <h2>Documentation &rarr;</h2>
+            <p>Find in-depth information about Next.js features and API.</p>
+          </a>
+
+          <a href="https://nextjs.org/learn" className={styles.card}>
+            <h2>Learn &rarr;</h2>
+            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          </a>
+
+          <a
+            href="https://github.com/vercel/next.js/tree/canary/examples"
+            className={styles.card}
+          >
+            <h2>Examples &rarr;</h2>
+            <p>Discover and deploy boilerplate example Next.js projects.</p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+          >
+            <h2>Deploy &rarr;</h2>
+            <p>
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  )
+}

package/template-dapp/nextjs/styles/Home.module.css

@@ -0,0 +1,116 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}

package/template-dapp/nextjs/styles/globals.css

@@ -0,0 +1,16 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}

package/template-dapp/react/blocklet.yml

@@ -1,6 +1,6 @@
 name: template-react
 title: Blocklet Template React
-description: A Blocklet Server blocklet
+description: A Blocklet DAPP blocklet
 keywords:
   - blocklet
   - react

package/template-dapp/vue/blocklet.yml

@@ -1,6 +1,6 @@
 name: template-vue
 title: Blocklet Template Vue
-description: A Blocklet Server blocklet
+description: A Blocklet DAPP blocklet
 keywords:
   - blocklet
   - vue

package/template-dapp/vue/package.json

@@ -46,7 +46,8 @@
     "nodemon": "^2.0.15",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.0",
-    "vite": "^2.8.6"
+    "vite": "^2.8.6",
+    "vite-plugin-blocklet": "^0.1.1"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [

package/template-dapp/vue/vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { createHtmlPlugin } from 'vite-plugin-html';
+import { createBlockletPlugin } from 'vite-plugin-blocklet';
 
 // https://vitejs.dev/config/
 export default ({ mode }) => {
@@ -17,6 +18,7 @@ export default ({ mode }) => {
           },
         },
       }),
+      createBlockletPlugin(),
     ],
     server: {
       port: process.env.BLOCKLET_PORT,

package/template-dapp/vue2/blocklet.yml

@@ -1,6 +1,6 @@
 name: template-vue2
 title: Blocklet Template Vue2
-description: A Blocklet Server blocklet
+description: A Blocklet DAPP blocklet
 keywords:
   - blocklet
   - vue

package/template-static/vue/package.json

@@ -26,7 +26,8 @@
     "husky": "^7.0.4",
     "lint-staged": "^12.3.7",
     "prettier": "^2.6.0",
-    "vite": "^2.8.6"
+    "vite": "^2.8.6",
+    "vite-plugin-blocklet": "^0.1.1"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [

package/template-static/vue/vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { createHtmlPlugin } from 'vite-plugin-html';
+import { createBlockletPlugin } from 'vite-plugin-blocklet';
 
 // https://vitejs.dev/config/
 export default ({ mode }) => {
@@ -17,6 +18,7 @@ export default ({ mode }) => {
           },
         },
       }),
+      createBlockletPlugin(),
     ],
     server: {
       port: process.env.BLOCKLET_PORT,