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
Related
I am new to Laravel and I start my Laravel project using php artisan serve but I found that I also have to load Vite from another command prompt using npm run dev in order to make Laravel project run properly is there any method to autoload Vite when I do php artisan serve
when Vite is loaded my code works correctly
scripts in package.json
"scripts": {
"dev": "vite",
"build": "vite build"
},
Cause of Problem:
In older versions of Laravel we were using laravel-mix package but now laravel js compiling engine is shifted to vite and it is much more faster.
In the case of mix engine whenever we run npm run dev generate compiled js code in public/js directory. and due to it we need to refresh page manually everytime.
But now In vite when you run npm run dev it just starts a vite server that continuously monitor your changes and reflect those changes on screen immediately. but it's not generate compiled js files in public/js directory
So, when your vite server not running it shows above error.
Solution:
If you want to run laravel without runing vite server by npm run dev you will need to run npm run build. It will generate compiled js files in public/js directory so then you will not have need to run vite server.
Caution: if you run npm run dev after the npm run build command your compiled templates will be removed. So, you will need to run npm run build once again after stopping vite server which is running using npm run dev
npm run dev
with vite is basically what
npm run watch
used to do back with mix.
If you focus on your back-end, try to run prod instead, so that your main page works while you deal with laravel.
Once you get to front-end work and need your js running, you need to have vite up during development. At any point you can stop the process, run a quick prod build and get back to whatever you want.
npm and artisan are two different tools that have nothing to do with each other. They need to run seperately.
You can extend your package.json to automatically start both with npm run serve:
{
...
"scripts": {
...
"serve": "php artisan serve & npm run dev"
},
...
}
It's because of your Node version. Check your Node Version
node -v
if it's below 16, you should upgrade it to the latest one then run
npm install && npm run dev
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 new to app development so I'm sure this is an easy question for you seasoned pros out there.
I have a simple MERN stack app running in development using concurrently to run both the front-end and back-end. Before I deploy my app to Heroku I wanted to validate that it will run with the Heroku command line "Heroku local web". This successfully starts my server and connects my database but it does not start the front end at all. I think this may be something wrong with my package.json scripts but I have tried everything. My scripts are as follows:
"scripts": {
"install-client": "cd client && npm install",
"start": "node server.js",
"build": "cd client && npm run build",
"client": "cd client && npm start",
"dev": "concurrently -n 'server,client' -c 'red,green' \"nodemon server.js\" \"npm run client\"",
"heroku-postbuild": "npm run install-client && npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
},
I suppose you run your app on your local machine with npm run dev but according to heroku's documentation here they start your app with npm start unless specified otherwise by a file named Procfile in your app’s root directory.
The start script in your package.json file indeed runs only the server (node server.js).
Try copying the content of the dev script to the start script, or adding a file named Procfile with the single line:
web: npm run dev
or whatever command you use, in your app’s root directory.
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
}
});
I am using the following logic within my package.json file for a webpack project:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production ",
"clean": "rm -r deploy",
"start": "npm run clean && npm run dev && webpack-dev-server --mode development"
},
If my deploy directory does not exist, and I run npm start, I get the following message in my terminal:
rm: cannot remove 'deploy': No such file or directory
Is there a way to check if the directory exist first? And if does, then just skip the clean process?
Its better to use clean-webpack-plugin
but here you can also use rm -rf deploy.