AFFiNE纯前端调试环境搭建

场景

◇AFFiNE 项目包含了前端和后端的代码。想要在本地仅调试 web 前端代码(包括 Cloud Workspace 的内容)，而无需配置与启动其中的后端部分。

实现方式

● 项目 package.json 文件提供的 dev 脚本已经提供了交互式命令行界面来启动本地 web 开发服务，其默认连接的后端是 http://localhost:3010，将连接目标改为官方网址(https://app.affine.pro/)对应的后端。

操作步骤

修改本地 web 开发服务的配置

◆ 项目 dev 脚本运行的是项目内的 @affine/cli 包，它的配置文件位于：”tools\cli\src\webpack\config.ts”。
◆ 将配置文件内容中所有的”target: 'http://localhost:3010'“改为”target: ‘https://app.affine.pro/'"，并添加"changeOrigin: true"和"secure: false"。
◆ 例如其中的{context: ‘/socket.io’, …}这条，修改后如下。

{
  context: '/socket.io',
  target: 'https://app.affine.pro/',
  changeOrigin: true,
  secure: false,
  ws: true,
},

启动本地 web 开发服务

■ 运行”yarn dev”启动本地 web 开发服务。
■ 浏览器进入本地开发页面：http://localhost:8080。

在官方网站上登录

● 要使用”Cloud Workspace”涉及到第三方网站的登录鉴权，由于官方网站后端 API 登录成功后的重定向地址是官方网站的地址，所以登录流程无法在本地开发环境完成。手动在官方网站(https://app.affine.pro/)上完成登录。
● 登录成功并进入”Cloud Workspace”之后，拷贝当前网址中的路径，如：”https://app.affine.pro/workspace/xx-xx-xx/all"对应的路径是"/workspace/xx-xx-xx/all"。
● 浏览器开发者工具中查看已登录官方网站下的 cookie 字段：affine_session。

拷贝官网身份信息到本地

▲ 将上节中 affine_session 字段及值创建与拷贝到本地 cookie，其中的 domain 值使用与本地开发页面相同的”localhost”。

▲ 在本地环境访问上节路径，如：”http://localhost:8080/workspace/xx-xx-xx/all"，就可以看到与官网相同的内容并调试前端代码了。