Browsersync on Windows Linux

Browsersync is a tool you can use in your development environment. Write code and see the changes on multiple devices or browsers.

Ubuntu Windows and Browsersync

Note: The original title for this article was, “Install Browsersync on Windows sub-system with a Python Flask set-up”.  However, these instructions will work with most other set-ups.

(I never would have thought that I would ever write an article about using Ubuntu in Windows. Shows how far Microsoft has come.)

Setting up and Installing Steps

Install Node.js

I had trouble initially getting Node.js to work on my Windows Linux sub-system. I have it installed on Windows as Windows.  But installing it in the Linux sub-system (installing Ubuntu 18.04 from the Windows app store).

You will need Node.js globally installed on your operating system if you plan on developing using Browsersync on more than one project.  Gulp and Browser sync, work only in a Node.js environment.

Below are the steps and resources I found useful:

  1. The following GitHub was great with instructions that work for installing Node.js globally in my Windows Linux sub-system. GIST.GITHUB.
  2. Basically, follow the instructions in the GitHub. The author has explained each command, in good detail and the instructions are relatively easy to follow even for beginners.  Note that you will run this from the command line.
  3. I closed and re-opened my Ubuntu terminal window and verified node was installed using:
$ node -v

Install Gulp into your Windows Linux Sub-system

This is easier, just run the below command from your command line.

$sudo npm install --global gulp-cli

If you get errors, the first few instructions on this page can probably help. Upgrade Article

Install Browsersync

You can get additional instructions at the official website: https://browsersync.io/

 $sudo npm install -g browser-sync
This is the output when you type “gulp” in your command line from the folder which has your gulpfile.js. The Local IP address is for your dev computer. The External for other devices. (on your WIFI network).

You can leave this window open, and open another if needed.
This is my set-up, I have another computer I couldn’t get onto the photo. In this way, I can code and test the changes immediately across different devices and different browsers.

If you look closely, you will see the mistakes and errors that need fixing in the tablet and phone versions.

(Please don’t skip using a virtual environment.)

Activate your virtual environment

You can learn about and set-up your Python virtual environment from Real Python. Then go ahead and activate your environment:

$ source bin/activate

Gulpfile.js

The gulpfile.js file will be used to instruct your browsers to reload whenever you save a change, to any of the files you tell it to look at.
Create your gulpfile.js

This GitHub repo was helpful: https://github.com/pebreo/gulp-browsersync-flask/blob/master/gulpfile.js and so was this repo: Jay Wellhorn Article.

Below is the gulpfile.js, that I found worked. You can modify many aspects and add another tooling.  But this should get you started.

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var exec = require('child_process').exec;
// run Flask Server
gulp.task('runserver', function() {
var proc = exec('python application.py')
});
// Watch for files and reload browser
gulp.task('browsersync', function () {
browserSync.init({
open: false,
notify: true,
proxy: "127.0.0.1:8888",
});
});
gulp.task('watch', function() {
gulp.watch(['./openapprentice/*/.{css,html,py,js}'], reload);
});
gulp.task( 'default', ['runserver', 'browsersync', 'watch'] );

Open your ports to allow other devices to use Browsersync

I found that when using the Windows Linux Subsystem, Windows Firewall blocked access to Browsersync and using it with other devices in addition to my main coding computer.

  1. Open your Firewall & network protection
  2. Click on “Advanced Settings”
  3. Click on Inbound Rules to the left, then click New Rule, to the right.
  4. Click on Port, then next, (leave TCP checked) add 3000 to the port you want to open, Allow the connection is fine, then click next, I left Domain, Private and Public checked but you could remove Public and Domain, name it and Finish.
  5. You should now be able to access 192.168.1.10:3000 (you may have a different URL – Browsersync will tell you) from your tablet or mobile and have it using browsersync.

This article helped to debug this: Microsoft Article

Wrapping up

  1. You can now type in the external address: http://192.168.1.10:3000 (or another URL depending on your network) into your browser, and change your files or otherwise use Browser-Sync. I am not sure why the localhost version of the address doesn’t work, but I imagine the Linux Subsystem acts as a “separate” server than Windows and so it makes sense.
  2. Good luck

Categorized in:

Leave a Reply

Your email address will not be published. Required fields are marked *



Let's Work Together