Fractal: Browsersync double reload

[allmarkedup]

Double reload occurs when changing an asset file within the components directory that also gets compiled into the public directory. Need a way of filtering out files types to prevent this happening.

[emolr]

For others who can't seem to get this option working.

The double reload occurs when files referenced as public using the fractal.web.set('static.path', path.join(__dirname, 'dist')); is used within templates and a build tool like webpack updated the dist folder.

To prevent this, ignore the auto generated files all together :)

this snippet works for me in fractal.js:

fractal.web.set('server.syncOptions', {
    watchOptions: {
        ignored: path.resolve('dist/**/*'),
    },
});

It's important to add the **/* to dist, and to use path.resolve.

It's a bit mysterious to me why anymatch (used for matching) doesn't match on just dist without path resolve, but i guess it's the context the program is running from :)

[emolr]

@allmarkedup

Do you think it would be a good idea to add Path.resolve to the server.js ignore function like this:

const ignored = bsConfig.watchOptions.ignored ? anymatch(Path.resolve(bsConfig.watchOptions.ignored)) : () => false;

It should be backward compatible for those who already used path.resolve :)

[julmot]

Still need this.

[sidouglas]

I have spent the weekend ( nearly all of it ) figuring this out (and bunch of other requirements). I have made a little quick start project that extends the one that is generated by fractal-cli.
Check the fractaServer/browserSync.js file
https://github.com/sidouglas/fractal-quickstart

[julmot]

I found out that anymatch – that is being used to compare the passed ignore paths by Fractal – doesn't seem to be able to compare a path with Windows backslashes with a Unix path correctly. Thus, I had to use slash to convert the path before passing it to Fractal:

const slash = require('slash');

  fractal.web.set('server.syncOptions', {
    watchOptions: {
      ignored: [
        slash(path.join(__dirname, '../src/**/*.scss')),
        slash(path.join(__dirname, '../src/**/*.js')),
      ]
    }
  });