Switch livereload to browsersync

Author: verwilst

gulpfile.js

@@ -1,7 +1,6 @@
 const elixir = require('laravel-elixir');
 
 require('laravel-elixir-vue-2');
-require('laravel-elixir-livereload');
 
 /*
  |--------------------------------------------------------------------------
@@ -17,5 +16,8 @@ require('laravel-elixir-livereload');
 elixir(mix => {
     mix.sass('app.scss')
        .webpack('app.js');
-    mix.livereload();
+    mix.browserSync({
+        proxy: 'web:8000',
+        open: false
+    });
 });

package.json

@@ -5,15 +5,20 @@
     "dev": "gulp watch"
   },
   "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-loader": "^6.2.9",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-preset-es2015": "^6.18.0",
     "bootstrap-sass": "^3.3.7",
     "gulp": "^3.9.1",
     "jquery": "^3.1.0",
     "laravel-elixir": "^6.0.0-9",
     "laravel-elixir-vue-2": "^0.2.0",
     "laravel-elixir-webpack-official": "^1.0.2",
-    "laravel-elixir-livereload": "^1.0",
+    "laravel-elixir-browsersync-official": "^1.0.0",
     "lodash": "^4.16.2",
     "vue": "^2.0.1",
+    "vue-template-compiler": "^2.1.4",
     "vue-resource": "^1.0.3"
   },
   "dependencies": {

readme.md

@@ -22,20 +22,23 @@ Make sure to chown all the data in your webroot to your own user, since docker s
 
 ### Initial steps
 
-> docker run --name myproject -it -d -v $(pwd):/app -w /app -p 8000:8000 verwilst/php7-cli php artisan serve --host=0.0.0.0
+> docker run --name myproject -it -d -v $(pwd):/app -w /app verwilst/php7-cli php artisan serve --host=0.0.0.0
 
 
-The project is configured to support live reloading. The browser opens a websocket to port 35729, so make sure it's accessible. This also compiles app.css and app.js under public/{css,js}:
+The project is configured with Browsersync. Gulp watch creates a proxy that points to our myproject container, so we need to link to it. 
+This also compiles app.css and app.js under public/{css,js}:
 
-> docker run --name myproject-gulp -it -d -v $(pwd):/app -p 35729:35729 -w /app verwilst/gulp watch
+> docker run --name myproject-gulp -it -d -v $(pwd):/app --link myproject:web -p 3000:3000 -w /app verwilst/gulp watch
+
+The proxy listens on port 3000.
 
 ### Starting an existing app
 
 > docker start mongo percona myproject myproject-gulp
 
 ( Leaving off mongo and/or percona if you didn't create those docker containers ofcourse. )
 
-You can now open your browser on http://127.0.0.1:8000 .
+You can now open your browser on http://127.0.0.1:3000 .
 
 ## When MongoDB is needed
 

resources/views/index.blade.php

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>Laravel/Vue.js</title>
+        <title>Laravel5/Vue.js2</title>
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
@@ -23,12 +23,6 @@
     </script>
 
     <script src="/js/app.js"></script>
-    
-    @if ( Config::get('app.debug') )
-  <script type="text/javascript">
-      document.write('<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
-  </script>
-    @endif
-    
+
     </body>
 </html>