❤
npm
Sign UpSign In

express-live-reloading

1.0.1 • Public • Published

express-live-reloading

npm npm downloads npm version

Build Status codecov

live reloading middleware express for fast dev .

screen demo

express live reloading watch only files call with your view file for best performances

re start server is listen with live-reload.js for auto reload your view

Installation

npm install express-live-reloading --save-dev

yarn add express-live-realoading --dev

server.js

const 
    exp = require('express')
    ,app = exp()
    ,server = require('http').Server( app )
    ,liveReload = require('express-live-reloading')( server )
;
 
liveReload.static( 'public' ) ;
 
liveReload.toolbar( true ) ; // active toolbar status live reload
 
app
    .use( exp.static( 'public' ) )
    .use( liveReload )
;
 
app.get('/' , (req,res) => {
 
    res
        .liveReload( './views/index.html' )
        .sendFile( __dirname + '\\views\\index.html' )
    ;
 
} ) ;
 
 
server.listen( 80 , () => console.log("server run ...") ) ;
 

index.html

<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Super Document</title>
 
        <!-- css status toolbar -->
        <link rel="stylesheet" href="/toolbar-live-reload.css">
 
        <link rel="stylesheet" href="/index.css">
    </head>
 
    <body>
 
        <main>
 
            <h1>Ullamco Lorem eiusmod deserunt elit aliquip ut reprehenderit.</h1>
 
        </main>
 
        <!-- socket.io TCP/IP client script  -->
        <script src="/socket.io/socket.io.js" ></script> 
 
        <!-- live reloading app client script -->
        <script src="/live-reload.js"></script> 
 
    </body>
</html>

output index.html

"[live reload] on"
"index.html --watched with success"
"index.css --watched with success"

with an virtual static directory

server.js

const 
    exp = require('express')
    ,app = exp()
    ,server = require('http').Server( app )
    ,liveReload = require('express-live-reloading')( server )
;
 
liveReload.static(
    '/assets', // virtual directory for you URL
    'public' // phisycal directory in you computer
) ;
 
app
    .use(
        '/assets' , // virtual directory for you URL
        exp.static( 'public' ) // phisycal directory in you computer
    )
    .use( liveReload )
;
 
app.get('/' , (req,res) => {
 
    const render = __dirname + '\\index.html' ;
 
    res
        .liveReload( './views/index.html' )
        .sendFile( __dirname + '\\views\\index.html' )
    ;
 
} ) ;
 
server.listen( 80 , () => console.log("server run ...") ) ;
 

you can define an views directory with

const 
    exp = require('express')
    ,app = exp()
    ,server = require('http').Server( app )
    ,liveReload = require('express-live-reloading')( server )
;
 
liveReload.static(
    '/assets', // virtual directory for you URL
    'public' // phisycal directory in you computer
) ;
 
 
// define directory of views render
liveReload.views('./views') ;
 
// ... ,

the render file is auto search in root/views

// , ...
 
liveReload.views('./views') ;
 
app.get('/' , (req,res) => {
 
    const render = __dirname + '\\index.html' ;
 
    res
        .liveReload( './index.html' ) // because views directory is define
        .sendFile( __dirname + '\\views\\index.html' )
    ;
 
} ) ;
 
// ... ,

the toolbar default values is false

// , ...
 
liveReload.toolbar( /* boolean default false */ true ) ; // active skeleton toolbar
 
// , ...
 
<!-- css toolbar dist from middleware live reload -->
<link rel="stylesheet" href="/toolbar-live-reload.css">

develop by Samuel Gaborieau with ❤️ and Nodejs for open source and enjoy

/express-live-reloading/

    Package Sidebar

    Install

    npm i express-live-reloading

    Repository

    github.com/Orivoir/express-live-reloading

    Homepage

    https://github.com/Orivoir/express-live-reloading

    Weekly Downloads

    29

    Version

    1.0.1

    License

    BSD-2-Clause

    Unpacked Size

    239 kB

    Total Files

    54

    Last publish

    Collaborators

    • orivoir21
    Try on RunKit
    Report malware