企业官网建设流程全解析

Hoppscotch安装配置教程：3条命令跑通你的第一个API请求

【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem & Cloud • Web, Desktop & CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotch

Hoppscotch 是一款开源的 API 测试工具，装好它，你就能在浏览器或桌面端里发送 REST 请求、调试 GraphQL、连接 WebSocket，还能管理环境变量和请求集合，全程免费，不需要像 Postman 那样注册付费。

先认识一下这个工具

Hoppscotch 是一个开源的 API 开发平台，一个界面里同时支持 REST、GraphQL、WebSocket、Socket.IO、MQTT 五种协议（后几种分别对应 GraphQL 查询语言、实时消息、物联网消息传输），并且可以导出 Postman、Insomnia 格式的集合。

最快上手：3分钟跑通第一个请求

不想看长文的话，这三条命令就够了：

# 克隆源码仓库 git clone https://gitcode.com/GitHub_Trending/ho/hoppscotch # 进入目录并安装依赖（项目强制使用 pnpm，见下方说明） cd hoppscotch && pnpm install # 启动 Web 版开发服务器 pnpm --filter @hoppscotch/selfhost-web dev

跑完后浏览器打开http://localhost:3000，看到左侧集合树、右侧请求编辑区，就是主界面了。在 URL 栏输入https://echo.hoppscotch.io，点 Send，下方会立刻返回你这次请求的完整回显——恭喜，第一个 API 请求已经发出去了。

完整安装与配置

1. 环境检查

CLI 子包要求 Node.js ≥ 22，建议直接装最新的 LTS 版本，装完用node -v确认一下。依赖管理强制使用 pnpm（package.json里有preinstall钩子拦截其他包管理器），没有的话先执行：

# 全局安装 pnpm npm install -g pnpm

2. 环境变量配置

复制根目录的.env.example为.env，Web 端和自托管后端都读它。里面主要两组值：

• VITE_BASE_URL、VITE_BACKEND_GQL_URL等：决定 Web 前端连哪个后端，默认指向本地http://localhost:3170
• DATABASE_URL、DATA_ENCRYPTION_KEY：数据库连接和 32 位加密密钥，只在启用后端时需要

只玩 Web 版，.env保持默认值即可，请求、集合、历史都存在本地浏览器里。

3. 生产构建与预览

开发用dev，交付给团队时建议构建一次：

# 生产构建 Web 版，构建脚本已自带 8GB 内存上限 pnpm --filter @hoppscotch/selfhost-web build # 本地预览构建产物 pnpm --filter @hoppscotch/selfhost-web preview

4. 可选：自托管后端（团队功能）

想登录、团队共享、云同步，就需要后端服务。仓库自带 Docker Compose 一键编排：

# 启动后端 + Postgres 数据库，数据库端口映射 5432、后端 3170 docker compose --profile default up -d

启动后在 Web 端左上角实例菜单里 "Add an instance"，填入你的后端地址，就能切换到自己搭的实例。

进阶玩法

• 切换协议：把 URL 栏左边的GET下拉换成WS、MQTT、GQL等，输入栏会立刻变成对应协议的连接表单。想深入看实现，可以翻 packages/hoppscotch-common/src/helpers/ 下的rest、graphql、realtime子目录。
• 环境与测试脚本：右侧 Variables 面板建一套开发/生产环境，URL 里写{{baseUrl}}即可自动替换；每个请求还能挂 Pre-request Script 和 Tests，用 JS 做前置处理和断言。
• 命令行跑测试：仓库内置 CLI，把导出的集合 JSON 丢给hopp test collection.json就能在 CI 里回放整个集合，脚本执行细节见 packages/hoppscotch-cli/。

避坑清单

现象：npm install 直接报错退出。原因：package.json里only-allow pnpm钩子拒绝其他包管理器。 修复：npm i -g pnpm后改用pnpm install。

现象：打开 3000 端口显示的是别的项目。原因：默认端口被占用。 修复：改 packages/hoppscotch-selfhost-web/vite.config.ts 中server.port，重启 dev。

现象：请求被浏览器 CORS 拦截。原因：对方 API 没有放行你当前的浏览器域名。 修复：设置页打开 Proxy 模式，让请求经官方代理中转，这是官方给浏览器的标准解法。

现象：生产构建时 Node 进程被 OOM 杀掉。原因：Vite 打包前端依赖时内存峰值高。 修复：手动跑构建时加上node --max_old_space_size=8192，仓库自带的 build 脚本已经这么做了，别绕过它直接用裸 vite。

现象：pnpm install 后页面报 GraphQL 相关错误。原因：前端代码在postinstall阶段靠.env里的 schema 地址生成类型，缺文件会静默失败。 修复：确认.env已从.env.example复制，然后重跑一次pnpm install。

下一步

想继续深入，官方文档在 docs.hoppscotch.io；源码层面，前端所有组件和逻辑集中在 packages/hoppscotch-common/src/，后端各业务模块在 packages/hoppscotch-backend/src/，按目录名直接找就行。

【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem & Cloud • Web, Desktop & CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotch