@abtnode/webapp

Blocklet Server Web

Web Dashboard to manage Blocklet Server

Blocklet Server Development

Start Blocklet Server Develop Environment

1. create .env.development file, in the current(core/webapp) directory
2. copy follow texts to .env.development, change ABT_NODE_BASE_URL to your local lan ip

# CAUTION: this is required to eliminate create-react-scripts complainings
SKIP_PREFLIGHT_CHECK=true

# e.g. /Users/bob/<project-path>/.blocklet-server server 任意的本地目录，建议设置到项目根目录下的 .blocklet-server 目录
ABT_NODE_DATA_DIR="<SERVER DATA DIR>"

ABT_NODE_SESSION_SECRET="49bcf865c77a15993d87245b124bbc5125d2c3997437d1fda3"
ABT_NODE_SESSION_TTL="1d"
# Please use the following code to generate SK yourself
# const { fromRandom } = require('@ocap/wallet')
# const ABT_NODE_SK = fromRandom().secretKey;
ABT_NODE_SK="<ABT_NODE_SK>"
ABT_NODE_PORT="3030"
ABT_NODE_MODE="production"
ABT_NODE_NAME="Blocklet Server (Dev)"
ABT_NODE_DESCRIPTION="Web Interface to manage your Blocklet Server"
# e.g. http://192.168.1.2:3030 如果登录的时候无法扫码,请检查该设置
ABT_NODE_BASE_URL="http://<YOUR LOCAL LAN IP>:3030"

# 如果只想看 error 日志，设置 ABT_NODE_LOG_LEVEL 为 "error"
ABT_NODE_LOG_LEVEL="info"

# 关闭 SQLITE 日志。如果想查看 SQLITE 日志请注释掉 DISABLE_SQLITE_LOG
DISABLE_SQLITE_LOG=1

# 如果我们不需要调试 npm run start:service 对应的前端的时候,修改该配置为空
ABT_NODE_SERVICE_FE_PORT="3040"

# 如果想要以serverless 执行调试serverless jobs，就配置为true
ABT_NODE_DEBUG_AS_SERVERLESS = "false"

1. Start the client and server

# if you are not in the core/webapp directory
cd core/webapp

# Option 1
# use the 4 terminal windows to start it with separately

# terminal.0 => database && message queue
npm run start:hub
# terminal.1 => server daemon
npm run start:daemon
# terminal.2 => blocklet service
npm run start:service
# terminal.3 => server dashboard
npm run start:client


# Option 2
# quickly start
npm run start

# After the development is completed, you can use `npm run stop` to completely terminate all the processes.
npm run stop

Now, you are ready to hacking the Blocklet Server.

Start blocklet-service client Develop Environment

If you want to develop blocklet service client, additional action you need to do

1. Set ABT_NODE_SERVICE_FE_PORT="3040" in .env.development
2. Start the client and server as same as above
3. Start Blocklet Service Client
4. If you are adding new pages to blocklet-service, please remember to clear service-worker cache in browser

cd core/blocklet-services
DEBUG=@abtnode/* npm run start:client

How to run as production from your local source?

Following steps requires you have a valid setup of the repo, which means you can start the dashboard in development mode.

Build the dashboard

cd core/webapp && npm run build:client && npm run build:daemon

Create symbolic link for CLI

ln -s /path/to/blocklet-server-repo/core/cli/bin/blocklet.js /usr/local/bin/bn

Run your local copy

# optional: create a new instance for test
cd /path/to/your-empty-folder
bn server init

# start with latest code
bn server start

If your local nginx can not listen on port 80 and port 443, you can make it listen on other ports:

ABT_NODE_HTTP_PORT=8080 ABT_NODE_HTTPS_PORT=8443 an start

Then, use port forwarding to redirect traffic from 80 => 8080, and 443 => 8443:

echo "
rdr pass inet proto tcp from any to any port 80 -> 127.0.0.1 port 8080
rdr pass inet proto tcp from any to any port 443 -> 127.0.0.1 port 8443
" | sudo pfctl -ef -

Run E2E test

# in core/webapp directory
yarn test:e2e

Coverage

Coverage for this package contains 3 parts:

• api: collected using jest, configured in jest.config.js, result in coverage-api
• src: collected using react-script, configured in jest in package.json, result in coverage
• e2e: collected using cypress, configured in nyc in package.json, result in coverage-e2e

Develop blocklet in dev server

1. Make sure your dev server is running

2. Goto blocklet root dir

3. Run command <blocklet-server-source-dir>/core/cli/tools/dev.js (Replace <blocklet-server-source-dir> to your custom folder)

Create a link for dev.js

1. Run command ln -s <blocklet-server-source-dir>/core/cli/tools/dev.js /usr/local/bin/bn-dev
2. Then you can use bn-dev to develop blocklet in dev server

Deploy blocklet to dev server

1. Create an access key pair in Server Dashboard
2. Goto blocklet root dir
3. Bundle your blocklet
4. Deploy to dev server: bn deploy .blocklet/bundle --endpoint http://127.0.0.1:3030 --access-key <your-access-key> --access-secret <your-access-secret>

Run migration for dev server

cd core/webapp && npm run dev:migration -- --from-version <version>

e.g. npm run dev:migration -- --from-version 1.6.20 will run migration scripts greater than 1.6.20

Working with ux repo hmr

Add ARCBLOCK_UX_BASE_PATH equals to your ux repo path in .env.development file

ARCBLOCK_UX_BASE_PATH="/Users/xxx/arcblock/ux"

Then, you can change ux repo src code to see hmr effect in blocklet-server webapp

FAQ

Q: Receive URLSessionTask failed with error when connecting to Dev Server with iOS wallet or Android wallet

A: If ABT_NODE_BASE_URL exists in you .env, .env.development or .env.development.local, make sure the value of ABT_NODE_BASE_URL is your local lan IP

Q: If the Cornerstone application interface shows that the application is running when debugging locally, and when you click the Cornerstone application open button you are redirected to the proxy failure screen, or to the code installation screen, or to the blocklet screen with 404 or 502 errors, please refer to the following solutions

A:

Solution 1: Close blocklet-services client && delete env ABT_NODE_SERVICE_FE_PORT && restart the blocklet-service process: go to the webapp directory and execute the script npm run start:service

Solution 2: Close all blocklet-server related development processes, run npm run deep-clean, and restart all blocklet-server development processes.