基于React的开源低代码框架ToolJet

发表于 2023-09-04 更新于 2024-09-18 分类于各种折腾 Waline：阅读次数：本文字数： 3.5k 阅读时长 ≈ 3 分钟

ToolJet 是用于构建基于 React 的 Web 应用程序和内部工具的开源低代码框架 🚀。

什么是 ToolJet ?

ToolJet 是一个开源低代码框架，可以用最少的工程工作量快速构建和部署内部工具。ToolJet 的拖放式前端构建器允许您在几分钟内构建复杂的响应式前端。您还可以连接到数据源，如数据库（PostgreSQL、MongoDB、Elasticsearch等）、API 端点（ToolJet支持导入 OpenAPI规范和 OAuth2授权）、SaaS 工具（Stripe、Slack、Google Sheets、Airtable、Notion等）和对象存储服务（S3、GCS、Minio等），以获取和写入数据。

安装

在群晖上以 Docker 方式安装。

docker-compose.yml

将下面的内容保存为 docker-compose.yml 文件

version: '3'

services:
  client:
    image: tooljet/tooljet-client-ce:latest
    container_name: tooljet-client
    restart: always
    env_file: env.txt
    depends_on:
      - server
    volumes:
      - ./logs:/var/log/openresty/
      - ./certs:/etc/resty-auto-ssl/
      - ./fallbackcerts:/etc/fallback-certs
    ports:
      - 9480:80
      - 9443:443
    command: openresty -g "daemon off;"

  server:
    image: tooljet/tooljet-server-ce:latest
    container_name: tooljet-server
    #restart: always
    #ports:
    #  - 3000
    env_file: env.txt
    environment:
      SERVE_CLIENT: "false"
    command: npm run start:prod
    depends_on:
      - postgres

  postgres:
    image: postgres:13
    container_name: tooljet-postgres
    restart: always
    #ports:
    #  - 5432:5432
    volumes:
      - ./data:/var/lib/postgresql/data
    environment:
      - POSTGRES_USER=tooljet
      - POSTGRES_PASSWORD=password
      - POSTGRES_DB=tooljet

tooljet/tooljet-client-ce:latest 对应的版本为 v2.4.2
tooljet/tooljet-server-ce:latest 对应的版本为 v2.14.0

env.txt

将下面的内容保存为 env.txt 文件，之所以没用使用默认的 .env 做文件名，主要是为了便于在 FileStation 中编辑修改

TOOLJET_HOST=http://192.168.0.197:9480
LOCKBOX_MASTER_KEY=13c9b8364ae71f714774c82498ba328813069e48d80029bb29f49d0ada5a8e40
SECRET_KEY_BASE=ea85064ed42ad02cfc022e66d8bccf452e3fa1142421cbd7a13592d91a2cbb866d6001060b73a98a65be57e65524357d445efae00a218461088a706decd62dcb

# DATABASE CONFIG
ORM_LOGGING=all
PG_DB=tooljet
PG_USER=tooljet
PG_HOST=postgres
PG_PASS=password

# Checks every 24 hours to see if a new version of ToolJet is available
# (Enabled by default. Set 0 to disable)
CHECK_FOR_UPDATES=

# Checks every 24 hours to update app telemetry data to ToolJet hub.
# (Telemetry is enabled by default. Set value to true to disable.)
# DISABLE_APP_TELEMETRY=false

# FEATURE TOGGLE
COMMENT_FEATURE_ENABLE=
ENABLE_MULTIPLAYER_EDITING=true

TOOLJET_HOST：站点访问地址，主机IP + 端口，端口要和 docker-compose.yml 中 client 的端口对应；
LOCKBOX_MASTER_KEY：用于机密数据源凭证的秘钥，应使用 32字节的十六进制字符串，可以用 openssl rand -hex 32 生成；
SECRET_KEY_BASE：用于加密会话 cookie，使用 64字节十六进制字符串，可以用 openssl rand -hex 64 生成；
PG_DB：数据库库名，和 docker-compose.yml 中 POSTGRES_DB 对应；
PG_USER：数据库用户，和 docker-compose.yml 中 POSTGRES_USER 对应；
PG_PASS：数据库密码，和 docker-compose.yml 中 POSTGRES_PASSWORD 对应；
PG_HOST：数据库主机，和 docker-compose.yml 中服务名称 postgres 对应；

更多的变量说明，请参考官方的文档：https://docs.tooljet.com/docs/setup/env-vars

一键启动

然后执行下面的命令

# 新建文件夹 tooljet 和 子目录
mkdir -p /volume1/docker/tooljet/{certs,data,fallbackcerts,logs}

# 进入 tooljet 目录
cd /volume1/docker/tooljet

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:9480 就能看到设置界面

设置管理员

设置工作区名称，例如：test

设置公司信息，比如您的角色，例如： Other，都是无关紧要的，随便填就行

主界面

首先要添加一个数据源

支持 Databases、APIs、Cloud Storages，基本市面上主流的都支持

用 lsky 库做个测试，设置没问题的话，连接测试会显示 CONNECTION VERIFIED

SAVE 就可以了

新建一个 app，可以选择模板，或者导入

到主界面了

通过拖拽组件，来搭建应用，建议看官方文件快速入门：
https://docs.tooljet.com/docs/#the-very-quick-quickstart

不管哪一款低代码框架，基本的流程一般都是下面👇这样的：

连接数据库
创建新应用程序
构建 UI
生成查询并将数据绑定到 UI
预览、发布和共享应用程序

这个项目有个汉化版本，https://github.com/mousheng/tooljet_cn，增强了一些功能，比如二维码组件、评论组件、相册组件等等，使其更符合国内使用习惯。有兴趣可以去看看

参考文档

ToolJet/ToolJet: ToolJet is an open-source low-code platform for building and deploying internal tools with minimal engineering efforts 🚀
地址：https://github.com/ToolJet/ToolJet

Docker | ToolJet
地址：https://docs.tooljet.com/docs/setup/docker/

Docker | ToolJet
地址：https://docs.tooljet.com/docs/contributing-guide/setup/docker/

Tooljet is not deploying correctly on docker · Issue #3051 · ToolJet/ToolJet
地址：https://github.com/ToolJet/ToolJet/issues/3051