A guide to running Browser Sync on a local server running Ubuntu 20.04, Linux Mint 20 and similar systems, for working with static sites or with WordPress CMS.
The content of the article:
- Installing npm along with node.js
- Installing browser-sync
- Running browser-sync
Browser Sync is a very useful tool for layout designers and website developers. It allows you to automate the reloading of browser windows and thus save valuable time.
Typically, website development is done in this way. For example, via Sublime Text we change the php, css, html or js file. We save. Go to Opera. We refresh the page. Checking the result. Switch to Firefox. Reload the page. We are testing. Go to the next browser. Reload the page. We are testing. Again we edit the file. And so on in a circle until the site is ready.
It is possible to automate this monotonous process with browser-sync. Using it, you can open the file editor, make edits, save the file and see the result of changes in all browsers at once without reloading pages. This application not only automatically tracks changes in project files and automatically reloads browsers, but also synchronizes actions in browsers. That is, if I scroll the page up or down in one of the browsers, then in all other browsers it will also scroll automatically. When I fill in some form in one browser, it will be automatically filled in others.
Installing Browser Sync on a local server running Ubuntu 20 or Linux Mint 20 takes no more than five minutes.
1. Install npm – Node.js package manager along with node.js.
To do this, run the following command in the terminal:
sudo apt-get install npm
You will be prompted for the superuser password. You need to enter it. And after that the installation process will start. After completion, to make sure that the installation was successful, you can check the versions of installed node.js and npm by running the following commands in the terminal:
The terminal will display the versions of installed packages.
2. Installation browser-sync.
To install browser-sync in the terminal, run the following command:
sudo npm install -g browser-sync
If some errors are shown during installation, in most cases you can ignore them. I did not notice any negative impact on further work:
3. Running browser-sync.
The browser-sync utility has two options:
- for static sites (html, css, js);
- for dynamic sites, for example with CMS WordPress.
In both cases, you need to specify the server working directory. In my case, this is / var / www / html, so I enter the command in the terminal:
To start a static server, enter the command:
browser-sync start --server --files "*.*"
The server will be launched and in the terminal we will see:
The first url (Local) pair can be used to sync browsers across multiple devices. Just open it up and it should work. The second pair of urls is used to navigate to the sync settings:
3.2 Dynamic sites
When using a local server to synchronize browsers when changing php (or other) files, you must use proxy mode. In my case, WordPress is installed in the / var / www / html folder and opens in the browser at http: // localhost. Therefore, I run browser-sync in the / var / www / html folder like so:
browser-sync start --proxy "localhost" --files "**/*"
The main page of the WordPress site opens immediately:
When working with dynamic sites, keep in mind this point: when editing text in articles or on pages, the text will not be automatically updated on the site. Because in this case, all site files remain unchanged, the text is stored in the database, and the database change is not tracked.
To exit browser-sync in a terminal window, press Ctrl + C or simply close the console.
In this article, we looked at how to install and run Browser Sync on a local server running Ubuntu 20.04 or Linux Mint 20 to work with static sites or with a WordPress CMS.
If this instruction is useful to you, you can treat me to coffee:
If you have any questions or comments on the article, write in the comments!