Select Page

Do you use Browsersync as part of your workflow? Have you noticed that when you start Browsersync and a new browser window opens, the URL is localhost rather than the actual URL of your site? Annoying isn’t it?

The problem is that when you try to make changes in a dynamic environment such as WordPress, the database starts to save the localhost URL. You then need to do a search and replace on the URLs to change them back to the real one.

Well, you don’t need to live with this.

In your project folder you should see a file called gulpfile.js. This is where your configurations are stored. Open it up. Scroll to the Browsersync configuration block, which should look like this:

browserSync.init(files, {
      proxy: '',

You will probably already have changed the proxy to your local URL to get Browsersync working fully.

To make the browser load the actual URL of your project, you need to change the code block like so:

browserSync.init(files, {
      open: 'external',
      host: '',
      proxy: '',

And that’s that! Localhost gone.

Oh, and if you use Grunt rather than Gulp, you can make the same changes. Head to the Browsersync Grunt documentation to find out how.

Before you go.
Enjoy 30% off.
All lifetime plans.


Just enter the code at the checkout to redeem.