Browsersync and MAMP PRO 4

sage
1

Hi there, I’ve been running all my Wordpress websites locally with MAMP PRO 3. This used to work like a charm but after upgrading to MAMP PRO 4 I have a problem with the ‘watch’ task (Browsersync). For some reason the URL’s in my source code are not injected:

For example:
MAMP 3
Host - source code → o.domain.com
Browsersync - source code → localhost:3000

MAMP 4
Host - source code → o.domain.com
Browsersync - source code → o.domain.com

Because of this the reload process is not working and when I click a link i’m being redirected to the normal URL so the watch ‘task’ will stop working. I hope someone can help me fix this very annoying problem.

2

Hey @Marcelaerts,

I had the same issue. It was in a custom Gulpfile (non-sage), but was able to find a fix for it. All I had to do was specify a different port on the Browsersync instance. I opted for 8181.

Documentation: (https://www.browsersync.io/docs/options/#option-port)

Example of my Gulp watch task:

gulp.task("watch", ["scripts", "styles"], () => {
	// Serve files from this project"s virtual host that has been configured with the server rendering this site
	browserSync.init({
		files: [
			{
				options: {
					ignored: ".*",
				},
			},
		],
		port: 8181,
		proxy: http://myproject.dev, // MAMP vhost
		reloadOnRestart: true,
	});

	gulp.watch(["source/scripts/**"], ["scripts"]);
	gulp.watch(["source/styles/**"], ["styles"]);
	gulp.watch(["public/**"]).on("change", browserSync.reload);
});