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 smart phone for example. -
🚀 Server Side Rendered App
Works with any Server Side Rendered content like PHP or 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@latestSimilar to Live Server.
Will be available soon.
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.)
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:
// ignore: [/\.s[ac]ss$/i, /\.tsx?$/i]
}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']
Server Side Rendering (like PHP or Express.js):
You can enable live reload for any server side generated content.
(Additional Plugin for Chrome available soon!)
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
}(Five Server only provides the live reload functionality. Five Server does not serve the server side file for you. You still need a PHP or Node.js server.)
Download it from marketplace.visualstudio.com.
See LICENSE