4.4 KiB
AI Context for NPM-WG Project
1. Project Overview
NPM-WG is a custom fork of Nginx Proxy Manager integrated with WireGuard VPN management capabilities, inspired by wg-easy.
The project structure remains mostly identical to Nginx Proxy Manager, but specific backend and frontend modules have been added to manage WireGuard securely inside the Docker container without needing external dependencies.
2. Technology Stack
- Backend: Node.js, Express.js, Knex (Query Builder), SQLite/MySQL/PostgreSQL. Uses ES Modules (
"type": "module"). - Frontend: React 18, TypeScript, Vite, React Router, React Bootstrap (
ez-modal-react), Formik, React Query (@tanstack/react-query). - Container: Alpine Linux with
s6-overlayfor service process management.
3. WireGuard Integration Architecture
Core Idea
WireGuard functionality is disabled by default and enabled via the WG_ENABLED environment variable. The system uses a Node.js cron wrapper to manipulate the WireGuard wg and wg-quick CLI tools directly. It leverages Docker volume mapping (/etc/wireguard) to maintain state.
Backend Map (Node.js)
If you need to edit WireGuard logic, check these files:
backend/lib/wg-helpers.js: Shell wrappers forwgCLI (create keys, parse CIDR, parsewg showdumps, gen configurations).backend/internal/wireguard.js: Core business logic. Manages interface start/stop, adding/removing clients, IP allocation, and token expiration checking via cron.backend/routes/wireguard.js: REST APIs exposing CRUD operations to the frontend. Note: Handlers use ES module export functions syntax.backend/routes/main.js: Mounts the/api/wireguardroutes.backend/index.js: Contains the startup hookinternalWireguard.startup(knex)and graceful SIGTERM shutdown hooks.backend/migrations/20260307000000_wireguard.js: Knex schema initialization for tableswg_interfaceandwg_client. Note: Must use ES Moduleexport function up()instead ofexports.up!
Frontend Map (React)
If you need to edit the UI/UX, check these files:
frontend/src/api/backend/wireguard.ts: API fetch helper definitions.frontend/src/hooks/useWireGuard.ts:@tanstack/react-querydata fetchers and mutators.frontend/src/pages/WireGuard/index.tsx: Main UI Page rendering the interface stats and clients table.frontend/src/modals/WireGuardClientModal.tsx: Form to create a new client. Note: Modal built explicitly overreact-bootstrap/Modalto prevent backdrop freezing issues.frontend/src/modals/WireGuardQRModal.tsx: Generates and parses QR codes.frontend/src/Router.tsx&SiteMenu.tsx: Routing and UI Navigation injection points for WireGuard UI.
4. Build & Deployment Gotchas
Line Endings (CRLF vs LF)
- CRITICAL: All files in
docker/rootfsanddocker/scriptsare used bys6-overlayinside Alpine Linux. They MUST be formatted using UNIX Line Endings (LF). If you download this repository on Windows, ensure the git config does not automatically convert text files toCRLF, otherwise container booting will crash withs6-rc-compile: fatal: invalid type: must be oneshot, longrun, or bundle.
Compilation Steps
- The React Frontend MUST be pre-built before Docker can build.
- You must run
yarn install,yarn locale-compile, andyarn buildinside thefrontend/directory beforedocker build. - Use the script
./scripts/build-project.shto execute the full pipeline if you have a bash environment.
Docker Config Requirements
- Required capabilities:
--cap-add=NET_ADMINand--cap-add=SYS_MODULEare required for WireGuard to manipulate interfaces. - Sysctls:
--sysctl net.ipv4.ip_forward=1must be applied to the container. - Volumes: Volume
/etc/letsencryptis severely required by original NPM core.
5. Agent Instructions
If you are an AI reading this file:
- Treat existing NPM-specific code as sacred. Do not modify global
.tshooks or Knex config unless instructed. - If fixing a bug in the Frontend, use
useWgClients()/useInterfaceStatus()standard hooks. Use React-BootstrapModalinstead of raw div class names. - If changing the DB, create a new
backend/migrations/*.jsfile in ES Module format. - When testing out scripts, remember that the docker container requires port mapping to 51820/udp.