Css File changes not causing the browser to automatically reload

[MelzerC]

I am using Pattern Lab Node v3.0.3 on Mac, with Node v12.10.0, using a Vanilla Edition.

Expected Behavior

Whenever I edit one of my css files I would expect the browser to reload because of the file change (since I explicitly have to configure the path to the css files in the config).

Actual Behavior

Instead nothing happens and I have to manually reload the Browser page to see the changes made in css files.

Steps to Reproduce

Setup a pattern-lab starterkit version (I'm using the one with handlebars) containing some demo patterns and try changing the css files.

To work around I manually fixed those by changing the file:
@pattern-lab/core/src/lib/server.js:57 to add the following code:

patternlab.events.on(events.PATTERNLAB_PATTERN_ASSET_CHANGE, () => {
    if (serverReady) {
        _module.reload({
            file: '',
            action: 'reload',
        });
    }
});

This actually works, but as soon as I update the package my changes are gone. Did I miss anything and there is a better way to reload the browser automatically whenever I change css files?

Thanks for your help!

[johns996]

I'm having the exact same issue using v3.0.3 and Node v11.15.0. You code snipped fixed it in my instance as well. I'll be interested to hear if there is a better way to watch the css that's not currently documented.

[bmuenzenmeyer]

The intent is that those sorts of events are implemented by the user outside of the core code like this example

Back when that was written we weren't getting a lot of feedback, but knew we didnt want to support too much of this logic ourselves, as it gets hairy fast

My hope i that folks can attempt to use the tool as-is and propose changes where it falls down

[bmuenzenmeyer]

(since I explicitly have to configure the path to the css files in the config).

this is a good point

[johns996]

Is there doc anywhere describing how to use the index.js file like the one you linked? Is this the main file referenced by package.json? I tried bringing the file into my PL instance but nothing I do to the file seems to make any difference with how PL runs.

[MelzerC]

The intent is that those sorts of events are implemented by the user outside of the core code like this example

Back when that was written we weren't getting a lot of feedback, but knew we didnt want to support too much of this logic ourselves, as it gets hairy fast

My hope i that folks can attempt to use the tool as-is and propose changes where it falls down

I totally agree with you. There is no need to implement it within patternlab and make things overly complicated. Thats why I'm using the filewatcher my IDE provides to compile the scss files to css.

I had a look at your demo repository but while trying to implement this inside my project I'm not quite sure I'm using the right version. I got very confused about the different versions. What I did to setup the project was:

• run npm create pattern-lab
• choosing edition-node and starterkit-handlebars-demo
  With whatever version that is I end up with, that's where I wanted to implement your example from the demo. But there is no patternlab-node package installed and even after installation I got errors (files in non-existing directories are missing). So I tried to do it myself.

What I did is:

• creating an index.js (as you suggested in your demo) and changed the package.json to run node ./index.js whenever npm run pl:serve is called.
• my index.js looks like this:

const config = require('./patternlab-config.json');
const patternlab = require('@pattern-lab/core');

const pl = patternlab(config);
pl.server.serve(config);

pl.events.on('patternlab-global-change', (data) => {
  console.log(data);
});

This starts a server and serves files, but no changes are watched by the script. Whenever I change a pattern or a css file, I need to rerun the task. There is no watching at all. Do you know what I am missing?

PS: While trying to get this to work I came across the following code in @pattern-lab/core/src/index.js in line 295: refreshCSS: server.refreshCSS,.
Seems like pattern lab is already prepared to refresh the browser when css files are changing. It's propably just not called anywhere.

[bmuenzenmeyer]

I am messing with how this all works as we speak as part of #1066 so will be testing this further as part of that work too. Bug if I am getting quiet

[FrankyS]

The deault patternlab live server config sets ignore to the public folder (server.js 36) and overwritting this in the patternlab-config.json made it work for me:
"serverOptions": { "ignore": "" }

[MelzerC]

The deault patternlab live server config sets ignore to the public folder (server.js 36) and overwritting this in the patternlab-config.json made it work for me:
"serverOptions": { "ignore": "" }

Awesome! Works for me too!

[stale]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[stale]

Issue closed after going stale. It can be re-opened if still relevant.