I will consider it, make sure your production server meets the requirements for Browsershot by checking their documentation since not all servers are configured the same. You may also refer to puppeteer's docs: pptr.dev/troubleshooting#chrome-doesnt-launch-on-linux. And also Spatie's requirement guide: spatie.be/docs/browsershot/v4/requirements#content-custom-node-and-npm-binaries

Thank you! 🙏

Hi, make sure that Reverb's credentials are set in your .env file and clear and re-cache your config cache 'php artisan config:cache'. You also need to make sure that Reverb/Broadcasting is installed on your production environment. If you are using SSL, follow these steps from the Laravel docs: laravel.com/docs/11.x/reverb#ssl. Also restart Reverb itself: 'php artisan reverb:restart', and also don't forget to run your queue worker in production: 'php artisan queue:work' (better setup supervisor to restart the worker when needed).

No, it's not tailwindUI. I made it myself, though it was inspired by the Arc browser UI, and the date range picker is from nextUI. Thanks

@@glennraya Can you make a video about the dashboard

​@@scherzer6428 I don't think making a video about the dashboard is going to bring much value to people haha. Thanks for the compliment. However, I will upload a new video tomorrow, creating advanced, Google like search engine for one's projects.

Spatie's Browsershot package doesn't directly support including the header on every succeeding page, however, you may achieve the repeating header effect by experimenting with custom CSS, like setting the header with a fixed positioning so it "could" appear on every page.

@@yoskokleng3658 I don't think that's possible on a web interface. Maybe some form of dirty hack would do.

@@yoskokleng3658 I use tailwindcss for the css framework.

I also use Vue, but right now I don't have an example of this using Vue, however, it's not very hard to transfer the concept here in Vue, you only have to listen to the channels inside the onMounted() hook in Vue, since this is React, of course, it's inside of the useEffect(). That's all the major difference when it comes to the implementation.

@@glennraya yung problem ko po kasi dun sa ginawa ko is di ko mapagana yung chat notification sound at yung sa group chat na instead of yung members lang makakatanggap ng message, lahat ng users ang nakaka tanggap haha. pero okay lang po sir, will wait kung meron ka man bago tutorials

@@gamesandlofimucic sa notif sound, search ka na lang ng similar implementation sa vue, if lahat ng users nakakatanggap, need mo lang ipasa yung ID ng user na gusto mo padalhan dun sa broadcast event class, para yun lang ang makaka listen ng events.

@@gamesandlofimucic Yung pinaka latest kong video about Reverb: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-C39uG7PaeDI.htmlsi=iYipIPdQVCwbY77Z - one on one chat na yan, kaso React pa din, makak receive lang ng message is yung intended user, hindi lahat. Check mo lang yung event class saka yung Echo listeners ko sa code, available sa description.

I agree with you

@@rondevPH Really? I couldn't try it, I don't have a windows machine. 😅

@@glennraya good for you. That is why dompdf is the only way😅

I'm trying to get it to work with laragon on windows but I can't figure out how to get it to work.

@@rondevPH hmm, can't tell for sure, Browsershot docs doesn't mention any incompatibility with Windows.

There's no artisan command to generate that unless you install broadcasting from scratch, but you can set it to whatever string/numeric values you want for as long as it is unique. That's all it requires.

@@glennraya so hindi na need gumawa ng account boss? hindi katulad ng pusher? so random string as long as unique?

@@gamesandlofimucic yes po. Wala ng account bale parang locally hosted yan

Hi, as of now, the subscripiton API is not yet available.

@@glennraya okay thanks

Thank you! 🙏

@@farhadfarzi3351 thanks 🙂

@@rajaasyraf25 you're welcome 🙏☺️

Hi, I'm not using livewire so I can't tell 😅 to my knowledge people say it's actually easier in livewire. However dispatching an event is just the same: broadcast(...) or event(...) from your controller methods or wherever you need to dispatch the event.

@@glennraya yes it's normally very easy to dispatch but I have a problem that I don't know where he is from

What node version are you using? Puppeteer requires node version 18 and up.

@@glennraya I personally was using node 22 but face the error @jimmyarb7767 is probably referring to. Issue was with node and puppeteer

