ultimate-live-server

v2.1.0

Published

3 days ago

The most powerful development server with public tunneling, remote console, QR codes, WASM support, mock API, build integration, and instant hot-reload

Downloads

346

Ultimate Live Server (ULS) 🚀

The simplest, most powerful development server for web projects.

What is it?

A development server that automatically refreshes your browser when you save files. Great for:

Frontend development (HTML, CSS, JavaScript)
Mobile testing on real devices
Team collaboration with remote debugging
Quick prototyping without setup

Key Features

🚀 Core Features

Auto-Refresh: Browser reloads when you save files
CSS Hot Reload: Styles update without full refresh
SPA Support: Works with React, Vue, Angular, etc.
HTTPS Ready: Auto-generated SSL certificates
QR Codes: Scan code for mobile devices

🌟 Advanced Features

Public Tunneling: Share your work with anyone with a URL
Remote Console: See mobile logs in your terminal
Custom Config: Save settings in .ulsrc.json
CORS Control: Fetch from any API
Build Integration: Auto-run build commands
Mock API: Test APIs without backend
Rate Limiting: Protect from abuse
File Logging: Track all requests
WSL Support: Works with Windows Subsystem for Linux

Quick Start

Install

npm install -g ultimate-live-server

Basic Usage

# Start in your project folder
cd your-project
uls

# With SPA support (React, Vue, etc)
uls --spa

# With QR code (for mobile testing)
uls --qr

# With remote console (see mobile logs)
uls --remote-console

# Everything at once!
uls --spa --qr --remote-console

Common Options

| Option | Description | Default | |--------|-------------|----------| | -p, --port <port> | Port number | 8080 | | --spa | Enable SPA support | false | | --https | Enable HTTPS | false | | --qr | Show QR code | false | | --tunnel | Create public tunnel | false | | --verbose | Show detailed logs | false | | --cors <origin> | CORS origin | * |

Project Setup

1. Create `.ulsrc.json`

Create this file in your project root:

{
  "port": 8080,
  "spa": true,
  "qr": true,
  "remoteConsole": true,
  "cors": "*",
  "ignore": ["*.log", "temp/**"]
}

2. Create `.env` (Optional)

API_URL=https://api.example.com
DEBUG=true

Access in your code:

console.log(window.__ULS_ENV__.API_URL);

3. Create Mock API (Optional)

Create mock-routes.json:

{
  "/api/users": {
    "get": {
      "status": 200,
      "response": [
        {"id": 1, "name": "John"}
      ]
    }
  }
}

Usage Examples

For React Projects

uls --spa --qr --verbose

For Vue Projects

uls --spa

With Build Integration

uls --spa --build "npm run build" --watch src --dist dist

With Backend Proxy

uls --spa --proxy http://localhost:5000 /api

For WSL Development

uls --wsl --qr

Full Development Server

uls --spa --qr --remote-console --verbose --cors "*"

Troubleshooting

Not Reloading?

Check if you have <head> or <body> tags in your HTML
Try --verbose to see what's happening
Check if port 8080 is available

Mobile Not Connecting?

Use --qr and scan the QR code
Use --wsl if using Windows Subsystem for Linux
Try --verbose to see connection logs

CORS Errors?

Use --cors "*" for all origins
Check your API server settings
Add specific origins: --cors "https://your-domain.com"

Build Not Running?

Verify build command works: npm run build
Check --watch and --dist options are correct
Enable --verbose to see build execution

Rate Limiting?

Default: 1000 requests per minute
Increase/decrease: --rate-limit 100 (for 100 req/min)
Disable: remove the flag entirely

CLI Options Reference

Essential Options

| Flag | Description | |------|-------------| | -p, --port | Set server port (default: 8080) | | -h, --host | Set host address (default: 0.0.0.0) | | --spa | Enable SPA support | | --https | Enable HTTPS with self-signed certificate | | --qr | Display QR code in terminal | | --tunnel | Create public HTTPS tunnel | | --subdomain <name> | Request tunnel subdomain | | --auth <user:pass> | Add authentication to tunnel |

Advanced Options

