Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling custom code every time a change happens #340

Open
b3008 opened this issue Jan 19, 2020 · 3 comments
Open

Calling custom code every time a change happens #340

b3008 opened this issue Jan 19, 2020 · 3 comments

Comments

@b3008
Copy link

b3008 commented Jan 19, 2020

Issue description

At every change detected, I wanted to add a build step before issuing a reload. I thought the way to do this would be to place the code that in the middleware functions array, but the code never executes.

Software details

I ended up adding a callback function for the change message on liveServer.watcher, like so:

var liveServer = require("live-server");
var childProcess = require('child_process');

var params = {
    port: 8080, // Set the server port. Defaults to 8080.
    host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
    // root: "/public", // Set root directory that's being served. Defaults to cwd.
    open: false, // When false, it won't load your browser by default.
    ignore: '/dist/', // comma-separated string for paths to ignore
    file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
    wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
    mount: [['/components', './node_modules']], // Mount a directory to a route.
    logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
    middleware: [function(req, res, next) { 

        //code here does not seem to execute
        
        next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
};

liveServer.start(params);
liveServer.watcher.on('change', function(e){
    if(e.indexOf('/dist/')==-1){
        console.log('executing: npm run build');
        childProcess.execSync(`cd ${__dirname}; npm run build`);
        
    }
})

My question is, is there a better way to do this? Is this what middleware is actually for?

  • Command line used for launching live-server:
  • OS: macOS Catalina
  • Node.js version: 12.7.0
  • live-server version: 1.2.1
@felippe-regazio
Copy link

There is an opened PR for that request: #366

@hilmanski
Copy link

facing same issue @b3008
Do you know how to run code or script first, then reload?

@skyflyer
Copy link

I am serving files from dist, so I'm mounting / to ./dist and want to ignore the changes happening in dist folder, obviously. The mount points are added to the watcher if watch directories are not specified explicitly.

In other words, my code is in src folder, the generated outputs in dist folder and this configuration works wonders 😄:

var liveServer = require("live-server");
var childProcess = require('child_process');

var params = {
    mount: [['/', './dist']], // Mount a directory to a route.
    // logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
    watch: ['./src']
};

liveServer.start(params);
liveServer.watcher.on('change', function(e){
    console.log('Building...');
    childProcess.execSync(`npm run build:css && cp ./src/*.html ./dist`);
})

Hope it helps someone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants