Ignore admin panel when using browser sync causes error

Kirby 3 Questions 🤔
1

I user browser sync for live reloading and css injection with kirby. Everything works fine, but when I try to ignore the admin panel, so that all panel pages won’t reload if I change a file, I get a weird behaviour. Although the panel shouldn’t reload, it reloads and and redirects to the login page and this error occurs (it seems that api/system?view=panel is not found).

Screen Shot 2020-08-10 at 17.10.39
Screen Shot 2020-08-10 at 17.10.39801×507 55.2 KB

Without the ignorePaths: 'panel/**' setting everything in the panel works fine.
This are my browser sync options (used together with a valet dev server)

{
  proxy: 'my-project.test',
  snippetOptions: {
    ignorePaths: 'panel/**',
  },
  files: [
    'assets/**/*.js',
    'assets/**/*.css',
    'site/templates/**/*.php',
    'site/snippets/**/*.php',
  ]
}
2

Just a guess: Try and disable content locking: https://getkirby.com/docs/reference/system/options/content#content-locking

3

I do it by loading the front end via the browser sync localhost:3000 URL, and on another browser tab i open the panel via ‘my-project.test/panel’. This gets round the panel reload.

4

I disabled content locking, the behaviour is the same but the error messages changed to NetworkError when attempting to fetch resource.

5

It would be great if everything works under one server (it might be confusing using the preview link from the panel and than having a front end page open with the wrong server), but your solution looks like a good workaround for now!

6

But they are infact the same server. Browserync is just proxying the “my-project.test” local domain so that it can inject its javascript into the page. Thats why you dont get the reload on it.

Another thing you can do is use the Vivaldi browser which lets you do split screen tabs - you can have the panel in the left side and the front end on the right.

This way you can have both open at the same time without having to flick between browser tabs.

7

Thanks for the infos! You’re right, it is the same server. But still I find it not very elegant to use two different hostnames (localhost:3000 and my-project.test) when working on the same website. Ideally it should all work within browsersync’s proxy with the ignorePaths option. What I do now is running browsersync’s proxy with the same hostname as the dev server. So I have my-project.test for the panel and my-project.test:3000 for live reloading pages.