It’s already very obvious to many software developers that one of the most important aspects of development process is the time it takes to see target application reflecting source code modifications. Simply put, we want to see how we affect our program by modifying it’s source code as soon as possible. Feedback time matters.
Real-time feedback becomes even more important when developing against multiple target platforms. In today’s web development we create applications that adapt themselves to the client browser they are opened with. In order to verify that our application works properly on vast variety of devices we run it on as many different devices we can find and keep making changes to the source code if something doesn’t work as expected on any of devices. This process is very consuming if each device is controlled manually. Think of reloading your application every time you make a change or testing particular flow (i.e. filling and submitting registration form) on each device.
What if we could open our application on multiple devices and have them all reflect code changes automatically + have them all follow and repeat what happens in any single device you control physically? The good news is that it is possible with a tool called Browsersync and I'm going to show you how I use it in this post.
In order to reproduce all examples provided in this post on your machine you would need to:
- use command line. Refer to your OS docs/tutorials on how to use CLI in your environment. It’s worth pointing out that all commands mentioned in this post were tested on
OS X. Everything should work on other unix-like operating systems but this may require some extra research.
Node.jsinstalled. Refer to https://nodejs.org/download for installation
npm install browser-sync -g
-g flag stands for global installation, meaning it will be available for all users on your machine. You may need to gain administrator privileges in order to use this flag. You can omit
-g flag if you only want to install
Browsersync in your current path.
To get our first impression of what
Browsersync is capable of with minimal setup, let’s see how we can test ANY existing website on multiple devices/browsers right away. I will test
https://code4startup.com but you can test any reachable host in your network. Here is how it looks like in action:
browser-sync start --proxy="https://code4startup.com"
The output should be similar to following:
[BS] Proxying: https://code4startup.com [BS] Access URLs: —————————————————————————————————————— Local: https://localhost:3000 External: https://192.168.1.42:3000 —————————————————————————————————————— UI: http://localhost:3001 UI External: http://192.168.1.42:3001 ——————————————————————————————————————
UI addresses are to be used from your local machine while
UI External are to be used by external devices connected to local network.
In addition it will try to launch your default browser and point it to
Browsersyncuses target website’s protocol for the proxy server so if target website uses
HTTPSprotocol you will have to tell your browser to ignore the fact that
https://localhosthas no security certificate and let you access it.
You can leave terminal for now and access the UI dashboard, which is located at
http://localhost:3001 in our example.
At this point you have
Browsersync server running and ready to sync scroll, click, input fill events across multiple devices. All you need to do is connect your devices to local network (your home Wi-Fi network for example) and navigate them to the external hostname, which is
https://192.168.1.42:3000 in our example.
Feel free to explore the dashboard, perform scrolling, clicking, filling forms on connected clients and get comfortable with what we just learned before getting into real-time development in the next section.
In this section I'm going to give you a starting point from where you will have all you need to utilize your creativity and make something very unique and beautiful - it's an alarm clock web app I came up with while writing this post. Here it is in action:
You can try it online right now.
Assuming you’ve cloned/extracted the app project in
~/Desktop/browsersync-example, open your
Terminal and execute following command:
You’ve just changed your current working directory to our project directory. Now it's time to launch
browser-sync start --server --files="**/*"
This command basically tells
Browsersync to start up a web server with it's document root pointing to current directory and auto-update a webpage whenever a file in the project is modified.
**/* selector selects any file recursively starting from current directory. You could use more specific selector instead:
browser-sync start --server --files="**/*.html, css/*.css, js/*.js"
At this point you should have your browser pointing to
http://localhost:3000/ with our app running. Congratulations! You could connect multiple devices by pointing them to the external URI specified in
Terminal and enjoy flawless development process with instant source code modification feedback and synced interaction among connected clients.
Now when you have all set up I suggest that you go ahead and change/enhance the app! I'd love to see where you can take it from here, please share your results in the comments section. Here are just a few of my personal suggestions:
- Every time I'm trying out this web app, I find it cumbersome starting to search for the time I want to set alarm to in huge select dropdown that starts with 00:00. It would be helpful to be able to simply increase and/or decrease hours/minutes separately one by one.
- There is currently no sound produced when the alarm is activated. I would highly recommend fixing this situation. Let all your devices beep all at once in their full glory when synced with
Browsersyncand alarm is activated :)
- Currently alarm is activated when view is rendered at exactly same minute and second as alarm was set to. While this is OK it isn't perfect. What if browser will "freeze" for at least a second just when the alarm was supposed to be activated? It will miss it. Alarm clock should be more reliable than that, shouldn't it? See if you can find a better solution.
microseconds to the time display and fixing button CSS styles for
iOS browsers. All without having to manually touch a browser/device:
I hope this inspires you enough to continue your own way with this project and make something very unique and creative. Let us see what you come up with. Please submit your online demos in the comments section. I recommend hosting your work on Github pages or on Codepen.
I really hope you learned something from this post and that it was helpful to you. I believe that teaching is a good way to bring knowledge to test and to learn new things on the way so I learned new stuff myself too while preparing this article. If anything was unclear or if you find any mistakes in my post please don't hesitate to let me know asap. Your feedback is welcome too. Thank you for your time.