Browser-sync keeps timing out


#1

Hello,

I just have a simple html/css/javascript page I’m developing.

I followed this guide;

https://c9.io/blog/browsersync-gulp-js-cloud9/

and here is my code;

gulp.task('serve', ['styles'],  function() {

    browserSync.init({
        port: 8082
    });
    gulp.watch("dist/*.js").on('change', browserSync.reload);
    gulp.watch("dev/javascript/custom/**/*.js").on('change', browserSync.reload);
    gulp.watch("dev/**/*.css", ['styles']).on('change', browserSync.reload);
    gulp.watch("*.html").on('change', browserSync.reload);

    });

and of course I’m putting the following in my script;

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:8082/browser-sync/browser-sync-    client.2.12.12.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

First thing that happens is the console throws an Mixed Content error. So I change the script tag in the body to https which then causes the connection to browser-sync to time out. I’ve tried changing the URL of the live preview in the browser to http, but chrome automatically reloads it to https.

Hope the issue is clear, let me know if you need any more info,

Thanks!

(Oh I did see there was another support request for this issue when googling, but there wasn’t a conclusive answer to the problem there)


Picture of gulp serve;


#2

still having trouble with this - if anyone has any ideas.


#3

Since the Cloud9 preview pane only supports HTTPS, maybe you can try with HTTP on a separate tab and see if that fares better?


#4

Hi,

I think this may be progress, however it is now saying the service is unavailable. If you know a fix for that?

Thanks for the help so far!


#5

Hi, I’ve been trying since last week using the same guide and I’m having the same issues. I’ve been taking a look through the BrowserSync API - you can pass

https: true

as an option. This fixes the mixed loading content console log error messages but instead is now throwing me a 503 service unavailable when trying to request the file.


#6

Hi,

I’ve passed that argument into my gulpfile, but I’m also getting the same error.

I’ll keep you updated to if I can figure something out.


#7

Thanks Alex, same here.

I pulled the same project into localhost and the only change that I made was switching browsersync back to http as a quick test - it launched up straight away so this definitely appears to be a configuration issue to do with https.


#8

Hey C9 guys,

I’m just wondering if there is any update on this or if you can give any pointers on how we might be able to get this working over https with C9.

I have just built a new WordPress starter framework which uses gulp, less, browsersync and a bunch of node modules. It is working great in my local environment but just can’t seem to get around these issues mentioned above in C9.

Is it a port issue, can you open up multiple ports over SSL or is it just not possible due to invalidating security?

Thanks,
Richard