Laravel BrowserSync without proxy - php

Question

I'm trying to use Elixir BrowserSync, one of the newest features of Laravel.
I added it to the gulp file
elixir(function(mix) {
mix.sass('app.scss')
.browserSync();
});
when I run "gulp watch" it output this message
[20:49:20] Using gulpfile ~/Desktop/laravel/gulpfile.js
[20:49:20] Starting 'watch'...
[20:49:20] Finished 'watch' after 11 ms
[BS] Proxying: http://homestead.app
[BS] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://10.9.0.48:3000
Automatically a browser is launched with the url http://localhost:3000 but nothing loads.
I think the problem is related to this line:
[BS] Proxying: http://homestead.app

Answer 1

You can if you use BrowserSyncs server.
mix.browserSync({
proxy: false,
server: {
baseDir: './'
}
});

Answer 2

Are you running multiple homestead sites? It looks like it defaults to proxying through homestead.app if you do not include a proxy setting. If you don't host your local on homestead.app it won't find it.
Try
.browserSync({ proxy: 'domain.app' });
Where domain.app is what you are serving the site with.

Answer 3

The direct answer to your question - it is not possible to not proxy the .browserSync. Long side-answer - you can still use elixir's implementation of browserSync in gulp, but you must have a separate PHP server to interpret the files.
Edit: I saw a way to not proxy by providing the script in the pages manually (by not giving any arguments in the .browserSync() call, but don't remember where and how to do it exactly.
The reason is that browserSync requests all the data from the server for you, injects a little javascript listener and displays everything else:
<script type='text/javascript' id="__bs_script__">//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.2.9.11.js'><\/script>".replace("HOST", location.hostname));//]]></script>
One way is to php artisan serve --host=0.0.0.0 in a separate terminal to start up the server and then use the .browserSync({proxy: 'localhost:8000'}). It all works - the BrowserSync UI and all the calls to refresh the pages.
Note: I could not connect to artisan serve without the --host=0.0.0.0.
For those wanting an all automated solution via gulp, here it is:
Use the gulp packages gulp-connect-php and laravel-elixir-browsersync2. The first starts up the php artisan serve and the other connects it to browserSync.
Install the packages:
npm install laravel-elixir-browsersync2 --save-dev
npm install gulp-connect-php --save-dev
Add the required lines to your gulpfile.js:
Code:
var elixir = require('laravel-elixir'),
gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var BrowserSync = require('laravel-elixir-browsersync2');
elixir(function(mix) {
mix.sass('app.scss');
});
elixir(function(mix) {
connectPHP.server({
base: './public',
hostname: '0.0.0.0',
port: 8000
});
BrowserSync.init();
mix.BrowserSync(
{
proxy: 'localhost:8000',
logPrefix : "Laravel Eixir BrowserSync",
logConnections : false,
reloadOnRestart : false,
notify : false
});
});
Then - simply gulp.
Disclaimer: This might not work with the gulp watch, but there might be people with the answer to that.
There is also a line PHP server not started. Retrying... before the [Laravel Eixir BrowserSync] Proxying: http://localhost:8000. It belongs to gulp-connect-php when trying to check if the server is running.

Answer 4

I found other solution on laracast for Bloomanity and it works with me like a charm!
$ php artisan serve --host=0
and then in your gulp add:
mix.browserSync({proxy: 'localhost:8000'});