I'm planning that video, others privately messaged me and they were able to deploy it in production, maybe your nginx/reverb is misconfigured.

@@glennraya might be

@@codegamer69 It's highly likely, one person even messaged me that he was able to deploy this in a React Native app, with Laravel as its back-end API.

FB group po pa yun? haha

Yes, it supports all modern browsers.

In the example I used Laravel's NextJS scaffolding which is in regular JS, if you want to use typescript, you need to install a brand new nextjs via npx then configure it to use typescript, you can refer to nextjs docs for that.

Yes sure, I'll push it to github and linked on the description.

github.com/glennraya/browsershot

@@glennraya i got the below error when i generate pdf in windows.I already have node installed in the system.How can i solve this The command "node "D:\wamp64\www\browsershot\vendor\spatie\browsershot\src/../bin/browser.cjs" "{""url"":""file:\/\/C:\\Users\\Ajmal\\AppData\\Local\\Temp\\896216291-0639441001719154368\\index.html"",""action"":""pdf"",""options"":{""path"":""D:\\wamp64\\www\\browsershot\\storage\\\/app\/reports\/example.pdf"",""args"":[],""viewport"":{""width"":800,""height"":600},""displayHeaderFooter"":false,""margin"":{""top"":""4mm"",""right"":""0mm"",""bottom"":""4mm"",""left"":""0mm""},""format"":""A4"",""printBackground"":true}}"" failed. Exit Code: 1(General error) Working directory: D:\wamp64\www\browsershot\public Output: ================ Error Output: ================ 'node' is not recognized as an internal or external command, operable program or batch file.

ahaha, salamat po! 😆

Hi, in the description of the video, I mentioned an update there regarding returning the response of the auth token as cookies, but you can instead return it as json, return response()->json(['token' => $token]); It will ensure that the token won't have an expiration by default.

Thanks for your kind comment. Good luck on your projects. You may check my other videos related to Laravel Reverb. ☺️🙏

Thank you! ☺️

Yes, I'm aware of the Pusher is not defined error, to what I remember, you only need to put the window.Pusher instance in the useEffect hook. If you try to remove pusher, it won't work. I think Echo is using some of Pusher's methods, maybe that's why it is still needed and was included in the docs to be installed.

Palenight theme.

Thanks for the comment, you have to make sure that REVERB_HOST is set your local domain "example.test" and your REVERB_SCHEME is set to https. In some dev environments, some do encounter this issue on Firefox, so far I don't encounter this. Kinda unpredictable, but it should work normally in production.

@@glennraya Thanks for the answer, I already have the env set with the correct data. But i am already at this for 2 days and i slowly lean to giving up :/

If you're developing on Windows but it's working on Webkit browsers (chrome, edge, etc.) it should be fine, other people also have this issue on Firefox on Windows because Firefox seems to have been rejecting local SSL, in production it should be fine. On macOS though, it seems to be ok.

@@JordanJanevski I suggest removing the local SSL and testing it on HTTP only (without SSL), and it should work. I also talked to other people regarding this, and their issue is that the local SSL on Windows seems to be not working on all browsers.

@@glennraya After disabling the SSL in herd, and changing app url and reverb scheme to http, I dont see any differences. I still see the error in the console being for wss.. is windows this bad or is it just me? x.x its the same for both chrome / firefox

Thanks! The theme is "Github Dark Palenight"

SPA is a web app that loads only a single HTML page and typically updates only the contents/data that needs to change. In contrast of traditional MPA (multi-page app) where all data are loaded everytime. On first launch, the backend will respond to a request to deliver the contents (along with the necessary JS/CSS files) which is then rendered/initialized.

@@glennraya thanks a lot and keep up with your work, I will share this video with my friends.

@@chandrashekar-us6ef Thank you! You might want to check out the curriculum at Udemy. Thanks.

and also what theme are you using?

Thank you, I used nextUI for some of the UI. It's the Laravel Breeze scaffolding.

@@glennraya what font are you using for this project?

@@JSONFX Github's Monaspace code fonts (Monaspace Neon).

That's the plan 😀

Since this is in a local development environment, it doesn't need to.

@@glennraya are there any additions required for wss, assuming an ssl certificate and https are already implemented

