 Welcome everybody, my name is Randy and you're watching my channel, Randy the Brand. Today, I have a very quick video for you. We're going to explore the note library called Puppeteer. There is a lot of stuff that you can do with it, but today in particular, we're just going to be exploring the screenshot generation. But if you want to check out the library, you can go to npmjs.com slash packages and I will also link this in the description below. You can just explore some of the options and some of the things that you can do such as crawl a single page application to generate pre-rendered content. You can do automated forms, submissions, UI testing, keyboard input and so on. There is a lot that you can do. Just visit this page and have a look. Anyways, now let's get started by creating a project and I have already created a folder called note-puppeteer in here. So let's initialize our project and I'm going to do this with PowerShell because I am on Windows. But of course, if you're Mac, use a terminal or Linux. So let's do npm init and this will initialize a new project for us and we need to give our project a package name. And I'm just going to call mine node-puppeteer just like this. And for the rest of the questions, I'm just going to press enter a bunch of times and press OK. And this should create the package.json file for our project in here. Let's open this folder in Visual Studio Code for me. But of course, feel free to use whatever editor you're most comfortable with. It doesn't really matter. So this is Visual Studio Code and let's open packages package.json. So inside here, as you can see, we have a very small json file, but we need to add nodemon so we don't have to restart the server every time we make a change. And also we need to install puppeteer. Let's get started by installing nodemon. And to do this, we're going to go to PowerShell again. Let's clear this. And let's do npm install dash dash save dash there. And then nodemon just like this. And once we're done, let's now install the puppeteer as well. So npm install puppeteer just like this. Press enter and this should take a few seconds to install. Okay. Now that we have puppeteer installed, we can go back to the package.json file. And as you can see, we have the dev dependencies here nodemon. And we have the puppeteer dependency installed, which is great. And now if you wanted to start a project with nodemon, we can just do underscripts start column and then nodemon. And then we need to provide the name of our application file. So for me, I always call mine app.js and then comma. Now when we run this, this should run the app.js file, which we haven't yet created. So let's create that new file app.js. This is where all app will be created and so on. Save this. Let's go back to the PowerShell and let's make sure that everything is working by running our project. So we can do npm start and hopefully we should see that the application is now starting with node app.js and everything is working well. So for this application, we're not going to be using express or anything like that. So we're going to be seeing all the outputs in the console. And we are also going to be creating screenshot files in our project folder. So let's move this to the right side and move this to the left side. And maybe we can make this a little bit smaller. Of course, I could open the terminal in Visage2D code, but I don't really like it that much. I like having a separate terminal just because it's a little bit better to see it. Let's start by building our project. Now, the first thing that we need to do is require puppeteer. And to do this, we can do const puppeteer, puppeteer equals require. And then we can require puppeteer just like this. Then we need to do an async function. And to do this, we can do async to the function just like this. We need to run it. Okay. Now, everything for our application will be living in this async function. And let's get started with the first thing. And the first thing that we need to do is launch the chromium browser. So we can open the URL and take the screenshot. So to do this, it's actually fairly simple. We can do const browser. And then we can do await puppeteer launch just like this. And we could actually open the chromium browser headless, which I will show you in a second, but I'm just going to leave it like this. As default, the headless is turned to true. So I'm going to leave it like this. And then we need, now we basically need to create a new page. And to do this, we need, we can do const page equals, equals await browser. And then browser dot new page just like this. And now we need to provide the URL for the page that we need to open. To do this, we can do await page dot go to, and then we need to pass the URL of the page that we need to open. And for this example, I'm just going to use my block. So we can do HTTP slash column slash slash ready.co.uk. Make sure we close this. And now we can actually take the screenshot and save it into our local folder. And to do this, we can do, we can do await page dot screenshot. And then inside here, we need to provide an object of the path and also the name of the file. And let's do this path. And then we can just use the current directory. So I'm just going to do, so I'm just going to give the screenshot a name in this case. So let's call it screenshot.png. And we actually should be good to go here. And the last thing that we need to do is close the browser. And to do this, we can do await browser dot close just like this. And this should close the browser first. Now, if I was to save this, because we're using Notemon, you should be able to see that our app just restarted. And here on the left side, you might have noticed that we have a new file called screenshot.png. And if I was to click this in Visage to Decode, you will see that we are getting an image. And I believe that the default value for the screenshot is 800 pixels by 600 pixels. As you can see, I think it's roughly around there. And this is the screenshot of my live website. Now, there is a lot of stuff that you can do. And let me first of all start from the top. Now, the first thing that I wanted to show you is that we can actually set custom width and height for the screenshot. And to do this, it's actually fairly easy. We can set page viewport. So let's do page dot viewport. Set viewport, excuse me. And inside here, we need to pass an object which will take width. And let's put the width of 1, 3, 0, 0, something like this. And let's add the height as well. And let's add the height to be something like 2,000. We can also pass the device scale factor as default. I believe this could be one. But we can experiment with this. In fact, let's experiment with this as well. So let's do device scale factor. And let's set this to 1 and see what happens. I'm going to make this a little bit smaller. And let's make this a little bit smaller as well. And let's say, now currently at the moment, because we just reset the server, you didn't see, you might have expected that there would be another file. But now this currently actually just replaces the current screenshot file. But we can sell this in a second. So let me open this now. And as you can see, the screenshot is much larger now. So if I can zoom in here, which is, oh, I can actually zoom in. So this is also, as you can see, the height is 2,000 pixels now. And the width, I said to be 1,300 pixels. So you can change the width to whatever you like. And I believe that there is also device options. So device, so you can set different device names like iPhone. And you will do the iPhone screen size. But okay, it's not in here. Okay, it's not here, but you can do that. Okay, it's not here, but you can do that. And you can do all sorts of other stuff. But the last thing that I wanted to show you is how we can actually generate other screenshots. Because currently we're literally overriding the screenshot.png. Let's make sure that every time we run our script, it actually creates a new screenshot. And to do this, I'm going to cheat here a little bit. And I'm just going to do this with the slanted single brackets like this. And I'm just going to add the date now to create a unique file name. So what we can do is date.now like this. And hopefully if I save this, this should just do the screenshot with the date now. Obviously, this is not formatted well, but at least it gives us a unique file name. And as you can see, we have a new file. If I was to reset this again, hopefully we should get another file now. Yeah, we're getting another file. And let's say we resize this to be something like for mobile or whatever. Like let's say 400 pixels and we can leave the height. Let's save this. And as you can see, we have a new file here. And if I open it, you can see that this is like a mobile website and so on. And of course, you can do all sorts of stuff. Maybe you can set this to take screenshots every hour of your website or whatever. You can actually tell it to do specific coordinates, which is pretty awesome. And a really good idea for this could be to develop like a heat map of a website and so on. Well, I know this is a little bit short and very easy to do, but I hope that you found it useful. And this is everything for this video tutorial. I hope you liked it. I hope you found it useful. I know it was a quick one. But if you did find it useful, make sure you subscribe by hitting the red button below. And till I have another list, don't be afraid to say hello in the comment section below. And I will see you in the next video.