Changing your Browsersync URL

Browsersync Logo

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: 'project.dev',
});

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: 'project.dev',
      proxy: 'project.dev',
});

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.

Ben Roberts

Thank you for reading! I'm Ben, a web developer from Hertfordshire. I love writing about problems I've been able to solve, or very ocasionally, those that I can't. Sometimes I write about other things, such as cybersecurity, which has always fascinated me. If there is anything you'd like help with, or explained better, let me know in the comments below.