How to Test Websites on Different Devices: Auto Reload with Browsersync

hey welcome back in this video i want to show you how you can have multiple browsers and devices in sync when you're testing or building a website so for example i have chrome firefox safari and then a screen size mimicking a phone and then an actual phone and if i scroll on one of them you can see they all scroll or you don't have to control it from your phone you can control it from your computer but the idea is they're all perfectly in sync so if i go to the about us page that happens for all of them i can go back to the home page if i open up the expandable mobile menu up at the top you can see well that media query doesn't make sense for large screens but you can see the screen that's mimicking a phone it opened up i can close it i can open up the live search overlay for all of them i can close it if i go down to the slideshow i can say you know go to slide number two or slide number three so everything is perfectly in sync also we have live reloads or automatic refresh so up at the top if i want to change the color of this large welcome text i think it's off camera right now but on the left hand side here i have vs code so if i just say color green and hit save i didn't have to reload or refresh any of the devices but you can see that my cat is destroying my blinds right now but you can see that color change took place automatically without us doing anything so this is a really useful tool to have in your toolbox and to set it up we don't need magic we don't need any special software that we have to purchase it's just a free and awesome tool called browser sync and in this video i want to show you how to get started using it okay so i've got a folder with an html file well actually two html files a css and a javascript file so you could just drag and drop open your index.html file on top of your browser to open it up and preview it but what if i wanted to also view or test these pages on my phone or my tablet well let's use browser sync so to use browser sync you'll need node.js installed on your computer if you don't already have node you can just pause the video visit the official website nodejs.org just go ahead and download it you should be able to click next next next through all of the default options in the installer okay assuming you have node then in vs code with your project opened up let's open our terminal so that's control j on windows or command j on mac so now down here in the command line we could install browser sync globally in fact that's what their official documentation recommends but i don't know i just feel like at some point over the last few years installing packages globally has sort of fallen out of fashion it can cause problems for a lot of people on their computers so i prefer to install packages locally for each individual project and then just create a script in my package.json file i also like this approach because then you don't have to remember the command line arguments and settings you can just write it once and then you have an easy sort of shortcut to call it again so here's what i'm going to do let's say npm init dash y to sort of create a new project and then let's install it so it's npm install browser dash sync okay then we're just going to jump into our package.json file we're looking for this scripts area let's set up a new script you can name it anything i'll name it start and then let's give it a value be sure to add a comma here but let's give it a value of browser sync start we want to start it up and then let's use an option of dash s just letting it know that we want to serve up the files of our project folder so we can give that a save and then in the command line we can run this by just saying npm run and then whatever you named your script so i named mine start cool so that's going to automatically open up your browser pointing towards this new page localhost 3000 and i can click back and forth between my two pages but more importantly i have this open in google chrome right now but i can open up that same url in firefox and notice that if i navigate to a different page in one browser we can see both browsers are perfectly in sync so now the real question is well how would you access this on your phone or tablet so assuming that all of your devices are on the same wi-fi well you just go into your command line and when we started that task of npm run start notice in your command line it's saying here's the local address yes but here's the external address now this is not your public ip so it's not like anyone in the world can visit it it's sort of dependent on just your personal network your home network your wi-fi but this address that you see here for external try visiting that try typing that into the address bar on your phone or your tablet your number will probably be slightly different than mine so use the external value in your command line not necessarily what's on my screen right now but i just visited this on my phone and now if i pull back up my computer's browsers you can see i'm not even moving my cursor so i'll just leave my cursor right here and on my phone if i navigate to that other page and then navigate back to the home page you can see now all three browsers are perfectly in sync the two on my computer and the one on my phone now this page is too short there's nothing to scroll vertically but also as you scroll the position of the page that also stays in sync amongst all the browsers so having the browser synced like this is pretty useful for testing but now i want to change gears and show you my favorite feature in browser sync what we can do is tell it to watch us so that anytime we save a change to a file it will automatically refresh all of the synced browsers so check this out in my command line i'm going to press ctrl c to stop that current task and i want to modify it in package.json essentially instead of just the dash s option s for serve up the files in our folder i'm going to add an option of w the w means watch so go ahead and watch all of our files for changes so check this out if i save this file and then start that task up again npm run start and then imagine i make a css change that tells the heading level one to be orange so if i jump into my css just write a quick rule h1 should be orange as soon as i save that i don't need to refresh any of the browsers it's just automatically so you see it in chrome in firefox and you have to take my word for it but i'm looking at my phone right now the text is now orange and then i can use the link on my phone to go back to the home page really quick i can test a javascript change so if i jump into the main.js file just change the message that says hello this text is from javascript maybe add a few exclamation points give that a save i don't need to refresh any of my browsers there it is in firefox there it is in chrome cool i think this is a really useful feature because your text editor doesn't need to take up the entirety of your screen so as you're coding you can just save your changes and then if you have a browser up on the other half of your screen you don't even need to take your hands off the keyboard you can just see those changes visualized automatically okay now at this point we're going to really change gears because sure this ability to turn your folder into the server is cool right just static html files serve these up however what if you're working with a server side generated site like a wordpress or laravel app right and oftentimes you'll have sort of a local dev domain and that's what you would want to view or serve up in browser sync not necessarily just a static folder of files well browser sync has us covered there it makes it very easy to sort of proxy a local dev domain so i work a lot with wordpress let me show you how you could use browser sync with something like wordpress so for example here's a local dev domain i have the actual domain address isn't important because it only lives on my personal computer no one else can visit it the point is that this is a wordpress powered site and what if i want sort of that auto browser reload feature and what if i want to be able to view and test this on my phone or tablet so here's what i would do back in the command line where we were currently running the task i'm going to press ctrl c to stop that task and i'm going to switch over to a new folder so this is the theme folder for that wordpress website so i'm just going to install browsersync locally for this folder or for this project so in the command line npm install browser dash sync okay and then to use it i would jump into my package.json file now i already have several scripts here powering my wordpress website wordpress has a really nice official package that uses webpack to manage your javascript it allows for sas or sassy css so i already have tasks that manage that for me that manage my css and javascript so i can leave those in place but i'll just create a brand new task or script and you could name it anything i'll name it maybe just sync let's give it a value be sure to have a comma at the end of the line and for the value we'll just say browser dash sync just like before we want to start it up only instead of dash s or dash w we want dash p so this gives us the proxy option it lets you proxy a local dev domain so then right after that still inside my overall double quotes i'm going to have a pair of single quotes and in the single quotes you just list your local dev domain that you want to proxy so for me obviously you don't have this local dev domain on your computer but for me it's convert to wp scripts dot local so i'll give this a save and then in my command line i'll test that out so i'll just run npm run sync npm run sync it opened up my default browser of safari but if i go back to chrome that previously had localhost 3000 and just get rid of the index.html right just visit the base localhost 3000 and refresh cool there it is in chrome i can do the same thing in firefox and right now i just pulled it up on my phone and if i go into the navigation menu and click on the about us page cool you can see that perfectly synced all of the browsers and just to give you an idea of how cool this is if i shrink the firefox window to resemble the smartphone watch this if i toggle the menu on my phone even that gets synced across all the browsers so i can close it on my phone and then if i scroll a little bit vertically on my phone even that gets perfectly synced okay and finally at the end here let me show you how i'd integrate browser sync with the existing tasks that are bundling up and managing my css and javascript essentially i want to have this wordpress start task up and running the entire time because it's going to watch me in the background and it's going to bundle up my sassy css it's going to transpile my jsx for my react components into just regular javascript that the browser can understand so on and so forth so the point is i want it always up and running but i also want obviously our browser sync task always up and running in other words i want both of them always up and running for situations like this there's a package that i like to use that makes it easy to run multiple scripts at once without having to worry about syntax differences for windows mac and linux right so it's a cross-platform way of running multiple scripts so in the command line i'll press ctrl c to stop what's currently running and i'm going to install a package so npm install it's called npm dash run dash all so npm run all let me install that okay then back in my package.json file i'm going to create one more brand new script you can name it anything i'm going to name it maybe preview and give it a value and that with a comma for the value we're going to use npm run all i'm going to say dash dash parallel so instead of sequential right i don't want to just run them one and then let it finish and then run the second one i want to run them in parallel at the same time so then you just list the different scripts you want to run so i'll include my sync task we chose that name just a moment ago space and then just the other task that i want to run is this start task so start okay and then before i save this and test it out we need to address the fact that i don't want to refresh all of the synced browsers the millisecond i save a change to my source css and javascript files instead i want to wait to reload the synced browsers until the bundled up file that will live in the build folder actually gets generated right so the wordpress or webpack task that's going to bundle everything up and convert it it will watch my source javascript in css files and then its job is to output the resulting files for the browser into my build folder so in other words i don't want my browser sync task to watch all of my files for changes i only want it to watch very specific files so when you want to spell out the exact files you want browser sync to watch for this is what you can do after the single quotes but before the double quote ending i can just say dash dash files and then you can just spell out files so you use single quotes to sort of spell out a file name or a path i'll say two asterisks for any folder and then look inside that asterisk for any dot php files so if you save a change to any php file in any folder i would want that to trigger a refresh space new single quote let's say look in the build folder slash for any file that ends in dot js and then another space single quote pair look inside the build folder slash asterisk for any file that ends in dot css cool so now browser sync isn't going to needlessly refresh multiple times when we save changes to a sassy css file or a jsx file it's only going to refresh when it actually makes sense so i'm going to save that and now this is the actual command that we would run right because it's going to run both the webpack task and our browsersync task so just npm run preview okay just for a quick test let me go back to the home page and maybe change the color of this headline so in my folder i can go into the css folder the modules folder headline dot scss i'll just say color should be green give that a save and now i'm not refreshing any of the browsers but if i go check them out again cool if i check in firefox perfect and you'll have to take my word for it but if i look at my phone yep it's green as well really quick i can try a javascript change so if i go into my src folder just go into my main javascript maybe down at the bottom just say alert quick test give that a save don't need to refresh anything the alert just steals the focus on my computer there it is cool so while this watch feature of browser sync is very useful at the end of the day nothing can truly compete with webpack's dev server that uses in-memory loading it's super fast it has hot module replacement we can't really compete with the speed or performance of that but for projects where we aren't rolling our own custom my cat is wreaking havoc right now i don't know if the microphone's picking it up but on projects where we can't control the workflow right in the exact webpack configuration we're just using a pre-existing tool so there'd be no easy way for us to customize the webpack config in situations like that i'm a huge huge fan of browser sync just watching us and performing a traditional full page reload i love the simplicity and i love the zero configuration nature of all of this anyways that's going to bring this video to a close i hope you feel like you learned something thanks so much for watching and stay tuned for more web development tutorials if you enjoyed this video you might enjoy one of my premium courses they range in topics from html css javascript wordpress development i just added a 10 hour new chapter about plug-in and gutenberg development and also react js in the description for this video you'll find a link to this page that has heavily discounted coupons for all of my courses thanks so much for watching and take [Music] care

Channel: LearnWebCode

Views: 9,383

Keywords:

Id: m-OFftNHNyc

Length: 18min 13sec (1093 seconds)

Published: Wed Jul 14 2021