How I built a dev server entirely in the browser
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
A deep dive into building a fully browser-based dev server for React Native, powering sub-100ms previews with no CLI or external server. The architecture uses Service Workers as the HTTP layer, a Virtual File System backed by IndexedDB, Babel Standalone for TypeScript/JSX transpilation, ES Modules with Import Maps to eliminate bundling (similar to Vite), and React Refresh for true HMR with state preservation. The system was built for RapidNative, an AI-powered React Native app builder where instant preview feedback is critical. Key components include a dual VFS (source and destination), an ESMify plugin pipeline, a forked esm.sh CDN for React Native Web compatibility, and dynamic module re-imports with cache-busting for HMR updates.
Table of contents
The goal: instant speed, no CLIUnderstanding the traditional dev serverThe browser has everything we need1. Service worker as the dev server2. Virtual File System (VFS)3. ESMify: The transformation pipelineThe Vite connection: Why no bundling works4. ES Modules + Import Maps = No bundling5. React Refresh: HMR that actually works6. The complete data flowHow this compares to SnackWhat's next?ConclusionSort: