MonkeyType高级开发环境搭建指南

MonkeyType高级开发环境搭建指南

monkeytype The most customizable typing website with a minimalistic design and a ton of features. Test yourself in various modes, track your progress and improve your speed. 项目地址: https://gitcode.com/gh_mirrors/mo/monkeytype

前言

MonkeyType作为一款流行的打字速度测试工具，其开源项目为开发者提供了参与改进的机会。本文将详细介绍如何搭建完整的MonkeyType开发环境，包括前端、后端以及相关服务的配置。

环境准备

版本控制工具

推荐使用Git进行代码管理。Windows用户需特别注意行尾符问题，建议执行以下命令：

git config --global core.autocrlf false

对于不熟悉命令行操作的用户，可以使用Sourcetree等图形化Git客户端工具。

Node.js环境

项目当前使用Node.js 20.16.0 LTS版本，推荐使用nvm进行版本管理：

nvm install 20.16.0
nvm use 20.16.0

包管理工具

项目采用pnpm作为包管理工具，安装命令如下：

npm i -g pnpm@9.6.0

可选组件配置

Docker环境

Docker可简化开发环境的搭建过程，特别适合解决跨平台兼容性问题。安装Docker后，可以方便地启动前后端服务。

Firebase认证系统

如需开发与用户账户相关的功能，需要配置Firebase：

1. 创建Firebase项目并启用认证服务
2. 配置Email/Password和Google登录方式
3. 生成服务账户私钥并放置在指定目录
4. 安装Firebase CLI工具并登录

配置文件设置

在frontend/src/ts/constants目录下，需要创建firebase-config.ts文件，内容来自Firebase控制台的Web应用配置。

数据库配置

如需开发涉及数据库的功能，需要配置MongoDB和Redis：

手动安装方式

1. 安装MongoDB Community Edition
2. 安装Redis服务器
3. 确保两者服务正常运行

Docker方式（推荐）

cd backend && npm run docker-db-only

建议安装MongoDB Compass进行可视化数据库管理，连接字符串为：

mongodb://localhost:27017

项目构建与运行

安装依赖

pnpm i

完整运行（前后端）

npm run dev

仅运行后端

手动方式：

npm run dev-be

Docker方式：

cd backend && npm run docker

仅运行前端

手动方式：

npm run dev-fe

Docker方式：

cd frontend && npm run docker

开发服务器默认运行在：

• 前端：http://localhost:3000
• 后端：http://localhost:5005

开发规范

项目使用Prettier自动格式化代码，提交时会自动执行格式化操作。建议开发者遵循项目已有的代码风格和提交规范。

常见问题

1. 构建速度慢：项目构建时间取决于机器性能，修改后请耐心等待自动重建完成
2. UNIX系统权限问题：如遇spawn错误，可尝试使用sudo权限运行
3. 跨设备访问：如需从局域网其他设备访问，需配置.env文件中的后端地址

结语

通过本文的详细指导，开发者可以建立起完整的MonkeyType开发环境。建议初次接触的开发者先从简单的功能修改开始，逐步熟悉项目结构和开发流程。遇到问题时，可以参考项目文档或寻求社区帮助。

monkeytype The most customizable typing website with a minimalistic design and a ton of features. Test yourself in various modes, track your progress and improve your speed. 项目地址: https://gitcode.com/gh_mirrors/mo/monkeytype