Local dev with MAMP & BrowserSync

Not sure what’s causing this, but when I fire up my server, with Gulp, I’m watching my local site at localhost:3000

I’m using MAMP, with a proxy setting in my gulpfile.js

gulp.task('serve', function() {

    browserSync.init({
        proxy: 'client.dev:8888',
        notify: false
    });

    // And some gulp.watch tasks here

});

Frequently, when I navigate through the site, the URL will go from localhost:3000 (Gulp server) to client.dev:8888 (MAMP server).

Any idea why this is happening? Why is it jumping from the Gulp server to the MAMP server? I don’t know if I’m even asking that correctly, but hopefully it’s obvious what’s happening…

I think this is due to the way that Kirby determines its own host name. When generating fully qualified URLs, Kirby uses that the hostname it determined to be the “right” one and when proxying (like with browser sync), then that hostname tends to be the one that is actually “making the calls” - client.dev:8888 in your example.

I haven’t checked thoroughly, but there is probably a way to tell Kirby which hostname it should use through the configuration.

You could try to set the base URL in your config.php: https://getkirby.com/docs/cheatsheet/options/url

If you var_dump($_SERVER); you should probably see which server information is using which domain, when accessed directly and through the BrowserSync proxy.

When setting the base URL as suggested by @texnixe, I think you can set it to / so that URLs look like /my/page instead of http://domain.tld/my/page.

c::set('url', '/');

PS: you should probably change your topic’s name to “Local dev with MAMP & BrowserSync”, since Gulp is just a basic task runner and your issue is with proxying specifically.

2 Likes

Thanks for the tip @fvsch - That seems to work quite nicely for local development with browser-sync :slight_smile:

Thanks for the input. Sorry for the late reply, just back to work today after the holiday!

Could this be elaborated a bit further I’m having a similar problem. How do I var_dump($_SERVER);?

In the template for the page you’re testing, use:

<?php var_dump($_SERVER); ?>