Noodles Practicing Medicine

    five-server
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.4 • Public • Published

    Five Server

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

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

    Visual Studio Marketplace Rating Sponsors NPM version Github Workflow Github Workflow Downloads Node version Codecov


    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]
    }

    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/bulma@0.9.2/css/bulma.min.css" />
    
    <!-- will convert this ... -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css" />
    
    <!-- into this. -->
    <link rel="stylesheet" href="/.cache/https://cdn.jsdelivr.net/npm/bulma@0.9.2/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

    fiveserver logo

    License

    See LICENSE

    Install

    npm i five-server

    DownloadsWeekly Downloads

    211

    Version

    0.1.4

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    663 kB

    Total Files

    209

    Last publish

    Collaborators

    • yandeu