BrowserSync with https not working

sage
1

I’m using trellis, bedrock and sage. started gulp watch and https://localhost:3000 is loading infinitely.
BrowserSync is proxying https://local.mydomain.com

gulp.task('watch', function() {
  browserSync.init({
    files: ['{lib,templates}/**/*.php', '*.php'],
    proxy: config.devUrl,
    https: true,
    browser: 'google chrome',
    snippetOptions: {
      whitelist: ['/wp-admin/admin-ajax.php'],
      blacklist: ['/wp-admin/**']
    }
  });
  gulp.watch([path.source + 'styles/**/*'], ['styles']);
  gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
  gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
  gulp.watch([path.source + 'images/**/*'], ['images']);
  gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
});
2

https://local.mydomain.com is working just fine

3

If there is a way with snippetmode - i’d be even happier =) so I can directly use https://local.mydomain.com

4

I guess I can run gulp watch from my OSX Terminal and not inside the bedrock vagrant box, right?

5

Correct. gulp shouldn’t be ran from your Trellis Vagrant box, it should be ran on your host machine.

6

The Problem is that it’s not working with https/SSL

7

Is there a particular reason you’re using SSL for your dev environment? Seems like a lot of unnecessary overhead and security which is not necessary. I would think you’d just want SSL for your production environment since that’s public facing…

8

Hi @romero2k
yes there is a reason :smile:
I’m auth with a plugin again a provider that requires me to have SSL and a specific domain - in my case https://local.thedomain.com

Without SSL it works fine

So any help appreciated :smile:

9

I just spun up a Trellis server with a self-signed SSL cert and it’s working fine.

Did you make sure to update the BrowserSync dev URL in the manifest.json file?

https://github.com/roots/sage/blob/master/assets/manifest.json#L28

10

Hi @ben

thanks for your reply =)
So what I was doing with the holy trinity of Sage, Bedrock and Trellis was.

Only the changes are reflected here.
Trellis
/ansible/group_vars/all

hhvm: true

/ansible/group_vars/development

mysql_root_password: thePw_;
mailhog_install_ssmtp: no

web_user: vagrant

wordpress_sites:
  sagemarketplace:
	site_hosts:
	  - local.matrix42.com
	local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)

	site_install: true

	multisite:
	  enabled: true
	  subdomains: false
	ssl:
	  enabled: true

	env:
	  wp_home: https://local.matrix42.com
	  wp_siteurl: https://local.matrix42.com/wp
	  wp_env: development

	  domain_current_site: local.matrix42.com

xdebug_install: true

/site/wev/app/themes/sage/gulpfile.js

browserSync.use(require("bs-snippet-injector"), {
	file: "base.php"
});

gulp.task('watch', function() {
	browserSync.init({
		files: ['{lib,templates}/**/*.php', '*.php'],
		open: 'ui',
                https: true,
		browser: 'google chrome',
		snippetOptions: {
			whitelist: ['/wp-admin/admin-ajax.php'],
			blacklist: ['/wp-admin/**']
		}
	});
	gulp.watch([path.source + 'styles/**/*'], ['styles']);
	gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
	gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
	gulp.watch([path.source + 'images/**/*'], ['images']);
	gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
});

I didn’t change anything in the Vagrantfile

11

So then you didn’t modify the file I linked? You need to follow these instructions regardless of HTTPS: https://github.com/roots/sage#using-browsersync

You didn’t need to make any change to gulpfile.js. All you need to do is update assets/manifest.json to the correct URL (see my previous post).

12

Hi…sorry =D
I did change the manifest.json to

"devUrl": "https://local.matrix42.com"

was this the right way to do?

I only changed the gulpfile because I need BrowserSync to use https://local.matrix42.com instead of https://localhost:3000

browserSync.use(require("bs-snippet-injector"), {
file: "base.php"
});

This just inserts the necessary BrowserSync snippet right before the which actually works really good without using https/SSL.
But also the standard gulpfile.js config doesn’t work with https/SSL

13

Works fine over here like I said, can’t reproduce.