Something's making my out-of-the-box Laravel project with browser-sync and the browser-sync-webpack-plugin installed to load infinitely on the browser-sync page. It works fine on http://localhost, but the browser-sync (localhost:3000) version doesn't stop loading and displays no content, just a white page.
I found this question which was similar to mine but it doesn't have any answers.
This only recently started happening on my machine. At first I thought it was because of the antivirus or firewall but disabling them did no good. I can't even figure out what's causing the page to never load.
Here's what my webpack.mix.js file looks like:
mix.js('resources/assets/js/script.js', 'public/js')
.sass('resources/assets/sass/main.scss', 'public/css')
.disableNotifications()
.browserSync();
Edit: Any tips on narrowing down the problem would also be appreciated.
For me, the problem was adding to the windows hosts file whatever url browsersync was proxying to, and point it to 127.0.0.1.
The default proxy target for the mix-browsersync package used in Laravel is app.test.
You can specify a different proxy target in the mix file:
mix
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/app.js', 'public/js')
.browserSync('localhost');
And, if like me, you're using the artisan server for development, you can even target that (as long as you're running php artisan serve in you project):
mix
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/app.js', 'public/js')
.browserSync('localhost:8000');
I have a possible solution for you that worked for me.
My issue was that I was fixated on using the localhost:8000; instead I tried 127.0.0.1:8000. For those of you who don't know, that IP address is your default localhost IP address.
Try adding it like this to you webpack.mix.js file \/\/\/
mix.browserSync({
proxy: 'http://127.0.0.1:8000'
});
Or alternatively you can use
mix.browserSync('127.0.0.1:8000');
Once done you can run npm run watch.
Related
I have installed "laravel/jetstream": "^2.9" on "laravel/framework": "^8.75". When I accessed Profile Information page, it doesn't load necessary information into relevant form fields.Please help me with this isses.
Even I have tried reinstalling Jetstream separately. Problem still exists.
publish livewire config
php artisan vendor:publish --tag=livewire:config
verify the path to livewire in config\livewire.php
'asset_url' => '/../yourpath/public',
'app_url' => '/../yourpath/public',
inspect the result web page and verify the path for livewire.js file is correct
<script src="/../yourpath/public/vendor/livewire/livewire.js?id=de3fca26689cb5a39af4" data-turbo-eval="false" data-turbolinks-eval="false" ></script>
i think that you production is not in the root directory ,for me it was in a subfolder so i get this problem
hope it work for you
If you open your Console you probably have a console error that livewire is not working properly. Usually the following command is missing at this point
php artisan livewire:publish --assets
Let me know if this helps
All the best!
I am building a web app that uses (mobile devices's) camera, but this is working only on https and localhost.
The web app is served locally using WAMP 3.2.9.
I've managed to use the secure protocol (https) within my wamp configuration, but I'm having problems when I want to share my app to my local network so I can view the app on my phone and test the camera functionality.
In the older versions of Laravel (which used webpack) this was very easy using browsersync, but now, using Vite I don't know exactly how to do this.
My local domain is myapp.test and can be accessed using both http and https.
I tried to use npm run vite --host, which shows the local and network address as well (ex. 192.168..), but when I visit that address on my phone, I can see only the Vite default page This is the Vite development server that provides Hot Module Replacement for your Laravel application., but not the app itself.
In my vite.config.js file I added that ip from vite network:
server: {
https: true,
host: '192.168._._'
},
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
mkcert()
],
Note that I also used the mkcert vite plugin to allow me to use https.
Now I'm confused about the vite service that runs on port 5173 by default and the app that should run on port 443 to be on https.
I've also tried using `php artisan serve --host 192.168.. which works on my local network, but it doesn't work with https, so I had to focus on WAMP only.
So how can I have my app shared among my local network with https?
I'll explain about how Vite works compared to Webpack to hopefully help you understand a little better.
Both Webpack and Vite create a bundle of files when using the build commands to compile for production. Using the dev command, that it seems like you're using, they work a little differently. While Webpack watches for file changes to recompile the bundle and BrowserSync then reloads your assets for you, Vite starts a local server to serve the compiled files. This means that you don't proxy your original domain like with BrowserSync. Vite also creates a file in your public folder called "hot", which tells Laravel which url it should use when using the #vite() directive or the Vite::asset() method. Because of that you can use your original domain myapp.test even for the hot reloading of the dev command. I don't think Laravel actually supports --host and if it doesn't I haven't been able to find it or figure it out.
I did find https://github.com/Applelo/vite-plugin-browser-sync to hopefully solve your testing on other devices but I couldn't get it to work with https, otherwise I'm afraid you might have to look into something like ngrok and use the npm run build command instead of dev until better support is built into Laravel.
Update:
To configure the BrowserSync plugin you have to manually configure the proxy:
VitePluginBrowserSync({
bs: {
proxy: 'http://myapp.test/' // The usual access URL
}
})
Since it doesn't seem like Laravel supports --host I have been able to find a workaround: because Laravel reads the asset host URL from the hot file in the public directory, you can replace the contents with the external Vite URL like http://192.168.1.37:5174 after running npm run dev --host. This will make Laravel use that URL when referencing any assets.
I have ES6 JavaScript code in my Vue components. In order to support IE 11 I need to convert it to ES5 code using babel and laravel-mix. How do I do that?
Here is my webpack.mix.js file.
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/admin-app.js', 'public/js')
There's a mix.babel() command that can handle this.
It's identical to mix.scripts() so it requires a little more legwork. I cheat and do this and then serve the es5.js to IE:
mix.js('resources/assets/js/app.js', 'public/js')
.babel('public/js/app.js', 'public/js/app.es5.js')
.sass('resources/assets/sass/app.scss', 'public/css');
The code is not 100% correct, babel first argument can be an array, if we want to pass multiple files:
mix.js('resources/assets/js/app.js', 'public/js')
.babel(['public/js/app.js'], 'public/js/app.es5.js')
.sass('resources/assets/sass/app.scss', 'public/css');
I will prefer to maintain app.js as my final js output. It's a preferred naming convention.
So like every other person, if babel works for you, then
webpack.confog.js
mix.js('resources/assets/js/app.js', 'public/js/app1.js')
.babel('public/js/app1.js', 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css');
With this I still maintain public/js and entry point through out my application.
But I prefer using the solution I posted here:
Laravel Mix: Configure Babel for IE11 compatibility (transformations and polyfills)
I have configured my app to be available under an alias (http://localhost/myapp). How can i configure mix to reflect this in the manifest file? I want to reference /myapp/css/app.css instead of /css/app.css.
Thanks in advance.
You can disable it, read the docs here https://laravel.com/docs/5.4/mix#url-processing
mix.sass('resources/assets/app/app.scss', 'public/css')
.options({
processCssUrls: false
});
I'm trying to get this working and I have spent a day now with not much success... I'm new to both Laravel and GulpJS, which makes it even better I guess... :)
What I'm trying to achieve is a (preferably cross-platform) solution for reloading the browser on file changes using GulpJS on a Laravel instance. I could get gulp-livereload working as per its documentation, but I cannot set it up properly to have an effect on the local domain http://laravel.dev set with MAMP PRO (I know, I know...).
I am happy to leave MAMP behind if it's a must as long as I can set a local development domain on a project-by-project basis. I tried to look around even on https://laracasts.com/ but I'm yet to find a solution which would take care of automatic reloading of the browser with Laravel - it seems this bit is missing from all Laravel-GulpJS solutions...
Anybody for the rescue? Any ideas? I'll keep looking in the meantime... :)
Of course, you can use gulp-livereload with Laravel. And you don’t have to use Elixir for livereload. Just do the following:
Install gulp modules as usual in your Laravel App folder:
npm install --save-dev gulp gulp-livereload
Add javascript to Laravel layout script for livereload with src="//localhost:35729/livereload.js?snipver=1" (sorry, this site doesn't allow me to insert complete javascript snippet)
Install LiveReload browser extension
The simplest gulpfile.js will be like this:
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('reload', function() {
livereload.reload();
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch(['./public/**/*.css', './app/**/*.php', './resources/**/*.php'],
['reload']);
});
run gulp watch