73 lines
2.7 KiB
Markdown
73 lines
2.7 KiB
Markdown
---
|
|
title: "Node.js + Vanilla JS Lightweight Tools"
|
|
aliases: [nodejs-proxy, vanilla-js, lightweight-tools]
|
|
tags: [nodejs, vanilla-js, proxy, lightweight, no-build]
|
|
sources: [01 Projects/3m-portal, 01 Projects/ferrero-ac-creator, 01 Projects/homepage]
|
|
created: 2026-04-15
|
|
updated: 2026-04-15
|
|
---
|
|
|
|
# Node.js + Vanilla JS Lightweight Tools
|
|
|
|
For simple client tools that don't need a frontend build step. Node.js serves static files and acts as a proxy for third-party APIs.
|
|
|
|
## Key Takeaways
|
|
- Use when: no React needed, no TypeScript, no build pipeline
|
|
- `server.js` does two things: serve static HTML/JS/CSS files + proxy `/api/*` to third-party APIs
|
|
- No Docker — just `node server.js` or `npm start`
|
|
- No transpilation, no bundling — open file in browser or hit localhost directly
|
|
- This pattern is for simple client-facing portals and utility tools
|
|
|
|
## When to Use
|
|
- Wrapping a third-party API that has CORS restrictions
|
|
- Small client portals (translation tools, booking tools)
|
|
- Rapid prototypes that don't need SSR or TypeScript
|
|
|
|
## Key Details
|
|
|
|
### server.js Structure
|
|
```js
|
|
const http = require('http')
|
|
const fs = require('fs')
|
|
const path = require('path')
|
|
const https = require('https')
|
|
|
|
const server = http.createServer((req, res) => {
|
|
if (req.url.startsWith('/api/')) {
|
|
// Proxy to third-party API
|
|
proxyRequest(req, res)
|
|
} else {
|
|
// Serve static files
|
|
serveStatic(req, res)
|
|
}
|
|
})
|
|
server.listen(3000)
|
|
```
|
|
|
|
### CORS Proxy Behavior (3M Portal)
|
|
- Strips/rewrites `Location` headers on 301/302 → returns 401 (prevents auth redirect loops)
|
|
- Injects CORS headers on all `/api` responses
|
|
- Masks sensitive data (passwords) in logs
|
|
|
|
## Projects Using This Pattern
|
|
- [[01 Projects/3m-portal/3M OMG Portal|3M OMG Portal]] — Node.js CORS proxy for One2Edit API (:3000)
|
|
- [[01 Projects/ferrero-ac-creator/Ferrero AC Booking Tool|Ferrero AC Booking]] — Node.js server for Box API + CSV download (:3456)
|
|
- [[01 Projects/homepage/Homepage Dashboard|Homepage Dashboard]] — Node.js static server for YAML-configured dashboard
|
|
|
|
## Comparison: When to Choose What
|
|
| Need | Choose |
|
|
|------|--------|
|
|
| No CORS issues, pure static | Open `index.html` directly (Ferrero "Download CSV" mode) |
|
|
| CORS proxy needed | `node server.js` |
|
|
| Auth + complex logic | FastAPI (Python) |
|
|
| SSR + complex routing | Next.js |
|
|
|
|
## Gotchas & Lessons
|
|
- `sessionStorage` (not `localStorage`) for auth tokens — clears on browser close (3M Portal)
|
|
- Always mask passwords in proxy logs
|
|
- 301/302 from API = auth failure in One2Edit — convert to 401 at proxy level
|
|
- These tools have no test suite — test manually
|
|
|
|
## Related
|
|
- [[wiki/tech-patterns/one2edit-api|one2edit-api]] — uses this proxy pattern
|
|
- [[wiki/tech-patterns/fastapi-python-docker|fastapi-python-docker]] — heavier alternative
|