Kirby + Gulp + Browsersync + Sass

I have the same issue with Prepros and its Livesync feature.

Another “solution” would be to use an incognito window for the panel. That has worked for me and I think it’s better than having two browsers open. :slight_smile:

1 Like

Prepros’ built-in browsersync hates Kirby on my system! It’s still useful for doing what it’s supposed to do though :slight_smile:

To be honest, BrowserSync, LiveReload and similar features in desktop tools (Prepros, CodeKit) mostly like static HTML pages. If your HTML page doesn’t exist on the filesystem but is generated by PHP, a templating system etc., you will probably have to use proxying (as shown in some of the examples above with BrowserSync). You would have the same issue with any CMS or even with a custom PHP script that just does a couple includes.

What I tend to do when using BrowserSync is:

  • ignore HTML/PHP/template changes, it’s way too much hassle setting it up and having incessant page refreshes;
  • only set it up to refresh static resources (compiled CSS and JS, images);
  • use proxying (you still have to do that).

You get live reloading of CSS, which is nice, but for content and template changes I just refresh the page manually. I find that live feedback is less interesting for that use case anyway.

Yep, it’s great when you’re designing your html template prior to integration with Kirby.

Hello. Just wanted to add my Kirby dev kit to this thread. This is very new. I’m sure it could use some improvement. I tried to set something up I could quickly clone, run npm install, and start local design / dev on a site. I’m a bit new with Gulp, so I know my gulpfile needs some touch-up. Still trying to perfect it, for this project.

FYI, it has two CSS frameworks built in, ready to use. One is mine, the other is Tachyons. They’re both just options, don’t have to be used at all.

https://github.com/elmnt/kirby-starter

1 Like

Hello. I like to serve my local kirby dev environment via gulp-connect-php.
Therefore i use a similar setup like @krisa above.
I like to connect via my local IP, so i can connect also from mobile devices via WLAN.

gulp.task('connect-sync', function() {
connect.server({ base:'./src'}, function (){
	browserSync({
		//proxy: 'localhost:8000',
        // with localhost all pagelinks and css/js-locations routes to 127.0.0.1 and so do not work for mobile dev via wlan
		proxy: '127.0.0.1:8000',
		open: false
	});
});
   gulp.watch('**/*.php').on('change', function () {
      browserSync.reload();
   });
   gulp.watch('**/*.txt').on('change', function () {
      browserSync.reload();
  });
});

So far so good: All links are working. BrowserSync-Reload works also, if i edit a template or a content.txt by my IDE.
Unfortunately i get an unexpected error when i connect to the panel by the local wlan-ip (192.x.x.x/panel) and try to edit and save a content:

XMLHttpRequest cannot load http://127.0.0.1:8000/panel/pages/home/edit. Redirect from 'http://127.0.0.1:8000/panel/pages/home/edit' to 'http://127.0.0.1:8000/panel/login' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.49:3000' is therefore not allowed access.

If i connect the panel from the dev-maschine to localhost (127.0.0.1/panel) it works,
but i would also be able to edit the content from the local wlan-ip (192.x.x.x/panel).

Is this possible?
I tried several cors-related settings in config.php and gulp, but i can’t get it to work.
What should be the right header-settings in the config.php or maybe in gulp / .htaccess?
Does anyone have a solution for that?

Tnx!

1 Like

This is a server configuration issue, so you should do it in your server config file or in the .htaccess, I think.

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://example.com"
</IfModule>
1 Like

Tnx @texnixe
I tried several settings in .htaccess
Header set Access-Control-Allow-Origin "http://127.0.0.1:8000"
Header set Access-Control-Allow-Origin "http://192.168.2.49:3000"
or both and some other settings.
unfortunately that does not work…

in general i discovered, that if i connect to the panel by wlan 192.x.x.x:3000/panel a lot of the links are not relative to this ip, instead they routes to 127.0.0.1 and the panel on this ip is logically not available on mobile devices

for example:
if i connect to wlan-ip/panel and click for some pages, the overview-button in the top bar routes always to 127.0.0.1. also do other links.
also strange: if i click for the home (http://192.x.x.x:3000/panel/pages/home/edit) the home settings are shown. if i use the browser-back to the overview, all page-links routes to 127.0.0.1 after that.

thus my setup to get the panel by mobile devices via wlan wont work anyway and i stop looking for this further.

Nevertheless, its a cool feature to use the panel at 127.0.0.1 on the dev-maschine and have browsersync in the frontend

maybe anyone knows how to have relative links in the panel?