Why Sidecar for Vapor0:38
Basically what we've kind of been doing, interacting with headless Chrome and using Chrome to visit webpages and do stuff, right? BrowserShot makes this super simple with this really great Laravel interface, but if you look at the requirements of BrowserShot, it requires Node and Puppeteer, and so now you're managing infrastructure. So if you look, they show you how to do it on a Forge provision server, you have to do all of this stuff. That's maybe fine. There are cases when you either don't want to do that, or you can't do that. You cannot do this on Laravel Vapor, for example, because Vapor is a serverless platform.
There are cases when you either don't want to do that, or you can't do that. You cannot do this on Laravel Vapor, for example, because Vapor is a serverless platform. So there's no server underneath it that you can come in and set up Puppeteer. And that is where Sidecar comes in. Stefan Zweifel has created a package called Sidecar BrowserShot that lets you use BrowserShot, but it runs the browser on AWS Lambda through Sidecar. So with the combination of BrowserShot and Sidecar and Stefan's package, you're going to see just how easy it is to get BrowserShot running when you don't want to manage infrastructure or you can't manage infrastructure. Let's look at the installation.
Installing Sidecar BrowserShot1:45
or you can't manage infrastructure. Let's look at the installation. It's just a Composer package, so we'll copy that, and composer require sidecar/browsershot. Okay, that's done. It looks like we need to register the BrowserShot function in our configuration file. This is what we've been doing, so we're used to that. We'll come into Sidecar, and we'll get rid of, just for now because we don't need it, we'll get rid of our browser function and we'll include Stefan's browser function. Just for fun, let's peek into this function and see what's going on. You'll see it's basically exactly what we've been doing.
Exploring the Lambda handler2:18
Just for fun, let's peek into this function and see what's going on. You'll see it's basically exactly what we've been doing. It's a function that extends Lambda function. The handler is BrowserShot::handle. This is the same as saying BrowserShot at handle. I added the at handle because it's a little more familiar to Laravel developers. Dot handle works perfectly fine. If you look in the package, you'll see he's using the more customizable, controllable way to build up the package using this helper class. That's because he's actually creating a file out of a raw string.
way to build up the package using this helper class. That's because he's actually creating a file out of a raw string. There is no browser.js file anywhere on the file system. We're creating that from a string. What this does is it gets the Puppeteer reference from the layer in the Lambda. We take Spotsy's BrowserShot and we replace their reference with Puppeteer from ours, which this will look familiar. This is what we were doing earlier. This is the Chrome AWS Lambda layer. So now, instead of having to write our own browser control function, we're just taking
This is the Chrome AWS Lambda layer. So now, instead of having to write our own browser control function, we're just taking Spotsy's and swapping a variable around. The next thing we do here is use this includeExactly method. What this does is it gives you full control over where the file ends up inside of the zip file. You can see we're pulling from Lambda BrowserShot.js and putting it at the root of the zip file as just BrowserShot.js. We can take a look at that for fun, too. We'll come out here, Resources, BrowserShot.js, and this is the handler that is going to be
We can take a look at that for fun, too. We'll come out here, Resources, BrowserShot.js, and this is the handler that is going to be executed on Lambda. We don't need to get into all of this right now, but it's really interesting to look at. It's just a thin wrapper around Spotsy's execution methods. The last thing I want to look at is the layers. We're doing the same thing here. We're pulling the Chrome AWS layer, except he's made it more intelligent because it is a library. He's looking at the configuration file to see which region you're in and then just plopping
Deploying the Lambda function4:22
a library. He's looking at the configuration file to see which region you're in and then just plopping that in the string. This is kind of cool to look at because you can see how you might be able to package up a sidecar function and ship it as a library like Stefan has done. Okay, enough looking at that. We need to deploy this function to Lambda. It's the same as it always is, sidecar deploy, activate. Now that that's been deployed, how do we actually use this thing? Looking back at the README, it looks like we can use BrowserShot Lambda just like BrowserShot.
Using BrowserShotLambda in app4:48
Now that that's been deployed, how do we actually use this thing? Looking back at the README, it looks like we can use BrowserShotLambda just like BrowserShot. All we need to do is switch out BrowserShot with BrowserShotLambda, which is pretty cool. I'm not going to copy any of these examples because I want to show you how nice this interface is. Let's go back to WebPHP. We'll get rid of all of that. We'll return BrowserShotLambda. The nice thing that I wanted to show you here is we get all of our autocompletions from Spotsy's BrowserShot because BrowserShotLambda extends BrowserShot so it's as if you're
The nice thing that I wanted to show you here is we get all of our autocompletions from Spotsy's BrowserShot because BrowserShot Lambda extends BrowserShot so it's as if you're just using Spotsy's class. Let's go to Laravel.com and let's return a screenshot. Coming back to the browser, we'll refresh and we see that, I mean, that kind of worked. That's exactly what we told it to do. It sent us back a PNG. We didn't set the headers correctly, so if we change this to image equals, now we're returning the image as the response body, but we're also setting a content type header, which tells the browser, hey, this is an image.
