Appsmith项目客户端开发环境搭建指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00537/article/details/148325980

Appsmith项目客户端开发环境搭建指南

appsmith appsmithorg/appsmith: Appsmith 是一个开源的无代码开发平台，允许用户通过拖拽式界面构建企业级Web应用程序，无需编写任何后端代码，简化了软件开发流程。项目地址: https://gitcode.com/gh_mirrors/ap/appsmith

前言

Appsmith是一个开源的低代码开发平台，允许开发者快速构建内部工具和管理面板。本文将详细介绍如何搭建Appsmith客户端（前端）的开发环境，帮助开发者快速上手项目开发。

技术栈概览

Appsmith客户端采用现代前端技术栈构建：

核心框架：ReactJS
类型系统：TypeScript
状态管理：react-redux + redux-saga
开发工具：VS Code（推荐）

环境准备

在开始之前，请确保您的开发机器已安装以下必备工具：

1. 基础工具安装

Docker：容器化工具，用于运行开发环境所需的服务

各平台安装方法请参考官方文档

本地开发证书工具：用于开发环境的安全连接

Linux安装示例：

curl -s https://api.github.com/repos/FiloSottile/mkcert/releases/latest \
| grep "browser_download_url.*linux-amd64" \
| cut -d : -f 2,3 | tr -d \" \
| wget -i - -O mkcert
chmod +x mkcert
sudo mv mkcert /usr/local/bin

注意：Firefox用户需额外安装nss工具

envsubst：环境变量替换工具

MacOS：brew install gettext
Linux：通常已预装

Yarn：JavaScript包管理工具

全局安装：npm install -g yarn

2. 本地安全连接配置

生成开发证书：
```
cd app/client/docker && mkcert -install && mkcert "*.appsmith.com" && cd ../../..
```
此命令会在docker目录下生成两个文件：
- _wildcard.appsmith.com-key.pem（私钥）
- _wildcard.appsmith.com.pem（证书）

配置本地域名解析：

echo "127.0.0.1 dev.appsmith.com" | sudo tee -a /etc/hosts

验证配置：

cat /etc/hosts | grep appsmith

复制环境变量文件：
```
cp .env.example .env
```

后端服务配置

Appsmith客户端需要连接后端服务，有两种选择：

1. 使用线上测试环境（推荐）

cd app/client
./start-https.sh https://release.app.appsmith.com

2. 本地运行后端服务

从源码运行：参考服务器端设置文档

使用Docker镜像运行：

docker rm appsmith
docker pull appsmith/appsmith-ce
docker run -d --name appsmith -p 8000:80 appsmith/appsmith-ce:latest
./start-https.sh http://localhost:8000

客户端开发环境启动

安装依赖：

yarn install

Linux用户可能需要调整系统监控限制：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

启动开发服务器：
```
yarn start
```
- 访问地址：https://dev.appsmith.com
- 重要：必须使用HTTPS协议，不要带端口号
Node版本问题处理：
- 如果遇到Node版本不兼容，建议使用nvm或fnm管理多版本
- 示例：
```
nvm use 18.17.1
```

测试环境配置

集成测试（Cypress）

配置准备：
- 确保cypress.config.ts中的baseURL正确
- 如需测试Git功能，需在服务器配置中添加：
```
APPSMITH_GIT_ROOT=./container-volumes/git-storage
```
测试环境初始化：
```
cd app/client/cypress/scripts
yarn install
yarn run setup
```
根据提示选择是否设置本地服务器和TED(TestEventDriver)

运行测试：

命令行运行：

npx cypress run --spec <spec path> --browser chrome

可视化运行：
```
npx cypress open
```

单元测试（Jest）

运行所有测试：
```
yarn run test:unit
```

运行单个测试：

npx jest <file_path/file_name>

或

yarn jest src/widgets/<filepath>/<filename>.test.ts --silent=false

监听模式：
```
npx jest --watch <file_path/file_name>
```

Windows WSL2特别说明

Windows用户推荐使用WSL2进行开发：

确保已安装：
- WSL2（最新版）
- WSL2中的Node.js
- Docker Desktop（配置WSL2后端）
重要提示：
- 代码仓库必须克隆到WSL文件系统中
- 使用VS Code的Remote-WSL扩展进行开发
- 域名解析需同时配置Windows的hosts文件：
```
127.0.0.1 dev.appsmith.com
```

常见问题排查

WSL无法访问dev.appsmith.com
- 检查Windows的hosts文件配置
- 确保WSL网络正常，可尝试重启WSL
Docker容器问题
- 查看日志：docker logs wildcard-nginx
- 端口冲突：检查80/443端口占用情况
```
lsof -i tcp:80,443 | grep LISTEN
```
手动配置Nginx
- 可参考nginx-app.conf.template文件
- 主要配置项：
  - proxy_pass指向本地开发服务器
  - ssl证书路径
  - 子过滤器配置（可选）