agharsallah/esp-labs-web

选用指南

AI 根据 README 整理 · 2026/10/26 13:56:23

使用方式

作为网页应用使用，可直接打开在线指南，也支持本地运行开发服务器。

查看 README 依据

<div align="center"> # ESP32 Labs: the bench guide **Wire it, flash it, watch it, then read the code.**<br> An interactive guide to the ESP32-S3: 32 hands-on labs with live simulators, a 3D board, a pinout, a reader that explains the firmware line by line, and the chip's datasheet made readable. [](https://esp-labs-web.vercel.app) [](https://react.dev)

pnpm dev # http://localhost:5180 pnpm check # typecheck + lint + tests pnpm i18n:extract # regenerate the English content catalogues after editing lessons pnpm build # static bundle in dist/ (relative paths: serve it from any folder) pnpm preview # serve dist/ locally (browsers will not run module scripts from file://) ``` ## Configuration Copy `.env.example` to `.env` to override: | Variable | Default | Meaning |

部署要求

需要 Node 24.14+ 和 pnpm 11，建议克隆 esp-labs 仓库以使用代码阅读器。

查看 README 依据

You need **Node 24.14+** and **pnpm 11** (`corepack enable` gives you the pinned version). The code reader shows the firmware from a sibling checkout of `esp-labs`, so clone both repos side by side: ```sh git clone https://github.com/agharsallah/esp-labs.git git clone https://github.com/agharsallah/esp-labs-web.git cd esp-labs-web pnpm install pnpm dev # http://localhost:5180 ```

已知限制

代码阅读器需要 sibling 的 esp-labs 仓库才能显示固件内容，否则该功能不可用。

查看 README 依据

Without `../esp-labs`, everything else still works: the lessons, the simulators and the bench log. Only the code reader has nothing to show. Point `FIRMWARE_DIR` elsewhere if your checkout lives somewhere else ([Configuration](#configuration)). ## How it is built React 19 with React Compiler, React Router 8 (data mode, hash URLs), TanStack Query 5, zod 4, i18next, three.js, CSS Modules and design tokens, built by Vite 8. Lessons are data, simulators are lazily loaded widgets, and the bench log is JSON fetched at run time. ```mermaid flowchart LR