I am building a Laravel site running in a Vagrant box. I would like to enable live priview with Laravel mix. I have installed Browsersync with
npm install browser-sync browser-sync-webpack-plugin#2.0.1 --save-dev --production=false
I added this to webpack.mix.js:
mix.browserSync('clever.laravel')
And my package.json includes the watch-poll option which is needed for using browsersync on Vagrant, according to the documentation.
"scripts": {
...
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
}
But the watch-poll option does not have any effect, any changes are not reflected in the browser. How can I get browsersync / Laravel Mix Live Preview working with Vagrant?
Add the following to your webpack.mix.js:
mix.browserSync({
proxy: 'yourdomain.localhost',
open: false,
watchOptions: {
usePolling: true,
interval: 1
}
});
Related
I have my notifications working locally, but once deployed to production, it's not showing anything in the console.
#pushonce('custom-scripts')
<script>
Echo.private('App.Models.User.' + #js($user->id)).notification((notification) => {
console.log(notification); <---nothing printed in console on production.
#this.call('addNotification', notification);
});
</script>
#endpushonce
If I open the console on production and type Echo it sees it, so I know Echo is imported or whatever.
My app is deployed on Laravel Forge. I've run the following commands on prod:
php artisan config:clear
php artisan cache:clear
composer dump-autoload
php artisan optimize:clear
Nothing seems to have any impact.
Also, I'm aware that Livewire has listeners for Echo, but this is the only way I was able to get things working locally.
UPDATE
I use Github actions for my CI/CD pipeline, and within my actions I'm running the following scripts, which I thought would be enough, but perhaps not:
- uses: actions/checkout#main
- name: Copy .env
run: php -r "file_exists('.env') || copy('.env.example', '.env');"
- name: Install Dependencies
run: composer install -q --no-ansi --no-interaction --no-scripts --no-progress
- name: Generate key
run: php artisan key:generate
- name: Directory Permissions
run: chmod -R 777 storage bootstrap/cache
- name: Install dependencies
run: npm install
- name: Compile assets
run: npm run production
- name: Execute tests (Unit and Feature tests) via PHPUnit
run: vendor/bin/phpunit
I thought I would post my build scripts as I don't think I've ever really paid much attention to them, and I'm not sure if they're set up right. I also don't have an npm run build script, and don't know what I would put in it:
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
UPDATE:
I ran npm run prod and npm run production locally, which theoretically should produce the same bundle I'm seeing in production, and I got the same result locally, i.e. I'm seeing the notification logged to the console. So it doesn't appear to be related to my build script.
Also, Echo is making it into the production build because I can call it from the console in production. So there has to be some other reason why it's not working.
Echo is a JS lib and i suggest that you have to build your scripts before you deploy. If your build your javascript in your pipeline make sure that your pipeline run the npm build command.
Add this to your Laravel Forge deployment script:
npm ci
npm run build
I created a new laravel project, installed breeze auth and ran npm install and npm run dev. But it's stuck at this screen for 15 minutes now. Nothing is moving on the terminal window.
All the commands I used was
laravel new shop
composer require laravel/breeze
php artisan breeze:install
npm install
npm run dev
Everything worked fine until npm run dev, but when I enter npm run dev command, I get this output and nothing else.
PS C:\shop> npm run dev
> dev
> vite
vite v2.9.13 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 364ms.
Laravel v9.19.0
> APP_URL: http://shop.test
Laravel version 9.19.0 replaced Mixer with Vite for more information check Bundling Assets (Vite)
if you want to work mixer install Laravel version /= 9.1.0
composer create-project Laravel/Laravel app_name 9.1.0
I used npm run build instead npm run dev. And that solved it, I guess.
I faced the same problem. I tried for many hours to solve this problem. Laravel 9.19.0+ is using Vite to replace Laravel Mix for bundling assets. https://laravel.com/docs/9.x/vite#main-content
Starter kit components like Laravel Breeze and Jetstream have been using #vite
#vite(['resources/css/app.css', 'resources/js/app.js'])
When we run npm run dev vite will create own host below.
> dev
> vite
vite v2.9.13 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 364ms.
Laravel v9.19.0
> APP_URL: http://shop.test
And alway embed our style and script with this host http://127.0.0.1:3000/
<link rel="stylesheet" href="http://127.0.0.1:3000/resources/css/app.css">
<script type="module" src="http://127.0.0.1:3000/resources/js/app.js"></script>
I found a file name hot in the folder public was been created during we run command npm run dev and it is never delete.
To work around I just delete hot file by add few code into package.json
From
"scripts": {
"dev": "vite",
"build": "vite build"
},
To
"scripts": {
"delhot": "npx rimraf public/hot",
"dev": "vite",
"build": "npm run delhot vite build"
},
I hope that next release version of Laravel Vite will fix this issue.
composer create-project Laravel/Laravel app_name 9.1.0
Just use this laravel ver
I am trying to host my react app with a NodeJS server on Heroku, but I keep getting H10 Error, can someone please help resolve it.
Our nodeJS server seems to be working fine Node Server endpoint but not the React app.
Here is the code for scripts in the package.json file. I guess I got the scripts wrong. Any help or guidance would be greatly appreciated.
"scripts": {
"start": "concurrently npm:server npm:dev",
"local": "concurrently npm:server npm:dev",
"dev": "react-scripts start",
"build": "node ./scripts/build.js",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "node ./postinstall.js",
"server": "nodemon server/server.js",
"heroku-postbuild": "npm install && npm run build"
}
Im i'm assuming correctly there are two sets of package.json files and that your express server is serving up client files.
There should be one package.json in your server folder, and one in the client.
In my heroku projects I have this line of code in my server package.json to allow deployment.
"heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
let me know if that solved the issue!
I'm a beginner in Vuejs , i've make a project and now i want to deploy it ,
i've tried to run
npm run build
like in Ember js and other js front end frameworks normally it will create a dist folder that contain my source code but i could not do that because the build script is not defined in the Vuejs which came with Laravel .
and i also tried to compress the project and upload it to my server and run it like other normal Laravel project but always Vuejs code not working, is there a specific way to deploy it ?? i've tried to search but i didn't find the solution
Your available scripts can be seen in package.json in the main laravel app folder.
There you should see something like:
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
Use npm run production for production builds and npm run dev for development builds.
In your webpack.mix.js file in the main folder, you can define your webpack configuration and therefore deployment settings. Have a look at https://laravel.com/docs/6.x/mix for details.
If you leave the standard implementation, your resources/js/app.js will be compiled to public/js/app.js.
You can include the file in your Laravel Blade template like this:
<script src="{{ mix('js/app.js') }}"></script>.
I'm using webpack and heroku.
When I push my web to heroku it will restart and do "npm run start".
What I want to do is doing "npm run start" with "npm run build" when I push my web to heroku
here's my pakage.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --open --inline",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"start": "set NODE_ENV=production webpack --progress --hide-modules&&node server.js"
},
What I tried is this but, not working
"start": "set NODE_ENV=production webpack --progress --hide-modules&&node server.js"
Update:
Maybe your scripts isnt working in heroku because, by default they are running linux and you are triyng to run the "set" command that belongs to windows. Try removing it form the script and let cross-env do all the rest of the work for you :)
Previous response:
I know this isnt the best solution, but I hope it helps you:
If the problem is in the concatenation of commands to run, you can install "npm-run-all" to your project and then you will be able yo run several scripts in secuential order.
In your case, you could set the scripts like this:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --open --inline",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"start": "set NODE_ENV=production webpack --progress --hide-modules",
"run-server": "node server.js",
"build-sart-n-run": "run-s build start run-server"
}
After that you can run ,either via Heroku CLI using a procfile or using the tools that the web UI gives you when you login, the next command:
$ node build-sart-n-run
sorry if my english inst very good :)