How to get Browsersync working with c9 in Shopify Slate's configuration?

browsersync
nodejs
gulp

#1

Hi, So I’m working with Shopify Slate which is basically a default base template for Shopify stores. It offers livereload via Browsersync. slate watch is the command that starts the livereload function. When I run slate watch I see

but none of those Access URLs produce a working livereload. I always get a message like this

This site can’t be reached

172.17.0.103 took too long to respond.
Search Google for 172 103 3001
ERR_CONNECTION_TIMED_OUT

I’m thinking this is happening probably because the port isn’t set to 8081 or 8082 (which are the ports used for such things as livereloading AFAIK). I brought this issue up at as a Shopify/slate Github issue here and was told to change the options that Slate passes into Browsersync in the [deploy-sync.js file, specifically in the browserSync.init() method] but I got totally lost as I’m not very experienced with backend-ish code.

Any help is appreciated and I also asked this on Stackoverflow so you could answer it over here https://stackoverflow.com/questions/46436494/how-does-one-change-the-browsersync-port-value-in-shopifys-slate-deploy-sync-js


#2

Try specifying your local host configuration to point to 0.0.0.0:8080 (these are also set to $IP and $PORT). Ports 8081 and 8082 both will function as well, but you need to make sure your server is using 0.0.0.0


#3

Thanks for the suggestion but what file(s) would I specify my localhost config to point to 0.0.0.0:8080?

Also, what is the exact URL I want to have to preview my application/site?

https://localhost:8080/?preview_theme_id=200440203
or
https://localhost:0.0.0.0:8080/?preview_theme_id=200440203
or
https://localhost/?preview_theme_id=200440203

Thanks @bryceito :slight_smile:


#4

While I’m not sure about where to configure the port and IP, once you do, you can preview your site at https://workspacename-username.c9users.io/.