Five Server
Development Server with Live Reload Capability.
(Maintained Fork of Live Server)
- Rewritten in TypeScript
- Up-to-date dependencies
- Better than ever!
Top Features
-
π Remote Logs
Displays the logs of your browser in your terminal!
Useful for debugging on your smart phone 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)
Get Started
# 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@latestUsage
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 })Documentation
Will be available soon.
Config File
Reference:
You will find all available options for your Config File in /src/types.ts.
A simple example of a config file:
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"
}Another example:
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. Means, the first time you open your browser, you have to confirm that you want to continue.)
Debug on your Mobile Device
Allows you to connect your mobile device by making your server accessible externally.
You will see all logs from the mobile device in your terminal in yellow.
// fiveserver.config.js
module.exports = {
host: '0.0.0.0', // default: '0.0.0.0' (could also be 'localhost' for example)
remoteLogs: 'magenta' // true | false | Color
useLocalIp: true, // optional: opens browser with your local IP
}Watch & Ignore:
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 given page.
Browser of your choice
The option browser can be a string or an 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'PHP Server
Serve and auto-reload PHP file 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)
}Cache
By default, the caching route (/.cache) is activated.
If in development you often load files from a CDN (styles, images, scripts, etc.), you might not want to make a http request to the CDN server on every reload. To prevent this and load your assets faster, simply add the cache attribute or manually prepend /.cache/ to your resources.
Example:
<!-- adding "cache" ... -->
<link cache rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<!-- will convert this ... -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<!-- into this. -->
<link rel="stylesheet" href="/.cache/https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />Server Side Rendering (like express.js)
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 you 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)
}VSCode Extension
Download it from marketplace.visualstudio.com.
Logo
License
See LICENSE