Hey Ben, It was more of a hack but worked but i was told the settings should be added to assets/config.json
I tried (didn’t work) but not sure of the format / array location it should be in. I just want to use sage 9 as intended and not hack and blunder my way through.
This must already of been thought of as configuring packages is obviously important - just no idea how to do it without the grunt / gulp files which means we can’t really test out sage 9.
this is the config.json
{
"entry": {
"main": [
"./scripts/main.js",
"./styles/main.scss"
],
"customizer": [
"./scripts/customizer.js"
]
},
"watch": [
"templates/**/*.php",
"src/**/*.php"
],
"publicPath": "/wp-content/themes/ampc-sage-9-theme",
"devUrl": "http://ampcdev.jynk.net",
"proxyUrl": "http://localhost:4000",
"cacheBusting": "[name]_[hash:8]"
}What did you try and where did you try it? I ask because your config.json doesn’t have any code in it which would help you.
As far as I understand, config.json is supposed to be where you configure your requirements, so it’s the correct place to specify the behaviour of browsersync.
I don’t have a Sage 9 install any more to test, but as per jmarceli, I believe this would work:
...
"cacheBusting": "[name]_[hash:8]",
"browserSyncOptions": {
open: false
}
}
You might need to play about a bit, and note the comma at the end of the preceding line!
Thanks @thisolivier Tried that and with quote marks too but doesn’t get noticed by npm start.
I also tried editing the files in the assets/build/
I added
line 37: open: false,
to config.js and
line 37: open: this.options.open,
to webpack.plugin.browsersync.js
This worked but i was told it should be done in assets/config.json and not assets/build/config.js so i’m just trying to figure out the right way to do this.
Without Sage 9, I can’t be much more help. As a point of formatting it’d be really useful to link to the original files in the trellis/roots repo, or your own if you have one- just having line and file references means we have to do the digging to figure out what you actually mean.
One thing I can see is that it looks like you might benefit from pulling the latest version of Sage (at time of writing, QWp6t Fix webpack HMR), assets/build/config.js:37 doesn’t look like the right place any more. I see where you’re coming from in the web pack.plugin.browsersync.js file, but even looking at that file, it should be merging its options with the browserSyncOptions (note the mergeWithConcat method).
Digging a little further into webpack.config.watch.js, you can see it’s exporting the BrowserSyncPlugin constant, which is looking at config.watch, not the root level config which I initially assumed. As such (and I’m sorry I can’t test this for you), I think putting the browserSyncOptions within the watch object should work, but since it’s an object without key matched records, I’m not sure what the format would be. Maybe @ben would know?
thanks and understood ben. I was specifically directed to suing the config.json and leaving everything else alone which makes sense to me.
I thought one of the roots guys would just know the format or anyone else that’s tried to configure installed packages for sage9 as i imagine all package settings will be made there too…
I’ve gone to 8.5 as ran out of time trying out 9 for this job. D.
Oh config.json is definitely the right place! What I said above was that whereas I’d recommended putting the options in the root, it should be in/adjacent to the watch object. I just don’t know how without trying, and I don’t have Sage 9 to try.
Good news- the new commit should fix the issue. See Sage commit #1732
@dpc The original suggestion I posted from @jmarceli should now work. Make sure to mark a solution to this topic if you feel it’s been resolved.
sweet & thanks.
The config.json now affects npm start & borwsersync.
{
"entry": {
"main": ["./scripts/main.js", "./styles/main.scss"],
"customizer": ["./scripts/customizer.js"]
},
"watch": ["templates/**/*.php", "src/**/*.php"],
"publicPath": "/wp-content/themes/ampc-sage-9-theme",
"devUrl": "http://ampcdev.jynk.net",
"proxyUrl": "https://localhost:4000",
"cacheBusting": "[name]_[hash:8]",
"browserSyncOptions": {
"open": false
}
}The above syntax is not working with the Sage 9.0.0-alpha.4…
yarn run start states:
$ webpack --hide-modules --watch --config assets/build/webpack.config.js
which loads assets/build/webpack.config.watch.js
which loads assets/build/config.js
which loads assets/config.json
But it’s not picking up the additional BrowserSync options?
I’m struggling with this in Sage 9.0.0-beta.2 as well. I’m using Google Chrome as my development browser and Safari for regular use, but setting the browser flag in webpack.config.watch.js doesn’t appear to do anything:
new BrowserSyncPlugin({
target: config.devUrl,
proxyUrl: config.proxyUrl,
watch: config.watch,
delay: 500,
browser: ["google chrome"]
}),
Is there perhaps another way?
I can’t seem to get this working either in the beta.1 or beta.2 versions
Where did browser come from? That’s not a thing
Specifically what are you trying? Show us code, and errors, if any.
I’d like the watch process to open Google Chrome, instead of the system default browser.
browser is listed in the BrowserSync documentation. Adding it to either config.json or webpack.config.watch.js doesn’t throw any errors, the watch process just opens the default browser.
I also tried to update my config.json in the assets directory with the following:
{
"entry": {
"main": [
"./scripts/main.js",
"./styles/main.scss"
],
"customizer": [
"./scripts/customizer.js"
]
},
"watch": [
"templates/**/*.php",
"src/**/*.php"
],
"publicPath": "/app/themes/sage-timber",
"devUrl": "http://onnodigeovaties.dev",
"proxyUrl": "http://localhost:3000",
"cacheBusting": "[name]_[hash:8]",
"browserSyncOptions": {
"browser": "google chrome"
},
"browsers": [
"last 2 versions",
"android 4",
"opera 12"
]
}
In Sage 8 I always modify the Gulp watch task to load Chrome by default, so I was expecting Webpack to accept the same parameters. The BrowserSync init in my gulpfile generally looks like this:
browserSync.init({
files: ['{lib,templates}/**/*.php', '*.php', '{lib,templates}/**/*.twig', '*.twig'],
proxy: config.devUrl,
browser: 'google chrome',
snippetOptions: {
whitelist: ['/wp-admin/admin-ajax.php'],
blacklist: ['/wp-admin/**']
}
});T[quote=“ben, post:15, topic:7808”]
That’s not a thing
[/quote]
It’s a BrowserSync option.
I tried @mensch snippet:
new BrowserSyncPlugin({
target: config.devUrl,
proxyUrl: config.proxyUrl,
watch: config.watch,
delay: 500,
browser: ["google chrome"]
}),
Previously, this worked in config.json:
{
"entry": {
"main": ["./scripts/main.js", "./styles/main.scss"],
"customizer": ["./scripts/customizer.js"]
},
"watch": ["templates/**/*.php", "src/**/*.php"],
"publicPath": "/wp-content/themes/ampc-sage-9-theme",
"devUrl": "http://ampcdev.jynk.net",
"proxyUrl": "https://localhost:4000",
"cacheBusting": "[name]_[hash:8]",
"browserSyncOptions": {
browser: ["google chrome"]
}
}
Also, adding .twig files to the watch option, unfortunately doesn’t work anymore with this BrowserSync config:
"watch": [
"templates/**/*.php",
"views/**/*.twig",
"src/**/*.php"
],
BrowserSyncWebpackPlugin is from the browsersync-webpack-plugin plugin by @QWp6t. browser is not an option you can pass it directly.
You can pass settings to advanced for custom configs
Thanks Ben! I modified the BrowserSync portion in webpack.config.js to the following and the default browser setting is overriden correctly:
new BrowserSyncPlugin({
target: config.devUrl,
proxyUrl: config.proxyUrl,
watch: config.watch,
delay: 500,
advanced: {
browserSync: {
browser: ["google chrome"]
}
},
}),Thanks a lot @mensch! I’ve been trying to fix this browserSync window spawning for quite some time.
Changing the webpack.config.watch.js file accordingly seems to fix it.
Was actually hoping this could be set in the config.json file. I try not to tamper with the assets/build files.
new BrowserSyncPlugin({
target: config.devUrl,
proxyUrl: config.proxyUrl,
watch: config.watch,
delay: 500,
advanced: {
browserSync: {
open: false,
},
},
}),
Thank you very much !
The “advanced” option finally made my BrowserSync work on a VPS. I have a custom Dockerfile that runs code-server, NGINX, PHP, and Bedrock. 