Ever wished you had VS Code's Live Server extension as a standalone CLI tool? Meet Zappp - a simple, fast static file server with live reload functionality that you can run from anywhere.
Why I Built Zappp
As developers, we've all been there: you're working on a quick HTML/CSS/JS project, need to test it locally, and reach for Python's SimpleHTTPServer or VS Code's Live Server. But what if you're not in VS Code? What if you want something you can run from any terminal, on any project, instantly?
That's why I created Zappp - a zero-configuration development server that just works.
Features That Make Development Easier
🚀 Zero Configuration
No config files, no setup. Just run zappp and you're live.
zappp
# Server running at http://localhost:3000
🔄 Automatic Live Reload
Edit your files and watch the browser refresh automatically. No manual reloading, no browser extensions needed.
📁 Beautiful Directory Listing
No index.html? No problem. Zappp shows you a clean directory listing so you can navigate your project easily.
🌐 Network Accessible
Want to test on your phone or share with a colleague? Zappp binds to 0.0.0.0 by default, making your dev server accessible on your local network.
🎨 Developer-Friendly Error Pages
Beautiful, informative error pages help you debug issues faster.
🔒 Built-in Security
Protection against directory traversal attacks keeps your file system safe.
Installation
Install globally with npm:
npm install -g zappp
That's it. You're ready to go.
Usage Examples
Basic Usage
# Start server in current directory
zappp
# Serve a specific directory
zappp ./dist
# Custom port
zappp -p 8080
# Open browser automatically
zappp -o
# Combine options
zappp ./public -p 5000 -o
Real-World Scenarios
Scenario 1: Quick HTML Prototype
cd my-landing-page
zappp -o
# Browser opens automatically, live reload active
Scenario 2: Testing on Mobile
zappp -h 0.0.0.0
# Visit http://192.168.1.x:3000 on your phone
Scenario 3: Production Build Preview
npm run build
zappp ./dist -p 8080
How It Works
Zappp is built on three core technologies:
- Node.js HTTP Server - Fast, reliable static file serving
- File System Watcher - Detects changes in your project
- WebSocket - Real-time communication for live reload
When you run Zappp:
- It spins up an HTTP server to serve your files
- A file watcher monitors your directory for changes
- A WebSocket connection is injected into HTML files
- On file change, the server notifies the browser to reload
Simple, elegant, effective.
Command Options
| Option | Alias | Description | Default |
|---|---|---|---|
--port <number> |
-p |
Port to use | 3000 |
--host <host> |
-h |
Host to bind to | 0.0.0.0 |
--open |
-o |
Open browser automatically | false |
--help |
Show help message | ||
--version |
-v |
Show version |
Why Choose Zappp Over Alternatives?
vs Python SimpleHTTPServer
- ✅ Live reload built-in
- ✅ Faster startup
- ✅ Better error handling
- ✅ Modern WebSocket-based updates
vs VS Code Live Server
- ✅ Works outside VS Code
- ✅ Can be used in any terminal
- ✅ Programmable (use in npm scripts)
- ✅ Lighter weight
vs http-server
- ✅ Live reload included
- ✅ Zero configuration
- ✅ Simpler CLI interface
Perfect For
- 🎨 Frontend prototyping
- 📱 Testing responsive designs
- 🧪 Quick experiments
- 📚 Local documentation viewing
- 🎓 Teaching and demos
- 🚀 Build output preview
What's Next?
Zappp is actively maintained and I'm planning to add more features day by day...
Try It Today
npm install -g zappp
cd your-project
zappp -o
Give it a spin and let me know what you think! Contributions are welcome on GitHub.
Get Involved
⭐ Star the repo
🐛 Report issues
🤝 Contribute
Happy coding! ⚡
Fun Fact
The name of this project zappp is actually inspired from Electro Wizard Character in Clash Royale!
Have you tried Zappp? What features would you like to see next? Drop a comment below!
Top comments (0)