Watching Blade files in Sage 9 Beta 2

blade
sage9

#1

I just merged in the beta2 branch but for some reason my changes to the blade templates are not triggering a reload of the page. Browsersync is properly injecting new CSS and JS. I also tried editing a php file under src/ but it also does not trigger a reload.

Here is my config.json - very little changes from the

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "watch": [
    "templates/**/*.php",
    "src/**/*.php"
  ],
  "publicPath": "/app/themes/wp-theme-base",
  "devUrl": "http://main-site.dev",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "browsers": [
    "last 2 versions",
    "android 4",
    "opera 12"
  ]
}

So this is probably something about my environment or something I messed up in the merge, but figured I would toss it up and see if anyone else has this issue at the moment. I have gone over all files in build/ visually to make sure they match the files in the beta2 branch.


#2

Did you replace the yarn.lock file and re-installed all the dependencies?
The reload is triggered by the "browsersync-webpack-plugin": "^0.4.0" package.
Ensure you have the latest version of it and it should be working!


#3

Well I did have version 0.3.3 (from beta2 tag), but I updated it to what was in master and still no luck. Is there an easy way to debug so I can see what paths or files are being watched?


#4

I experiences the same issue and I solved it by getting the latest versions of browsersync-webpack-plugin and bs-html-injector. Also there were some updates within the build folder that allow browsersync to work properly, in particular the delay option.
If you’re 100% sure all the files are up to date I wouldn’t really know what’s breaking though!


#5

Okay I see. I was strictly working off the beta 2 branch. Once I merged in the changes from master I got it working. Thanks


#6

I’m actually getting the same issue. Tried to add to the delay in BS settings in webpack’s watch config but that didn’t do it either. If anyone else is getting this issue, what did you do to fix it? It’s bugging me a lot haha.


#7

Just to double check - all your packages and versions match the master branch, correct? For me the beta-2 branch did not work, but I merged in all changes from packages.json on master and it worked.


#8

Checked last night and totally exactly the same! I’m going to double-check and try to force a re-install.


#9

Is there any news on this?
I’ve used the latest Sage-9 commits (even the ones after the beta-2) and it still happens the same issue.
Is there any debugging I can do in order to help?


#10

Still same issue, after a few hours of trying to find the reason.

  • Fresh/Clean Sage-9 (from master branch)
  • Deleted node-modules and yarn.lock files.
  • Tried to increase the delay option to up to 2500, no luck.
  • Tried to add .css/.js files to the watch list, they reload effectively the page.

This seems some issue with detecting php file changes?


#11

I just installed a fresh Sage-9 from composer and I am getting Blade/HTML injection. I was able to add HTML (simple h1’s) to page.blade.php, content-page.blade.php and page-header.blade.php and see it injected. Just to be clear - this does not trigger a reload of the page, but the new content is there. What I did notice, is if you write anything that is invalid in blade (e.g. include a non-existant partial), you do not get an error, and you lose injection. Even if you delete the offending line, injection is not restored. You need to reload the page and then injection returns. I could see this being a problem if, for example, you save a file in an “bad” state by accident while working.


#12

I just made another clean install of the theme, using composer (dev-master), 100% fresh and clean again.
Same issues, neither blade nor src/*php files are reloaded.
I’m 100% sure there are no errors on the blade file, I’ve only added a <h1>Test</h1> as you said.
Not sure what’s wrong.


#13

I’m sorry to bump this issue again, but I still can’t reload .php or blade.php files.
BrowserSync works perfectly with js and css, but no php files are triggering a refresh (neither partial nor full).

:confused:


#14

I just submitted a PR if you guys want to test it out.

If you don’t feel like updating everything, then you can implement the changes in this difff.

The rest of the PR updates all of the other dependencies.


#15

Will test today!
Thank you :slight_smile:


#16

Not working :cry:
Could it be related to SSL?


#17

And you updated the two plugins?

It should attempt to inject HTML, and fallback to reloading the page if no changes to HTML are detected. JS and CSS will behave as they always have. Adding, removing, and updating images should also play a bit nicer with webpack now.


#18

I did updated all files according to your pull request, deleted node_modules and ran yarn again.

All assets work perfectly, I’d say a bit smoother than before.

But PHP files and templates are just not triggering anything, nothing on the dev console either.

Anything you’d like me to try?


#19

PHP/HTML injection is now working for me as expected with https://github.com/roots/sage/pull/1862


#20

I honestly do not know what else to try.

I even made a clean install.

I’m on windows, if that matters.