Running Browsershot with Laravel Sail on M1 Apple silicon #711
Replies: 11 comments 16 replies
-
|
Works for me (using the same approach on Windows with WSL)! Thanks for sharing Johannes. |
Beta Was this translation helpful? Give feedback.
-
|
oh my goshhh . 100 points for this |
Beta Was this translation helpful? Give feedback.
-
|
A little contribution to this great post. I needed to use Dont know if is possible change the dir where the temp view file stores though. That would be interesting, since we could create custom volume and not necessarily /temp dir. Yet this works for me. Again thnaks @Johannes-Werbrouck for this post |
Beta Was this translation helpful? Give feedback.
-
|
in my situation when I print google thank you for your help! |
Beta Was this translation helpful? Give feedback.
-
|
In my example, the laravel container is different from the chromium container. if you do |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
If I read this correctly, you are just sharing the |
Beta Was this translation helpful? Give feedback.
-
You need to share te browsershot tmp files directory, which defaults to /tmp in linux. Otherwise, you are sending to the container one file path that does not exist. Check in my answer how I shared the /tmp dir across both container, althought you can also set a custom tmp dir for Browsershot and share that volume between containers(would be great if you post that here, for future references).
Anyway if you could be most explicit about what error throws or if blank page case, the better |
Beta Was this translation helpful? Give feedback.
-
|
If nothing helps you, maybe this can tell you if any error is happening, as last and despered resource only.
Just add a debug in Browsershot:894, because maybe the command is sending some error back alongside a sucessfull response |
Beta Was this translation helpful? Give feedback.
-
|
Just come accross this thread and given it a try on my setup but get an error relating to the IP address.
Here is my docker compose. Does anyone have any ideas about what I might need to do differently? |
Beta Was this translation helpful? Give feedback.
-
|
Hello everyone, I am very grateful @Johannes-Werbrouck for this post as it has helped me greatly. I also want to share my solution, which may be useful to someone. chromium:
image: zenika/alpine-chrome
command:
[
chromium-browser,
"--headless",
"--disable-gpu",
"--remote-debugging-address=0.0.0.0",
"--remote-debugging-port=9222",
]
cap_add:
- SYS_ADMIN
volumes:
- tmpfiles:/tmp
ports:
- "9222:9222"
networks:
sail:
ipv4_address: 172.22.0.1002)The chromium service-container use a static IP, so we need to update our sail network: networks:
sail:
ipam:
driver: default
config:
- subnet: "172.22.0.1/24"3)In the next step, you should update volumes: volumes:
tmpfiles:
driver: local4)Don't forget add this volume to your service-container with laravel: services:
laravel.test: # Here will be name of your service-container
...
volumes:
- 'tmpfiles:/tmp' # This line
- '.:/var/www/html'
...
depends_on:
- chromium # This line tooItem 5: Rebuild docker # Step 1: Stop the containers
./vendor/bin/sail down
# Step 2: Rebuild the containers without cache
./vendor/bin/sail build --no-cache
# Step 3: Start the containers
./vendor/bin/sail upThats all, now you can use browsershot like this $bs = Browsershot::html($html)
->format('A4')
->showBackground()
->margins(10, 10, 10, 10);
if (config('browser-shot.HOST')) {
$bs->setRemoteInstance(config('browser-shot.HOST'), '9222')
->waitUntilNetworkIdle();
}
return $bs->pdf();for convenience, i have created browser-shot.php in config directory <?php
return [
'PATH_CHROME' => env('PATH_CHROME'),
'PATH_NODE_MODULES' => env('PATH_NODE_MODULES'),
'HOST' => env('BROWSERSHOT_CHROMIUM_HOST', '127.0.0.1'),
'NODE' => env('NODE', '/usr/bin/node'),
'NPM' => env('NPM', '/usr/bin/npm'),
];Don't forget add this line to your env file BROWSERSHOT_CHROMIUM_HOST=172.22.0.100 Have a good day! |
Beta Was this translation helpful? Give feedback.
-
|
This worked like a charm. Thanks @ArtemPD and @Johannes-Werbrouck |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the great install docs. Everything makes sense but my system still reports "Error: Cannot find module 'puppeteer'" :( Full Error (the new IP as remote seems to be used)
|
Beta Was this translation helpful? Give feedback.
-
|
I encountered the same error. Any fix for this? |
Beta Was this translation helpful? Give feedback.
-
|
It may be pretty late, but thanks for this information. This worked perfect on my Mac M1! |
Beta Was this translation helpful? Give feedback.
-
|
Great solution, and some good writeups. Is there a reason that the chromium container must use a static IP? I'd like to get this working over a bridge network and use the built-in name resolution instead - but it seems when I do this, something fails and browsershot is falling back to trying to run chrome in the app container. |
Beta Was this translation helpful? Give feedback.
-
|
I think Browsershot (Puppeteer, really) can only take an IP address as the remote instance, not a hostname. Here's why I suspect this is the case:
|
Beta Was this translation helpful? Give feedback.
-
|
Yeah, there was some deeper issue in the puppeteer/chrome interface that forced the IP address. We were able to resolve the problem by setting up two networks - a bridge and an ipam/default one. Most of the containers (mysql, redis, etc) are on the bridged network letting us use service name resolution, the chrome container was on the second network, and the main app container was on both. Seems to be working well enough. |
Beta Was this translation helpful? Give feedback.
-
|
For anyone who struggles with setting up fixed IP addresses, here is a small workaround we use: Add on top of that some caching and that should be fine. On production environment setting the env to 127.0.0.1 bypasses all that. |
Beta Was this translation helpful? Give feedback.
-
|
@horuskol would be great if you can provide example of how you resolved problem by set |
Beta Was this translation helpful? Give feedback.
-
|
Would this work similar on amazon graviton instance t4g ? |
Beta Was this translation helpful? Give feedback.
-
|
Trying to get this up and running, also trying to pass a view to browsershot, not using the url method. I'm getting the error:
Presumably I've misconfigured the volumes or something. I noticed one person on this thread had a solution involving adding a volume for 'tmpfiles:/tmp', and another person added I'm not sure how to get this working. Any ideas? I guess I'm not understanding why it's looking for a file. My UPDATE: I added this line and now I get UPDATE 2: In case this helps anyone else, I ran: Which allowed it to work. It generated the PDF, however, it has no styling :( but that seems like another issue. |
Beta Was this translation helpful? Give feedback.
-
|
Make sure the view ( |
Beta Was this translation helpful? Give feedback.
-
|
I do have a separate layout that I'm extending for the pdf views. I was able to get this working, but I forget now what the missing piece of the puzzle was.. |
Beta Was this translation helpful? Give feedback.
-
|
I'm struggling with this right now as well (getting the styling / javascript output from vue to generate). I will post an update if I get it working. |
Beta Was this translation helpful? Give feedback.
-
|
OK, friends. Figured how to get it working for me in my configuration vue3 + vite It boiled down to realizing there was probably some kind of issue with the communication between the chromium container and my Laravel container. To see what was going on, I did the obligatory die/dump to review the consoleMessages from the URL being accessed by Browsershot dd($pdf->consoleMessages());I saw a bunch of ERR_CONNECTION_REFUSED errors like: Note localhost... I noticed after shelling into my chromium container that I could not wget into localhost or 127.0.0.1, but I could access laravel.test (this is likely due to Docker's isolation practices, etc...) I then modified by .env APP_URL=http://laravel.test
APP_SERVICE=laravel.testlaravel.test would be whatever the main service in your docker-composer file is called I then modified the server block of my vite.config.js file: ...
server: {
cors: true,
hmr: {
host: 'laravel.test',
},
host: 'laravel.test'
},
...I realize this configuration may not be helpful for those of you running sail/docker in production, but this is what I needed to do locally for development. Note: I'm using an arm64 silicon (like I assume most of you here are). To ensure I could access laravel.test from my browser I modified the /etc/hosts file on my Mac to look like the following: /etc/hosts |
Beta Was this translation helpful? Give feedback.
-
It's work for me. Thank you @Johannes-Werbrouck |
Beta Was this translation helpful? Give feedback.
-
This is a guide for getting Browsershot to work on Apple silicon macs. As many have experienced, getting Browsershot fully functional in a Docker environment is not easy peasy lemon squeezy on macs with Apple silicon. The main issue is this: One of the requirements is the installation of puppeteer, which will install chromium automatically. But, on M1 (or M2) macs, there is no chromium package available for the arm64 architecture. Now, you could be tricked into setting the platform tot amd64 in your docker compose file, but that will open a can of worms you really want to keep closed. In short, it'll string you along by making you think it's technically possible, but the virtualization will ultimately prevent you from getting the chromium package to work.
So, what is the solution then?
It is possible to install Puppeteer and Browsershot in your laravel container, and point Puppeteer to a different container that has chromium installed. Cue the Alpine-chromium image from Zenika: https://github.com/Zenika/alpine-chrome . This is a small image that just runs chromium headless, exactly what we need!
We'll need to adjust some settings, so here's what I added in my docker-compose.yml:
Notice the networks section: The chromium container gets a static IP. To enable this, we need to change our sail network a bit, it will look like this:
And finally, here's how I use Browsershot:
The chromium container doesn't have these assets on its filesystem, so I'm using url() instead of html() so all the assets (css, js, images) are served correctly from the Laravel container. The showBackground() is to insure that all Tailwind classes are loaded properly.
I hope this helps, and don't hesitate to give feedback!
Beta Was this translation helpful? Give feedback.
All reactions