search

patrick-steele-idem / browser-refresh

Node.js module to enable server restart and browser refresh in response to file modifications
110 stars 18 forks source link

Browser not refreshing #53

Open basickarl opened 5 years ago

basickarl commented 5 years ago

1) I start the server:

> NODE_PATH="$(pwd)" NODE_ENV=development ./node_modules/.bin/browser-refresh --inspect ./application/index.js

[browser-refresh] Watching: /Users/km/dev/pcap-reader/web
[browser-refresh] Ignore rule: node_modules/
[browser-refresh] Ignore rule: static/
[browser-refresh] Ignore rule: .cache/
[browser-refresh] Ignore rule: .*
[browser-refresh] Ignore rule: *.marko.js
[browser-refresh] Ignore rule: *.dust.js
[browser-refresh] Ignore rule: *.coffee.js
[browser-refresh] App started (pid: 28070)
Debugger listening on ws://127.0.0.1:9229/26b8489b-3d11-4697-a8fa-360a9e892eae
For help see https://nodejs.org/en/docs/inspector
Application starting
Application listening to port: 8080
process online sent
[browser-refresh] Server is ready. Watching files for changes.

2) I direct the browser to http://127.0.0.1:8080, the page loads. 3) I update code in my marko file:

[browser-refresh] File has been changed: application/frontend/components/smart/counter/counter.marko
[browser-refresh] Special reload: /application/frontend/components/smart/counter/counter.marko
[lasso] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso/browser-refresh] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[marko/hot-reload] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[browser-refresh] Triggering refresh of client pages...
[browser-refresh] Refresh triggered

4) Browser does not do a refresh/update it's contents. 5) I do a manual refresh of the page in the browser: [marko/hot-reload] Template successfully reloaded: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko.js

I don't see what I'm doing wrong.

index.html:

<!doctype html>
<html>
    <head>
    <title>webz</title>
        <!-- CSS will be inserted here -->
        <lasso-head/>
    </head>
    <body>
        <!-- Top-level UI component: -->
        <app/>
        <!-- JS will be inserted here -->
        <lasso-body/>
        <!-- Used for the browser-refresh library -->
        <browser-refresh/>
    </body>
</html>

server.js:

console.log('Application starting');

const Koa = require('koa');
const Router = require('koa-router');

// Used for special reloading
require('lasso/browser-refresh').enable('*.marko *.css *.less *.styl *.scss *.sass *.png *.jpeg *.jpg *.gif *.webp *.svg');

// lasso configuration
require('lasso').configure({
    plugins: [
        'lasso-marko',
        'lasso-sass',
    ],
});

const application = new Koa();
const router = new Router();

const template = require('marko').load(require.resolve('./frontend/components/smart/counter/counter.marko'));

router.get('/', (ctx, next) => {
    ctx.type = 'html';
    ctx.body = template.stream({});
});

application
    .use(router.routes())
    .use(router.allowedMethods());

const httpPortNumber = 8080;

// Start the server and listen to the specific port
application.listen(httpPortNumber, (error) => {
    if (error) {
        console.error(error);
        process.exit(1);
    }
    console.log(`Application listening to port: ${httpPortNumber}`);

    // Just in development mode
    if (process.env.NODE_ENV === 'development') {
        // For browser-refresh
        if (process.send) {
            process.send('online');
            console.log('process online sent');
        }
    }
});

package.json:

{
  "name": "web",
  "description": "Web",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "test": "NODE_PATH=\"$(pwd)\" NODE_ENV=test ./node_modules/.bin/nyc --reporter=html --reporter=text ./node_modules/.bin/mocha ./test/ --exit",
    "prod": "NODE_PATH=\"$(pwd)\" NODE_ENV=production node ./application/index.js",
    "dev": "NODE_PATH=\"$(pwd)\" NODE_ENV=development ./node_modules/.bin/browser-refresh --inspect ./application/index.js",
    "count": "./node_modules/.bin/cloc . --exclude-list-file=./.clocignore",
    "lint": "./node_modules/.bin/eslint .",
    "report": "./node_modules/.bin/nyc report"
  },
  "author": "Karl Morrison",
  "license": "ISC",
  "dependencies": {
    "@lasso/marko-taglib": "^1.0.12",
    "browser-refresh-taglib": "^1.1.0",
    "koa": "^2.6.1",
    "koa-router": "^7.4.0",
    "lasso": "^3.2.6",
    "lasso-marko": "^2.4.6",
    "lasso-sass": "^3.0.0",
    "marko": "^4.13.8",
    "node-sass": "^4.9.4",
    "socket.io": "^2.1.1",
    "socket.io-client": "^2.1.1"
  },
  "devDependencies": {
    "browser-refresh": "^1.7.3",
    "cloc": "^2.3.4",
    "eslint": "^5.7.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.14.0",
    "mocha": "^5.2.0",
    "nyc": "^13.1.0",
    "selenium-standalone": "^6.15.3",
    "webdriverio": "^4.14.0",
    "webpack-cli": "^3.1.2"
  }
}
basickarl commented 5 years ago

Also when I update the marko file again the following happens:

[browser-refresh] File has been changed: application/frontend/components/smart/counter/counter.marko
[browser-refresh] Special reload: /application/frontend/components/smart/counter/counter.marko
[lasso] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso/browser-refresh] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[marko/hot-reload] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[browser-refresh] Triggering refresh of client pages...
[lasso] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso/browser-refresh] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[marko/hot-reload] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso/browser-refresh] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[marko/hot-reload] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso/browser-refresh] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[marko/hot-reload] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso/browser-refresh] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[marko/hot-reload] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[lasso/browser-refresh] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[marko/hot-reload] File modified: /Users/km/dev/pcap-reader/web/application/frontend/components/smart/counter/counter.marko
[browser-refresh] Triggering refresh of client pages...
[browser-refresh] Refresh triggered
[browser-refresh] Refresh triggered

Multiple logs stating the same thing? Also it doesn't refresh the browser.

basickarl commented 5 years ago

Ok I've noticed now that browser-refresh has no checking to see how many browser-refresh websocket connections there are to the browser (which is bad imo). So it resulted in 4 browser-refresh connections to the browser. There should be checking implemented in the code or at least warnings stating that there are duplicate browser-refresh tags in the users code.