Kirby + Live reload / server?

The CMS Questions
1

Hi there,

I have installed Kirby via Herd.
How do you ensure that editing Kirby files (php,css,js…) in vscode ensures to give a reload in the browser?

Live server + the Firefox or Chrome plugin used to work, but since yesterday… it doesn’t anymore, and I have absolutely no idea why.
It simply stopped working. After a few quick tests it does work with .html files. But I am absolutely positive that via the live server plugin for firefox and chrome it worked…

After a full day of frustration and trial-and-errors I land here, in hope somebody who can guide me…

My best option right now is the vscode extention: Browser Refresh which you need to cmd+r to update the browser from within vscode.
Not ideal, but at least better than manually refresh the page.

2

Most people use BrowserSync for this, which you can add manually or as part of your build system if you have one. For example, using Laravel Mix you set it like this:

mix.browserSync({
  proxy: "http://domain.test",
  files: [
    "public/assets/js/**/*.js",
    "public/assets/css/**/*.css",
    "public/site/templates/*.php",
    "public/site/snippets/**/*.php",
    "public/site/plugins/**/*.php",
    "public/content/**/*.txt",
  ],
  notify: true,
});

This will reload the browser if CSS/JS changes or any of the php templates/ snippets or any of the content txt get changed. You will need to adjust he paths if you structue things differently.

3

If you work on a Mac I would recommend using CodeKit it does a load of other handy things as well.

4

Thank you @jimbobrjames and @Greg

After some cursing and trail-and-error… i got it working via browser-sync.

I have Herd running on mysite.test
I both run scss and tailwind.

In package.json. I have added this line

"scripts": {
    "dev": "npm run watch & browser-sync start --proxy 'https://mysite.test' --files 'assets/css/*.css, assets/js/*.js, site/templates/**/*.php, assets/scss/**/*.scss'",
... etc

"devDependencies": {
    "browser-sync": "^3.0.3",
... etc

opening vscode and running npm run dev now opens the site under localhost: and I see browser-sync connected, so everything works nicely.

I tried to toy around with codekit, but that did not work out for me.

Still… I am baffled why live server + plugin suddenly decided to stop working but hey.
Thanks again for the suggestions.

5

Thats great! I would suggest taking the SCSS watch out of the browsersync file watcher, because those get turned into CSS files which you are also watching. You might get a double reload in the browser with that. Saving the SCSS file will cause a reload and the SCSS to compile to change the CSS file, causing a second reload.

6

Thanks for the suggestion.

I tried that, but I both have .scss and tailwind mixed up (i love certainparts about tailwind— but I still need my scss fix :wink:

So after some experimentation this one works the best for me.

 "dev": "npm-run-all --parallel watch serve",
    "watch": "npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css --content './site/**/*.php' -w",
    "serve": "browser-sync start --proxy 'https://mysite.test' --files 'assets/css/*.css, assets/js/*.js, site/**/*.php, assets/scss/**/*.scss'",
    "build": "npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css --content './site/**/*.php' -m"

Not entirely sure if this can be optimized even further but for now it works!
Thanks once more!