how to change browserSync Port

Question

My application is running on port 8000. I have changed the borowserSync port to 8000 from browser-sync/default-config.js. And it looks something like this

// Change the default project
ui: {
    port: 8000
},

ui: {
    port: 8000,
    weinre: {
        port: 8000
    }
},

but when I ran gulp watch command it spins the server on port 8001. my terminal looks like this after I ran gulp watch command

[23:40:54] Starting 'browserSync'...
[23:40:54] Finished 'browserSync' after 23 ms
[23:40:54] Starting 'sass'...
[BS] Access URLs:
------------------------------------
Local: http://localhost:8001
External: http://192.168.1.6:8001
------------------------------------
UI: http://localhost:8002
UI External: http://192.168.1.6:8002

Does anyone know who to change the port in browserSync.

Tyrone Wilson Tyrone Wilson · Accepted Answer · 2017-05-06T05:55:00

This kind of shifting by 1 normally happens when there is something else running on the port. Do you have another instance that is already occupying port 8000?

I notice that you have port 8000 mentioned twice in your config file and you have two of the same node for ui

My config for gulp looks like this for example

browserSync.instance = browserSync.init({
  startPath: '/',
  ui: {
    port: 3001
  },
  server: server, //server variable set elsewhere
  port: 3000,
  browser: browser, //set elsewhere
});

So your config should look more like

{
  port: 8000,//Or whatever port you want for your application
  ui: {
    port: 8001 //Or whatever port you want for browsersync ui
  }
}

how to change browserSync Port

1 Answers