I want to setup browserSync with laravel. I have a virtual host on local machine http://site.localhost.
According to the manual I put this into my gulpfile.js:
mix.browserSync({
proxy: 'site.localhost'
})
So when I run gulp watch I got http://localhost:3000 open with just infinite loading. So what did I do wrong?
Related
I am working on a Laravel and Vue project, at the moment of executing the server
php run serve the project works normally, I can log in normally but, when I run the vue compilation command npm run watch or npm run dev the page stops loading and throws me an error in the console enter image description here
the composition of the webpack.mix.js file is this:
mix.webpackConfig({
output: {
publicPath: '/mediamanager/public',
publicPath: '/',
chunkFilename: 'js/components/[name].js',
}
});
im new in laravel and vue. i've been trying to use browsersync in server but no luck. successfully setup in my local but when i try to set in server its just not working. so i want my website to auto reload when there is new component update on server and im using cloudflare to purge new update after push to git and pull to server. can anyone give me a example to setup in production server? if its only possible for local dev, any suggestion about it? sorry for bad english.
my code now in webpack.mix.js
mix.browserSync({
open: false,
files: [
'app/**/*',
'public/**/*',
'resources/views/**/*',
'routes/**/*'
]
})
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');
and this in my blade
#if (getenv('APP_ENV') === 'local')
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST/browser-sync/browser-sync-client.js?v=2.18.6'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
#endif
thanks for your help sensei!
I'm trying to set up BrowserSync to work with my Laravel project. However, when I run npm run watch, localhost:3000 doesn't load. I'm not getting any compilation errors in the terminal. Interestingly enough, the UI dashboard on localhost:3001 works perfectly fine.
If I run php artisan serve, localhost:8000 loads up fine, but of course, it's not connected with BrowserSync.
My webpack.mix.js file looks like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.browserSync({proxy:'localhost:3000'});
I'm using the following versions:
Laravel-Mix: 4.0.7
browser-sync: 2.26.7
webpack-dev-server: 3.8.0
browser-sync-webpack-plugin: 2.0.1
Any thoughts?
Install these two plugins:
"browser-sync": "^2.26.5"
"browser-sync-webpack-plugin": "^2.0.1",
mix.browserSync('http://localhost:8000/');
I was able to reload via brosersync adding injectChanges: false to my browsersync line.
you must do it like so:
mix.browserSync({
proxy: "http://localhost:8000"
});
The BrowserSync docs states that you can set ui: false
This way you can then set the port: 8080 or whatever value you want that's not being used. Here's how implement it.
if (!mix.inProduction()) return mix.browserSync({
hot: true,
ui: false,
open: true,
watch: true,
https: false,
files: [
'./app/*',
'./routes/*',
'./public/*',
'./storage/*',
'./stories/*',
'./resources/*'
],
port: 8080,
host: '0.0.0.0',
proxy: {
target: "http://yourlocal.dev",
ws: true
}
});
In your webpack.mix.js, add the following:
mix.browserSync({
proxy: "http://localhost:8000"
});
After that, run the following commands
**npm uninstall browser-sync-webpack-plugin**
**npm install browser-sync-webpack-plugin**
The above will automatically open **http://localhost:3000/** on your browser
Add this script before Tag:
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.27.7'><\/script>".replace("HOST", location.hostname));
If not work change your webpack.mix.js like this and the the above script before </ body> Tag:
const mix = require("laravel-mix");
//Compiling scss to css
mix.sass("public/assets/css/style.scss", "public/assets/css/style.css");
mix.browserSync({
proxy: "http://localhost/myapp/", //Your host
files: [ //Files for watching
"./app/**/*",
"./routes/**/*",
"./public/assets/css/*.css",
"./public/js/*.js",
"./resources/views/**/*.blade.php",
"./resources/lang/**/*",
],
});
Then run: npm run watch
When you start the Laravel server via php artisan serve, this will be printed in the terminal:
Starting Laravel development server: http://127.0.0.1:8000
After starting the Laravel server, I changed the code in the webpack.mix.js file from this:
mix.browserSync();
To that:
mix.browserSync({
proxy: "http://127.0.0.1:8000",
});
I am new in vuejs and I am using vuejs in laravel
this is working and showing component but after making refresh
the page what can I do to see changes with out refreshing page?
these are what I have done
in Webpack:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue'])
in my html file:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
commands:
npm run dev
npm run watch
You want to learn how to make single page application (SPA) which does not refresh the page but update the content according to the route.
https://laravel-news.com/using-vue-router-laravel
You will have to learn vue, vue-router to make SPA. when you get some experience then learn Vuex also.
I just had the same issue and struggled for a couple of days, the problem is the webpack mix configuration: this is what worked for me, but take care to remove the host in case you're not working with Laravel Homestead, if you are just leave it as it is and change the proxy value to your site local url.
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')
.browserSync({
host: '192.168.10.10',
proxy: 'mysite.test',
open: false,
files: [
'app/**/*.php',
'resources/views/**/*.php',
'resources/js/**/*.vue',
'packages/mixdinternet/frontend/src/**/*.php',
'public/js/**/*.js',
'public/css/**/*.css'
],
watchOptions: {
usePolling: true,
interval: 500
}
});
Note: I think it was a sort of a bug in NMP, but the first time I tested this config, it it didn't work. What I did was to remove the polling part, ran
npm watch-poll, stop the watching and then added again the polling settings and ran simply npm run watch and workied like a charm!
EDIT
Btw, there is small issue with this config, you have to save twice for the browser to see the changes
Hope It helps!
-Hugo
You just need to run command into your terminal:
npm install
npm run dev
npm run watch
and will see changes continuously :)
When I run Gulp the UI page works on http://localhost:3001, but on http://localhost:3000 the browser serves a blank page that is stuck loading, no console errors.
I'm using WAMP on Windows 10, Gulp version 3.9.1, BrowserSync version 2.24.4.
This setup was working fine until recently, this has me stumped.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
gulp.task('sass', function(){
return gulp.src('sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('compress', function () {
gulp.src('scripts/js/*.js')
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '-min' }))
.pipe(gulp.dest('scripts/minified/'));
});
gulp.task('browserSync', function() {
browserSync.init({
proxy: "experiments"
});
});
gulp.task('watch',['browserSync', 'sass', 'compress'], function(){
gulp.watch('sass/*.scss', ['sass']);
gulp.watch('scripts/js/*.js', ['compress']);
gulp.watch('*.php', browserSync.reload);
gulp.watch('*.html', browserSync.reload);
gulp.watch('scripts/minified/*.js', browserSync.reload);
})
Terminal output
[17:24:44] Using gulpfile ~\Documents\Web Design Local\host\experiments\gulpfile.js
[17:24:44] Starting 'browserSync'...
[17:24:44] Finished 'browserSync' after 9.99 ms
[17:24:44] Starting 'sass'...
[17:24:44] Starting 'compress'...
[17:24:44] Finished 'compress' after 2.2 ms
[Browsersync] 1 file changed (universal.css)
[17:24:45] Finished 'sass' after 174 ms
[17:24:45] Starting 'watch'...
[17:24:45] Finished 'watch' after 17 ms
[Browsersync] Proxying: http://experiments
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://redacted:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://redacted:3001
--------------------------------------
Also looks like the ports are established correctly? Here's before the gulp task is run...
And after...
This problem was driving me nuts too because recently my proxys stopped working as well. I was trying to think what I changed - finally I realized I upgraded MalwareBytes to the latest version and it's firewall settings were messing with my ports. I disabled it and now it is working.
I hope this can help someone!
I've set up gulp + browsersync as a test and I think – after some messing about and doc reading – you can change this:
gulp.task('browserSync', function() {
browserSync.init({
proxy: "experiments"
});
});
to this:
gulp.task('browser-sync', function() {
browserSync.init({
proxy: 'experiments',
host: 'experiments',
open: 'external'
});
});
...and it'll work.
Notes:
If unset, host defaults to null.
open is the browser action to take and defaults to true. Other options include false to NOT open a browser, and external as used here to open the URL specified in host.
I'd also suggest you use an extension, even if it is just for organisation in your Filesystem, vhosts setup and/or WAMP lists etc. .dev is useless over http in chrome these days, and .local messes with Multicast DNS services. I use .mere, you could use .pix ;) - your safest most future-proof bet is to use .test as per RFC 6761
After installing new windows I had the same issue where the browser keep loading without initialising the project.
the issue was Browser Sync package needed an update so I had done the following
run the terminal as administrator
cd into the project folder
rm -rf node_modules (if you already have the package.json file)
npm install
also you might need to rebuild the node-sass so you could use the following
npm rebuild node-sass
then run the gulp project and everything should work fine
when you go to experiments in the browser does it work?
It could be a browser update rather than gulp
I would try changing your host to dev.experiments.co.uk
then change the proxy to dev.experiments.co.uk