| Flag | Description | |--------|-------------| | --remote-console | Forward console logs from clients | | --verbose | Show detailed logs for debugging | | --cors <origin> | Set CORS policy | | --cors-methods <methods> | Allowed CORS methods | | --ignore <patterns> | Ignore specific files/patterns | | --proxy <url> [path] | Proxy requests to backend | | --auth <user:pass> | Basic auth for tunnels | | --throttle <ms> | Add response delay (throttling) | | --mock <file> | Load mock API from JSON file | | --build <cmd> | Run build command on changes | | --watch <dir> | Watch specific directory | | --dist <dir> | Output directory for builds | | --rate-limit <req/min> | Rate limit requests | | --log-file <path> | Log to JSON file | | --custom-errors | Use custom error pages |

Getting Started

Install globally:
```
npm install -g ultimate-live-server
```
Navigate to your project:
```
cd /path/to/your/project
```
Run the server:
```
uls
```
Open your browser:
```
http://localhost:8080
```
That's it! The server will watch your files and auto-reload your browser.

Features Explained

Hot Reload

When you save HTML, CSS, JavaScript files, the browser reloads automatically. CSS updates use hot injection - no full refresh needed.

SPA Support

Single Page Applications (React, Vue, Angular, etc.) work seamlessly. The server handles routing for you.

Public Tunneling

Share your local work with anyone via HTTPS. Get a public URL instantly. Great for:

Showing work to clients
Testing on mobile devices
Demoing to stakeholders

Remote Console

See console.log(), console.error(), console.warn() from your mobile device right in your terminal. No USB or extra tools needed!

Config File

Save your preferences in .ulsrc.json to avoid typing flags every time.

CORS

By default, all origins are allowed (*). Restrict to specific origins if needed for security.

Build Integration

Automatically runs your build command (e.g., npm run build) when source files change. Perfect for development builds.

Tips for Beginners

1. Start Simple

uls

Just the basics. Add flags as needed.

2. Enable Verbose Mode

uls --verbose

See what's happening under the hood. Great for learning and debugging.

3. Use SPA for Modern Frameworks

uls --spa

Essential for React, Vue, Angular, Svelte, etc.

4. Test on Real Devices

uls --qr

Scan the QR code with your phone to test mobile.

5. Use Remote Console

uls --remote-console

Open your site on mobile and watch logs in your terminal.

6. Check Health Endpoint

curl http://localhost:8080/health

Should return server status and stats.

7. Read the Examples Section

Scroll down to see common workflows for React, Vue, Next.js, etc.

FAQ

Q: Is this for production use? A: Designed for development. Use Vercel, Netlify, or similar for production deployment.

Q: Does it work with Docker? A: Yes! Use --wsl flag for WSL compatibility.

Q: Can I run multiple servers? A: Yes! Use different ports with -p or --port.

Q: How do I change the port? A: Use -p 3000 or --port 3000 (or any available port).

Q: Why won't it reload? A: Check:

File has <head> or <body> tags
No syntax errors
File is in the watched directory
Port 8080 isn't in use

Q: Can I use this with Next.js? A: Yes! Use --spa flag for Next.js routing.

Q: Does it work with all browsers? A: Yes! Uses standard WebSocket with polling fallback for mobile.

Q: Is there a rate limit? A: Default 1000 requests/minute. Adjust with --rate-limit.

Q: Can I mock APIs? A: Yes! Create mock-routes.json and use --mock flag.

Q: Does it support HTTPS? A: Yes! Use --https for self-signed certificates.

Q: How do I customize error pages? A: Create 404.html and 500.html in your project root and use --custom-errors.

Common Workflows

React Development

# Full React setup
npm install -g ultimate-live-server

# Start dev server
cd my-react-app
uls --spa --qr --remote-console

Vue Development

# Vue setup
npm install -g ultimate-live-server

# Start Vue dev server
cd my-vue-project
uls --spa --qr

Next.js Development

# Next.js setup
npm install -g ultimate-live-server

# Start Next.js dev server
cd my-nextjs-app
uls --spa --build "npm run build" --watch src --dist .next --verbose

Full Stack Development

# Frontend + Backend
uls --spa --proxy http://localhost:5000 /api

License

Support

Having issues? Open an issue or check troubleshooting section above.

Made with ❤️ by harshit