Five Server

Development Server with Live Reload Capability.
(Maintained Fork of Live Server)

- Rewritten in TypeScript
- Up-to-date dependencies
- Better than ever!

---

!Node version

---

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

``bash


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@latest
`

Usage

_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._

`ts
// 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

$3

You will find all available options for your Config File in /src/types.ts.

$3

Your browser will open the about page of your portfolio project at http://localhost:8085/about.html.

`json
// .fiveserverrc
{
"port": 8085,
"root": "src/portfolio",
"open": "about.html"
}
`

$3

Firefox (if available) will open https://127.0.0.1:8086/about.html and https://127.0.0.1:8086/contact.html.

`js
// 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._)

$3

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.

`js
// 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
}
`

$3

Watch only for file changes in /src. But exclude all .sass and .scss files from watching.

`js
// 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 tag:

`html



...


...


`

This will omit the usually injected Javascript from being instantiated on that given page.

$3

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:

`bash
'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'


`

$3

Serve and auto-reload PHP file in your browser!

Simply add the path to your PHP executable.

`js
module.exports = {
php: '/usr/bin/php', // Linux/macOS (example)
php: 'C:\\xampp\\php\\php.exe' // Windows (example)
}
`

$3

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:

`html








`

$3

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:

`html

`

Add this config file:

`js
// 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