@@darck5240 Yes, if you're using wss, you need to specify the actual domain name in your .env file for the REVERB_HOST, and the REVERB_SCHEME should be 'https' instead of 'http'

@@glennraya Thank you for your help and time. however something still seems to be missing since postman is only connecting on ws and not wss. i'll come back here and comment if i ever find the solution, great tutorial though keep it up ✌

@@darck5240 There's a guide for using SSL with Reverb on Laravel's docs.

Hi, absolutely you can. If you watched this video the implementation in vuejs should be similar. The only difference would be for example, you would place the Echo event listeners inside of the onMounted() hook in Vue, instead of inside the useEffect in React of course. You can use Reverb in any front-end framework (React, Vue, Svelte, Gatsby, Next, Angular, etc.).

@@glennraya Thanks man. I appreciate it.

@@glennrayaBrother, I am using vue 3 with vite and typescript. How can I make these configurations in typescript?

@@TM-ss8ch what specific configuration?

@@glennraya I mean how can I subscribe to my channels in vuejs with laravel echo, and listen for events. The laravel echo has a file in echo.js. I can't use that because I am already using typescript. So I have to adapt it as a ts in my main.ts file I think. And then listen to channels for events. But I cant find the correct ts syntax. My vue app is separated from laravel.

Hi, in the video I specifically discussed integrating Reverb with NextJS. I used the NextJS scaffolding for Laravel made by the Laravel team themselves, and it's mentioned/discussed in the video at the beginning.

Yes, absolutely. The implementation should be the same in a React project, the same is true with other frameworks.

I m facing problem since 2 days last night I found your video on RU-vid. this is my code snippet if you can help me this is my front-end side code useEffect(() => { if (echo) { echo.private(`order`) .listen('orderEvent', (e: any) => { console.log('Real time event', e); }); } }, []) event trigger from back-end code broadcast(new OrderEvent($order->toArray()))->toOthers(); but I dont get response in my console

@@warisrazaarain1544 First, you should ensure that you are accepting the event payload in the __construct() method of your OrderEvent class. And also, since this is a private channel, you should accept the "id" of the currently authenticated user in your channels.php route, ex. 'order.{id}'... That is discussed in my first Reverb video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jMcIE1hnaYw.html

I receive data in my browse`s network message after adding new record but not in the console these are the screenshots screenshot

@@warisrazaarain1544 If it doesn't print on the console, it's likely there's an issue on your Echo event listener on the frontend, check your syntax and in your code example ( echo.private(`order`)), you didn't specify the id of the currently authenticated user or the id of the one who should receive the event: "echo.private(`order{id}`)"

Thank you! I would consider it. 😊

I haven't tried it in React Native, but if you can pull npm packages in React Native and if it supports protocols for websockets, I think it would work.

​@@glennraya yes, we can do this, I´ll try to implement using laravel as "websocket-backend"

​@@glennraya bro, I'm trying to do this, the connection is working, it's just not subscribing to any channels, are the "Authorizing Private Broadcast Channels" steps in "SPA Authentication" mandatory for "Mobile App Authentication"? what do you think?

@@misterjs023 Yes, I think you should implement the authorization of private channels as well in mobile apps, additionally, I got some "update" notes in the video description, in your Laravel backend, in the authentication part, you can just return your tokens as "JSON response" instead of cookie, you might get an issue logging in (but should still work).

@@misterjs023 In your Echo events, it should accept an "id" of the currently authenticated user or the id of the user who can listen to an event, for private channels that is required.

I haven't tried that setup yet, but it should be fairly easy to setup in production servers.

@@glennraya Thanks for the feedback! Maybe when you have some free time, you could make a video explaining how to put it into production on a local server. Lay people always wanting to learn from the best. Thanks again and stay focused on helping others!

@@TheHenriquesbr Yes, I actually planning the video for deploying Reverb into a production server, a VPS with a domain. Thank you for your feedback! ☺

Thanks, I will post regularly. ☺️

Yes pwede po.

If you are going to pair Laravel API/Reverb in this case with NextJS, your auth provider would now be Laravel itself since it's your backend provider.

NextAuth.js is third party, and will be renaming to Auth.js. I would not call it its "own auth framework" since it's not included in NextJS