Development Server with Live Reload Capability.
(Maintained Fork of Live Server)
- Rewritten in TypeScript
- Up-to-date dependencies
- Better than ever!
-
🚀 Remote Logs
Displays the logs of your browser in your terminal!
Useful for debugging on your smartphone for example. -
🚀 PHP Server
Serves not only your .html files but also .php.
See docs below -
🚀 Server Side Rendered App
Works with any Server Side Rendered content like Express.js!
See docs below -
🚀 Instant Updates
Updates your html page while typing!
(VSCode Extension only) -
🚀 Highlights
Highlights the code you are working on in your browser!
(VSCode Extension only) -
🚀 Auto Navigation
Navigates your browser automatically to the current editing .html file!
(VSCode Extension only)
# Remove live-server (if you have it)
$ npm -g rm live-server
# Install five-server
$ npm -g i five-server
# Run it
$ five-server
# Update five-server (from time to time)
$ npm -g i five-server@latestFiles and folders whose names start with a dot (such as .env) are hidden by default, so their contents cannot be read in the browser. They still appear in the explorer. Requesting one directly (for example /.env), or opening it with .preview or .fullscreen, shows a message explaining why it is hidden.
To serve dotfiles, set dotFiles: true in your config or start with --dotFiles. The .git folder is always hidden, even with dotFiles enabled.
// fiveserver.config.js
module.exports = {
dotFiles: true
}Five Server is written in TypeScript. Since it is nearly impossible to have a clean import for all module resolvers without restricting/adding explicit access to submodules via the exports property in package.json (which I don't want), I just list some very simple import examples.
Once everyone uses Modules in Node.js, I'm happy to make adjustments.
// TypeScript
import FiveServer from 'five-server'
new FiveServer().start({ open: false })
// Node.js Module
import FiveServer from 'five-server/esm.mjs'
new FiveServer().start({ open: false })
// Node.js Module (alternative)
import pkg from 'five-server'
const { default: FiveServer } = pkg
new FiveServer().start({ open: false })
// CommonJS
const FiveServer = require('five-server').default
new FiveServer().start({ open: false })Will be available soon.
By default, Five Server binds to 127.0.0.1, so only your own computer can connect. The browser opens http://localhost:<port> if your system resolves localhost to 127.0.0.1, and http://127.0.0.1:<port> otherwise.
host |
Who can connect | Browser opens |
|---|---|---|
| not set (default) | this computer only | http://localhost:<port> or http://127.0.0.1:<port> |
'0.0.0.0' |
any device on your network | http://localhost:<port> or http://127.0.0.1:<port> |
any other value, e.g. '192.168.1.20' |
that address only | that address |
To test on a mobile phone on the same network, set host: '0.0.0.0' (or start with --host=0.0.0.0). Five Server then prints a Network URL in the terminal. Open that URL on your phone.
// fiveserver.config.js
module.exports = {
host: '0.0.0.0',
remoteLogs: 'magenta' // optional: show phone logs in your terminal (true | false | Color)
}0.0.0.0 makes your project files reachable by every device on the network. Use it only on networks you trust.
A cross-origin read happens when a page on one origin (scheme, host, and port) reads a response from another origin. For example, a frontend on http://localhost:3000 fetching data from Five Server on port 5500. The cors option controls which origins may read responses.
cors |
Origins that may read responses |
|---|---|
true (default) |
This computer: localhost, 127.0.0.1, [::1], on any port, over http or https. If host is '0.0.0.0' or a LAN address, your private network too: 10.x.x.x, 172.16.x.x to 172.31.x.x, and 192.168.x.x. |
false |
None. Five Server sends no CORS headers. |
['http://localhost:3000'] |
Only the listed origins. Strings must match exactly, including the port. Regular expressions are allowed. |
'*' |
Any origin. Unsafe: any website you visit can read Five Server's responses. |
// fiveserver.config.js
module.exports = {
cors: ['http://localhost:3000', 'http://192.168.1.26:5173']
}Pages that Five Server serves itself are same-origin and do not need CORS. To reach a backend from a frontend without CORS, use the proxy option. On the command line, use --cors or --no-cors.
You will find all available options for your Config File in /src/types.ts.
Your browser will open the about page of your portfolio project at http://localhost:8085/about.html.
// .fiveserverrc
{
"port": 8085,
"root": "src/portfolio",
"open": "about.html"
}Firefox (if available) will open https://127.0.0.1:8086/about.html and https://127.0.0.1:8086/contact.html.
// fiveserver.config.js
module.exports = {
port: 8086,
root: 'src/portfolio',
open: ['about.html', 'contact.html'],
host: '0.0.0.0',
browser: 'firefox',
https: true
}(The https certificate is self-signed. This means the first time you open your browser, you have to confirm that you want to continue.)
Watch only for file changes in /src. But exclude all .sass and .scss files from watching.
// fiveserver.config.js
module.exports = {
// ...
watch: 'src',
ignore: /\.s[ac]ss$/i
// can also be an array:
// watch: ['src', 'public'],
// ignore: [/\.s[ac]ss$/i, /\.tsx?$/i]
}To prevent a single page from automatically reloading, add data-server-no-reload to the <body> tag:
<!doctype html>
<html lang="en">
<head>
...
</head>
<body data-server-no-reload>
...
</body>
</html>This will omit the usually injected JavaScript from being instantiated on that page.
The option browser can be a string or a string[].
If you provide an array, the first browser found will be opened.
Following options are all valid:
'chrome'
['firefox', 'chrome --incognito']
['C:\\Program Files\\Firefox Developer Edition\\firefox.exe --private-window']
# if 'chrome' does not work, try 'google chrome' or 'google-chrome'Serve and auto-reload PHP files in your browser!
Simply add the path to your PHP executable.
module.exports = {
php: '/usr/bin/php', // Linux/macOS (example)
php: 'C:\\xampp\\php\\php.exe' // Windows (example)
}The cache feature (the /.cache route and the cache attribute) has been removed in version 0.6.0 and above.
You can enable live reload for any server side generated content.
Check out the express.js example at /examples/express.
Simply start Five Server and add the script below to your files:
<script async data-id="five-server" src="http://localhost:8080/fiveserver.js"></script>Add this config file:
// fiveserver.config.js
module.exports = {
https: false,
host: 'localhost',
port: 8080,
open: false // or open your express.js app (http://localhost:3000/ for example)
}Download it from marketplace.visualstudio.com.
See LICENSE