10

I have load laravel project which runs fine with valet domain something.dev

Tried to implement browser sync with laravel-mix

mix.browserSync({
    proxy: 'something.dev'
});

After running npm run watch it is pointing me to http://localhost:3000/

Can i point to to valet domain instead of localhost:3000 ?

Here is the output of npm run watch

Asset     Size  Chunks             Chunk Names
mix.js  2.59 kB       0  [emitted]  mix
[Browsersync] Proxying: http://something.dev
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.131:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.131:3001
 --------------------------------------
[Browsersync] Watching files...
miken32
  • 42,008
  • 16
  • 111
  • 154
Rahul Sharma
  • 779
  • 2
  • 12
  • 27

2 Answers2

17

I had similar issues myself getting browserSync working with Valet, but the options I use are:

mix.browserSync({
    proxy: 'something.test',
    host: 'something.test',
    open: 'external'
});

host overrides any detection of hostname in browserSync

open tells it which URL to open (local by default)

Sean Hay
  • 536
  • 8
  • 10
  • Worked for me too! – Thiago Natanael Aug 09 '18 at 13:09
  • 2
    it is taking me to something.test:3000, how can I avoid this? – Ali Gajani Nov 27 '19 at 17:12
  • @AliGajani Is it still loading the page in the browser? Browsersync requires the port in order to synchronise on updates. If it's a different port that you need, then you just need to add the "port" option and set it to whichever port you want. Browsersync will increment the port if you run another instance simultaneously. If you wish to remove the port altogether, unfortunately that will just give you the project without Browsersync connected. – Sean Hay Nov 28 '19 at 06:09
  • No, is not that we need another port. It's just that with Valet you don't specify the port. When we use Valet we only set the name of the folder and the .test extension and that's it. Fore example, in my case I'm using https://test1.test, but your code is taking me now to https://test1.test:3000, which doesn't works of course. – Reinier Garcia Jun 17 '21 at 15:46
0

If you're using valet and ran into an issue where the browsersync doesn't start, here's the answer. I was banging my head on the wall over this but found a clue in their Upgrade to Mix 6 docs. After reading this, here's my setup:

// package.json
{
    ...
    "scripts": {
        "build": "mix --production",
        "dev": "mix watch" // <--- add this script, you need to run mix watch
    },
    ...
}

Then in my webpack.mix.js

// webpack.mix.js

const mix = require('laravel-mix');
const homedir = require('os').homedir();

const host = 'your-local-domain.test';

// ... other mix stuff

mix.browserSync({
    hot: true,
    ui: false,
    proxy: `https://${host}`,
    host,
    port: 8080,
    open: 'external',
    notify: true,
    files: ['**/*.php', 'dist/**/*.(js,css)'],
    
    // if you're using valet with https, point to cert & key
    https: {
        key: `${homedir}/.config/valet/Certificates/${host}.key`,
        cert: `${homedir}/.config/valet/Certificates/${host}.crt`,
    },
});

Let me know if I'm missing anything!

Manas Chimpidi
  • 1
  • 1