five-server

v0.3.3

Published

8 months ago

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

Downloads

2,457

0High
0Medium
0Low

yandeu

browser development tool http html php live server cli preview reload refresh live-server live server

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

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

// 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)
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme