live-server is a lightweight development server with live reload capability, ideal for quickly previewing static sites—including proudction builds of Vue or React applications.

Install it globally via npm:

npm install -g live-server

Alternatively, use npx without installing:

npx live-server --port=3344

Basic Usage

Run live-server from your project’s root directory (e.g., the folder containing your built dist/ or build/ output). It will automatically launch your default browser and serve the contents. File changes trigger automatic browser refreshes—except for CSS files, which are injected without a full page reload.

Common Command-Line Options

• --port=NUMBER: Specify port (default: 8080)
• --host=ADDRESS: Bind to a specific host (default: 0.0.0.0)
• --no-browser: Skip auto-opening the browser
• --open=PATH: Open browser to a specific path (e.g., /index.html)
• --entry-file=PATH: Serve this file for missing routes (useful for SPAs)
• --spa: Redirect all non-file requests to / (enables SPA routing)
• --watch=PATH: Comma-separated paths to watch for changes
• --ignore=PATH: Comma-separated paths to ignore (supports glob patterns)
• --proxy=/api:http://localhost:8000: Proxy API requests during development
• --cors: Enable Cross-Origin Resource Sharing

Previewing a Built Vue or React App

After building your frontend project (e.g., running npm run build), navigate to the output directory:

cd dist          # for Vue CLI projects
# or
cd build         # for Create React App

Then start the server:

live-server --port=3344 --spa

The --spa flag ensures that client-side routing (e.g., Vue Router in histtory mode or React Router) works correctly by serving index.html for all unmatched routes.

Optionally, configure default settings by creating a ~/.live-server.json file with your preferred options.