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

Browser not refreshing #53

Open
basickarl opened this issue Oct 26, 2018 · 2 comments
Open

Browser not refreshing #53

basickarl opened this issue Oct 26, 2018 · 2 comments

Comments

@basickarl
Copy link

basickarl commented Oct 26, 2018

  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.
  1. I direct the browser to http://127.0.0.1:8080, the page loads.
  2. 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
  1. Browser does not do a refresh/update it's contents.
  2. 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
Copy link
Author

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
Copy link
Author

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.

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

1 participant