Developing a Netlify Build Plugin to Optimize Web Media with Cloudinary

Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk about interesting, innovative, inspiring development projects done by our Cloudinary community. And of course, because they are Cloudinary community members, they probably use Cloudinary in those. I’m Sam Brace. I am the director of customer education for Cloudinary and joined me for every one of these DevJams.

Episodes is Becky Peltz, who is our curriculum program manager for developer education. So Becky, welcome back.

Becky Peltz: Well, Hey Sam. Um, I’m really excited to be here. And, and, and, and it was, this was a fun episode because for working with our colleagues here at Colby Fayock, and, you know, he’s always a pleasure to work

Sam Brace: with.

He really is. I got to tell you, since Colby has come on as a member of our developer evangelism, developer relations team, he’s just made such a massive impact. And we normally don’t [00:01:00] profile people that work Cloudinary because they know all the things to do with cloud. But he developed such an interesting project working with Netlify and building a build plugin to automatically optimize all of the images, all of the videos that are being delivered on a web application web.

Via Netlify and it’s something you can even use today. So if you are a Netlify user, you can go and attach this plugin to your account and start using it and getting the nice magic of all of the automatic formatting and compression when it comes to quality for your overall project. This is where we walked through it all with Colby, understanding exactly how he built it, why he built it and not just about the Cloudinary aspects of it, but just developing the overall plugin and submitting it and working with Netlify for so many things that we talk about with him in this episode.

Yeah.

Becky Peltz: And he uses some really nice, um, Cloudinary technology [00:02:00] for accessing remote images. He uses our fetched delivery type and by using them. You don’t have to like, do a big migration to get your images into Cloudinary, to work with Cloudinary. And so I think it’s interesting as you watch the episode to see how he does

Colby Fayock: that.

Sam Brace: Yeah. I completely agree. And it’s definitely where I think there were so many nuggets in this one, guys that I think this is going to be an episode where if you’re doing anything, when you’re working with the JAMstack, when you’re working with images and videos, if you’re. Anything where you’re just trying to understand how do I build this thing to benefit the overall user community of this application or overall site that I really love.

There’s so many things that Colby teaches us here in this episode. So I don’t want to waste your time anymore. I think me and Becky could go on all day gushing about how good this episode is going to be. So let’s just get into the episode and let’s have you listen to it. And then at the [00:03:00] end, come on back because we have some key takeaways for you about the things that COVID.

Colby. Welcome to the show.

Colby Fayock: Thank you so much.

Sam Brace: So Colby, you’re a little bit different than every other guests we’ve ever had on DevJams up to this point because you actually work with us at Cloudinary. Normally we’re talking to people from the outside that are doing really awesome things with Cloudinary, for part of their development projects, but you actually happen to work with us.

So this is a, this is a treat to be able to talk with you about the things that you’ve been doing since you’ve started as part of.

Colby Fayock: Yeah. And it’s been a fun journey so far. It’s only been, I guess, a little over a month now. And, um, I’ve just been having a lot of fun playing with all the different, uh, new Cloudinary APIs that I’ve been learning about.

And, um, one of the things has been this Netlify plugging that I’ve been messing around with so excited to chat about it

Becky Peltz: and happy to hear about Netlify plugins. We haven’t talked to anybody that’s, that’s created one and it’ll be fun to see how that works.

Sam Brace: Absolutely. So before we get into that though, Colby, [00:04:00] I do want to give people a little bit of context.

Cause obviously we know who you are. I knew about you before you started Cloudinary, but in case that our listeners and viewers haven’t been privy to the awesomeness of the Colby, can you just give us a little bit about who you are, how you got to Cloudinary and maybe some of the things that you’re doing here now that you’re a part of.

Colby Fayock: Sure. So I’m Colby Fayock. I made a developer experience engineer. Uh, I’ve been with, again, I’ve been culinary for a little over a month now, but I’ve been talking to the team for a little while now, uh, since right before the pandemic and it finally worked out. Where I now joined the team. Um, I kind of focused on trying to help bring developers, uh, specifically to solve their challenges with media.

So, um, hopefully that’s with Cloudinary, you know, but ultimately my goal is to help the developers, uh, accomplish their goals. Um, I kind of started off as a front end engineer and UI designer and transitioned into. Developer relations, developer advocate, a roll from there. Cause I just enjoy [00:05:00] teaching and helping create content for developers to learn.

Um, so that’s kind of where my journey came from, uh, to this role.

Becky Peltz: Hey, you know, I’ve watched you on a rapid learning path here at Cloudinary too, and I’m interested in like kind of how you learn and how you share what you learned.

Colby Fayock: Sure. Uh, so for me, it’s, I like to learn by just diving in. I like to kind of say learning by doing, um, cause that’s for me the best way to learn where, um, instead of trying to like read through a bunch of stuff, I just like to spin up a new project and try to.

Work my way through the tool, uh, whether or not I’m fumbling through it, you know, trying to work through any of the documentation, just, uh, try to make it work and see what I learned along the way. But that’s proven pretty well for me so far. And then once I do learn that I take that and I try to teach other developers in a, in a way that, uh, you know, I found it helpful to kind of explain, trying to cover some of those details that might not traditionally be covered, um, by other people’s, uh, educational.

When I

Sam Brace: have to say Colby, like [00:06:00] basically about the program, I think your learning style and your, the way that you approach it almost fits exactly how the plugin came about. At least from the outside perspective, because it almost was like day one. Colby’s working for us. They too, the plugin is here. So it was definitely a gateway.

I feel like the learning by doing is definitely something that we had here, where this was your first chance to develop a project to Cloudinary. That was now part of your full-time work with Cloudinary. And you just dumped, jumped in hands. First feet burst into the project, which I was really impressed.

Becky Peltz: I’ve noticed that you are great at asking questions. I see you on many slack channels and you reach out and, and that I think is a superpower. So question our great,

Colby Fayock: awesome. Yeah. I always hope that I’m not asking you too many questions, but, uh, now I’m, I’m eager to learn all these things and try to make it through.

But yeah, I’m a big Netlify fan. And I saw an opportunity there because I tried to search around and see if there was any existing work on that. And there’s not. So I saw an opportunity to kind of both learn about. [00:07:00] Learn more about the Netlify plugging process and, uh, try to build something that would help people get pretty, uh, broad coverage, other applications.

Cause it’s a nice, nice way to fit that in through that process. So

Sam Brace: talk to me a little bit about Netlify, cause we’ve mentioned Netlify in different ways throughout the program. Obviously we have a great working relationship with that company as well, but why are you a super fan or why are you a fan?

Maybe I put too many words in your mouth when I said super fan, but why are you a fan of Netflix?

Colby Fayock: Yeah. So I think Netlify at its simplest. A lot of people consider it a hosting company, but it’s a lot more than that. It’s like an automation auto dev ops. I like to call it a where they really handle a lot of that process for you in terms of taking a website that’s traditionally stored in some kind of get provider like a hub, um, taking that code and deploying it out to the world, but also all the processes around that.

So building that site, um, providing things like plugins to transform that say, uh, the delivery of that site where a lot of those things. Take a lot of effort. If you’re [00:08:00] doing it manually on your own a cloud provider like AWS or something like that, where it’s a really powerful platform, but Netlify just makes that process super smooth.

And it was actually one of my entry points into the JAMstack world where I just, the first time I deployed a site with Netlify, I was just amazed at how easy it was and coming from a team where I had to mainly do that with AWS all the time. And again, this isn’t putting down 80 Ws to be clear. Um, but now if I just make that so smooth, it was such a beautiful thing.

And, um, I’ve always been a fan since then. I

Becky Peltz: think they’re currently referring to AWS now is bare metal. Whereas if you’re working on that, , it’s like you’ve got a dev ops team working

Colby Fayock: for you. Yeah. And no, and I think that’s, uh, like there’s a lot of really powerful things you can do with AWS, but you have to do some of the things more manually, right?

So like as a front end engineer who doesn’t necessarily care about all that stuff, I just want to get my, my application deployed to the world and Netlify is a beautiful solution. So now

Sam Brace: that like, we know that you’ve developed this plugin, we’ve [00:09:00] referred to it, like in 10 different ways and like Ms.

Ancillary way, I think it’s, this is a good time for us to actually talk about this thing. What is the thing you actually developed?

Colby Fayock: Tell us about the. Sure. So I created a Cloudinary plugin for Netlify where, uh, what it’s going to do is on the, within the life cycle of the Netlify process, after the site is built, and you have all of your static files, uh, this plugin will go through and it’ll replace all the images that it can find with Cloudinary images.

So it’ll use your hosting, uh, your Cloudinary account cloud name. It will replace it with Cloudinary URL so that ultimately you’re serving those files from clutter. Now, why would we want to serve it from flattery? Yeah. Standing up here trying to advertise for Cloudinary, but you get a lot of awesome things like out of the box with this.

Um, the two that I love the most, because they’re easy is the auto format and auto optimization where it’s going to gracefully compress your image to what needs to be so that it still looks like a great image, but it’s going to reuse that file format, but also the, the auto format where we can serve modern.[00:10:00]

Image formats to the browsers that can actually support that, uh, which can in sometimes greatly reduce the file size, which is a huge win when you’re trying to serve websites to people all over the world who, who knows what kind of internet connection they have.

Sam Brace: I think one thing that I, that stood out to me was just the fact that like you decided to go the route of building the plugin, like.

But I also know there’s lots of different ways to do this. Like just do like local functions and whatnot. Why did you decide to take the route of creating the plugin and Ms. Case? I mean, other than just being able to understand the Netlify ecosystem a little bit better potentially, but what, what was your reasoning for that versus local?

Colby Fayock: So the biggest reason is just simply trying to make it as easy as possible for somebody to just flip on that switch and serve the images from Cloudinary. Um, just because of that broad coverage, you don’t have to think about how, where the images are, how they’re served. Um, you don’t need any special functions, which of course provides you a lot more capabilities on top of that, such as cloud transformations.

Um, but being able [00:11:00] to do this in such a broad way, just gives so much benefit without really having to think.

Becky Peltz: Well, I think you also discovered that you can take advantage of Cloudinary without having to upload all your images there. You made it kind of a, a lazy optimization through your Netlify plugin.

Colby Fayock: Yeah. Yeah. That’s a great point. Um, so by default, it’s going to use the fetch method, which it’ll take that. Uh, image, whether it’s hosted on Netlify or hosted on whatever other CDN that you’re using for your images, it’ll fetch that image into Cloudinary, and then it’ll serve it and deliver it from Cloudera, but that you also have the option to use the upload features like there’s auto upload and just standard upload where through that plug-in process.

Um, if you prefer to do it that way, it’ll actually go through and upload all those images for. And then serve them, uh, using the public ID from Cloudinary. So you have a couple of different options, but just to make it as easy as possible by default, it’ll just flip it on with fetch and it will just be served from.

Becky Peltz: And you’re, [00:12:00] you’re using your favorite, um, transformations I found on Q auto, but you actually could develop more on this and have all sorts of different transformations added in. Sure.

Colby Fayock: I think I’m pretty like early in the development of it. Like, there’s still some holes I need to fill a for instance, but yeah, like the great thing is you can provide like any kind of configuration that you would like through, uh, than LFI plugins configuration.

So I can really open it up to whatever people want to do with it. I don’t think it’s ever going to be as flexible as using the SDK inside of your application, but there’s still a lot that we can make available right inside that config file and not even have to think of.

Becky Peltz: Yeah, I think you found something that a lot of developers want, you know, they, they want and kind of a simpler way to get optimization into their website, media optimization, especially image optimization.

Yeah.

Sam Brace: Now, in terms of like the development of this, was there any particular frameworks that you focused on or any, like when you were actually going through the building CAF? [00:13:00]

Colby Fayock: So it’s really not that if I think, uh, really succeeds in kind of the JAMstack area where it’s going to be more static sites. Now, this kind of leads into a question of some of the holes that we still need to fill, because a lot of the web apps you see now are JavaScript based where they’re routing on the page is going to just be.

Uh, JavaScript a page change instead of a full HTTP request. And some of those cases aren’t going to be covered because of what it’s actually doing is it’s replacing those page images. Um, when that first HTP request comes with the page, um, we’re trying to look into solution that how we can solve that, uh, one way is we can.

That’s currently not in the plugin, as we can say, if you have all of your images in the images directory, we can redirect them all to Cloudinary and use some clever ways to do that on the Netlify, um, infrastructure, but that’s currently not implemented. And we’re looking to how we can do that in a comfortable way.

That makes it easy for us.

Becky Peltz: Oh, I’ll throw out there too. There is a Cloudinary labs website [00:14:00] where there is an implementation where involving service workers. So if you want to get deeper into front end on that, there there’s some work out there, but this is, this is a wonderful challenge. And, and it, and then for me, I want to, I’m, I’m interested in how you put together.

Uh, plugin, like just the process of getting that going.

Colby Fayock: Yeah. I’d be happy to kind of share the code around it, but I mean, that’s a good point about like the challenges of it. That’s also kind of why I enjoy doing this is I love to try to find these new challenges where I can try to solve them and work through them.

And I ended up learning more about the technology while doing that. So this is, it’s been a lot of fun for me, uh, trying to work through this. Um, but if you want the, I can, uh, open up the code and we can kind of walk through what it looks like. But all you really need to do is add it to your Netlify configuration file, right inside of your project, specify the package name along with your cloud name, but you can either do as an input right inside of that configuration file.

Or you can add [00:15:00] it as an environment variable if you prefer, but then it kicks off that process and it just transforms the, uh, the HTML is. Now to actually dive into what’s going on, uh, the let’s dive into the code itself, um, where here we have the index dot JS, which is just the source of where the plugin kind of comes from.

Um, but with Netlify you have a bunch of different, uh, Entry points into the life cycle. Now the particular one I’m using is on post build, which is referring to once the project is done building, I now have this ability to hook in and run some kind of custom functionality, which is where I’m providing these transformations.

So beyond a lot of the. Kind of configuration of grabbing some of the inputs and the API keys and such really at that point, we tap into the Cloudinary, uh, SDK, where we’re going to start to configure that with all the different credentials and whatnot. Um, but then we look through all the files. We grab all the [00:16:00] HTML files that were compiled as part of that, uh, deep build and deployment process.

And we’re going to loop through all of them and we’re going to update the HTML so that that image source is transformed to a Cloudinary. Now it’s a little abstracted here. So of course not everything is happening here, but we can click right into this and I can start to show what that’s actually, what.

So I’m using a tool called JS Dom, which is a JavaScript library, which is kind of giving us, uh, uh, Dom, uh, document object model, like representation, um, of the HTML that we pass into it kind of like you would get in a browser, but inside a node because you really don’t have the Dom inside of notes. So this helps you actually kind of query and work through it like you would inside of a browser.

Speaking of that we look through and we try to find all the images on that page. And we loop through all those images. We grabbed the source and we tried to. As part of this get cloud and our URL, which again, I’ll get to in a second, uh, we try to determine [00:17:00] where that image is actually coming from. So let’s click through there.

Cause I think that’s probably the most interesting bit of what’s happening because once we find that URL, we actually set that attribute on the image and we return the HTML as a string. So let’s dive into now get Cloudinary. Yeah. Well, what this is going to do is it’s going to try to determine how you want this thing actually serve.

So, as I mentioned earlier, we allow a couple of different methods where the default one is going to be fetch, which in my opinion is really the easiest because. You can just kind of set up there with not a lot of configuration, just your cloud name and you’ll be up and running, but we’re going to try to determine what that file URL is going to be, uh, because whether or not it’s coming from a non Netlify host, uh, such as your own other CDN, or if you are serving it from Netlify, we need to try to find where that final URL is going to be so that we can pass that into a Cloudinary so that Cloudinary itself can fetch that image for us.

But once we go through. [00:18:00] Uh, the other types are upload where we will actually go through and upload the image, uh, whether signed or unsigned. That’s another option that you have, uh, since, because you do have the option of providing like an upload preset in Cloudinary, and we’re getting very, uh, in the weeds with the Cloudinary, uh, API.

Once we do upload that image similar to the fetch. We return that location where we have our Cloudinary URL and we provide those very basic transformations and we returned the URL, which then again, gets replaced inside of that HTML. So that’s kind of the. The life cycle of the plugin. It’s, it’s pretty straightforward at this point.

Um, in terms of what the flow of it is, where we, we look for all the images in the HTML. Uh, we grabbed the Cloudinary URL representation of all those images and we replaced them. And this

Becky Peltz: is all occurring when you, um, in the build that Netlify is performing.

Colby Fayock: So, so, so [00:19:00] once the application itself is built, uh, like the web app, it’ll take the output of that and it’ll run this on post build function.

If I can navigate back to it. Yep. This on post build function, where then it’ll run all my custom code that replaces the URLs based on that. That,

Becky Peltz: that just looks so nice. Your code is so clean and easy to read. I was also really happy to see you had tests. So when I first looked at your repository, it’s always nice to go in and look at tests and that kind of flags, the kind of important functions that you’re, you’re looking.

Colby Fayock: Yeah. So admittedly, I’m not always the best at writing my test, but I wanted to make sure since I am developing something that I’m hoping is going to get a more broad usage and it looks like I have a failed test there actually. But, um, you know, I wanted to make sure that I am providing a hardened functions so that.

It will actually go through and work with everything that I’m doing. No [00:20:00] matter the changes, especially because as we are trying to add more broad coverage, I don’t want to have some regressions on some of the more, uh, basic transformations that we’re doing within it.

Becky Peltz: Yeah, no, it’s, it really helps to see like w you know what, you’re actually applying these functions to what they, what it looks like.

So we appreciate that.

Sam Brace: So Colby, now that we’ve walked through the code, and this was an excellent explanation of all of it. How does this ultimately translate to someone that would be using this within the Netlify ecosystem? What does this look like?

Colby Fayock: Yeah. So really, if you have your web app in a, well, I guess wherever you have your web app, whether it is and get where if it’s just locally deployed with Netlify CLI uh, you’ll just want to add this package via NPM.

Um, and then you’ll add this configuration into your Netlify. That Tomal is the typical file that I see for the Netlify config locally. Add your cloud name, whether as an [00:21:00] input or as an environment, variable, and really that’s all you need to do. I mean, of course you’ll need your Cloudinary account, but in terms of Netlify, that’s really all you need to do once you deploy it, Netlify will see that configuration and the plugin in that configuration.

And it’ll just take it into consideration as it’s working through the. That’s incredible. Hey, I

Becky Peltz: know you have a demo page too, where you can kind of show this in action.

Colby Fayock: Yes. Let me find which one that is. So this demo is from a tutorial that I actually did for walking through this, on my, uh, on my blog. Um, but really it’s a static, uh, web app where.

Running this plugin, uh, during the build process so that we can kind of see how this is actually working. Now, I’m not going to dive in too much into the code itself. Um, but what we have here is a pretty basic next JS application, um, where I just have some images, images on the page, um, that are getting statically rendered, uh, with the application.

Now, if we [00:22:00] look inside this Netlify dot Tamo file, kind of like I was alluding to before now, part of the tutorial I through. Additionally, how to deliver them with upload. So that’s why we also see this upload, uh, input here. But as we can see, even without that, it’s really just this simple few lines of configuration to get that up and running.

Um, now once that’s actually being served, let me grab the, deployed your L for that. We can see that this is the demo application and these images are now being served from Cloudera. And we can see that by inspecting the URL. And let me make this a little bit bigger just in case it’s hard to see, but we can see the rez.cloudinary.com URL, where it’s providing my, uh, my cloud name and the symbol transformations along with the public ID of that image that was uploaded in.

So my Cloudinary account. When I walked through the demo, I’ll show some other cool things that I like about why this is actually [00:23:00] impactful. Um, but as we can see that there’s really nothing else that I did special in terms of the application, in order to serve these from Cloudinary, I just added that plugin and it automatically serve them for me.

Sam Brace: And what I like about what you’ve done is that it’s also, it, it is, as you’re saying extremely simple in its design, where all we’re focusing on is transformations dealing with fetch format and quality. As we’ve seen also through your code, if one were to upload with upload presets and be able to do cropping and resizing that way you can always tack things on like almost ad hoc to your existing plugin structure.

So it’s not like where someone has a developer would be waiting for you to develop new code against this. They could easily take what you do with just some quick changes to Cloudinary and develop it to fit their particular use case. If I’m

Colby Fayock: understanding it correctly. Absolutely. Now. So the only difference, I guess, would be you’re you’re talking about actually changing the code for the plugin, right?

So somebody could absolutely develop their own plugin, [00:24:00] clone it, publish it to NPM and have their own completely custom version of this. That’s the nice thing about the Netlify functions is really it’s using NPM as a source to grab that package where it can then. Come in and run whatever you code you want on that Netlify build and deploy process.

Um, now the only slight differences Netlify has their plugins directory, and they’re very particular about making sure that, you know, we’re, that they’re installing safe plugins and everything is getting reviewed, um, as part of that process, uh, which is a great process for them to be having that kind of thing.

But yeah, of course anybody can build their own plugin and, uh, have it readily available for their sites so they can provide these kind of transformations. It’s especially helpful. Uh, team doesn’t have certain access inside of their code base to do things like this, where if they still can install on Netlify, they can still provide that benefit, whether it is Cloudinary or some other tool.

And then still be able to work through that with the modern tech, [00:25:00] uh, modern tech.

Sam Brace: Absolutely. And of course of all the clean code that you’ve supplied them as a starting point to if they love,

Becky Peltz: you know, I’m curious because the code really is very clean and it’s easy to understand the process that you’re going through to create it.

But did you run into any roadblocks as you were developing this, anything that you had to learn new things or master

Colby Fayock: yet? So I think the most interesting thing. That I ran into was learning about how, what data was available to me on the net five build process, particularly because we need to have that fully forms, URL for the image, whether or not we’re a fetch.

I guess that’s the only in the fetch case, right. Where we need to pass in that remote URL. We need to be able to know what that final URL is going to be on. Netlify. Um, so I, I talked to the Netlify team and figured out, but they have, uh, a lot of environment variables and configuration available within the plugin ecosystem where we’re able to [00:26:00] find how to create that URL pattern so that we would have that representation of the URL to pass into the Cloudinary, uh, transformation.

Um, otherwise. Because a lot of the images that are on the page might just be slash images slash uh, you know, whatever dot JPEG. So I need to have that fully final URL to pass it into Cloudinary as a fetch. No, it’s,

Becky Peltz: it’s, it’s really nice to see how that all came together and you’re able to work with Netlify to figure out some of those problems.

Colby Fayock: Yeah. And that’s a butter now that buy up too much, but, uh, they’re a great team and they were super helpful with, uh, uh, you know, helping me work through. So Colby,

Sam Brace: when I’m thinking about this overall deployment project, when we’re talking about getting this thing live, what does that ultimately look like?

I feel like it’s something that I don’t know if I’ve even actually seen this from that perspective, having worked with Netlify and whatnot. Can you

Colby Fayock: show us. Yeah, for sure. And I do have a little starter project that I [00:27:00] can kind of work from. So first of all, I’ll pull that up and kind of show what I have, uh, where I’ve used this framework called Astro, which is from the snow team.

If you’re familiar with all the actual JavaScript building stuff, um, it’s, it’s a more modern framework, uh, where. By default, you’re not shipping JavaScript, which is really cool, which is kind of why I like it. And it’s still in the early days for Astro itself, but there’s a lot of cool things, uh, looking forward with it.

But I wanted to use this because I knew I could deploy a static site really quickly, um, and kind of see what this would look like, but what this is going to actually be, I’ll pull up the demo itself for it. Um, where again, I just have a bunch of images on the page and we can start to inspect them. And we can see that it’s just serving this locally, uh, on Netlify, uh, just as if I weren’t doing anything else.

Um, but because this is an Astro, uh, site, what I’m going to do is I’m going to treat it as a starter where what that means is I’m going to clone it down locally, [00:28:00] um, as if I’m creating a brand new project with it, and I’ll show you how to. First of all, how to deploy it over to Netlify, but also how we can actually install that plugin after we do that.

So how I’m going to actually do this is I’m going to use as a starter. So I’m going to head over to my terminal. The first thing I’m going to do is make a new directory for this product. So let’s just call it my Astro Cloudinary, where I’m going to now navigate into that. And if we go to astro.build, which is their website, we can actually see how we can start a new project.

And the way that I’m going to start this new project is I’m going to. Use what’s called a template. Um, so actually it might’ve been on that first page. Yeah, here we go. So we can see that once we have our directory, we’re going to run NPM in it, Astro, and I’m going to actually pass in my template. So I’m going to run NPM in Astro dash dash dash dash template.

And I’m going to pass in my Colby Fayock Astro image gallery. What this is going to do is it’s going to clone down that site that I just showed you inside a get hub. So it can actually [00:29:00] make it available locally for me to start up the project. Now, if you’re familiar with next JS or eating Gatsby, typically you can do this and create the folder, uh, as part of that process.

But Astro actually requires you to do all that a little bit more manually in which isn’t a big deal. It’s just something that to keep in mind as you’re working through it. But now we see that our next steps I’m going to NPM installed. And we can even initialize get, because we’re going to want to actually put this up on how to deploy to Netlify.

But once this is, this is working through installing the NPM packages, which might just take a second.

In the meantime, I can start to create my get hub repository because I know that I’m going to need that, so it can hit new repository. And I called this my Astro Cloudinary. And because I’m going to deploy a project that I already have locally, I’m just going to create the repository instead of adding any of those other files.

But let’s see here once we have all the MPS. [00:30:00] Packages installed, which is taking a little bit of time. I guess my Internet’s a little slurry. Now I can continue on with the process inside of the browser because we can push those changes up once we have the project itself. So I’m going to head over to Netlify and I’m going to log in.

And once I’m in there, I’m going to hit add a new site, which I’m going to import an existing project. Now, as we know, I don’t have anything in this project right now. I probably want to wait for that actually, because one of the cool things about Netlify is when you import a new project, it’s actually going to be able to help detect what that framework is before you use it.

Yeah. We have that locally available now and I’m going to initialize my get repository, but then I can run NPM run dev, and we can just see what this is going to look like locally before we push it up. So I’m going to open this up in my browser and we can see that I have all my images here. Again, I can inspect this and these are all just being served locally.

Um, that’s why they loaded so fast, but we can see that we just have a really basic site. So now let’s actually get this up [00:31:00] into our get repository and let’s get it into Netlify. So now that I have an initialized, I can add it into get hub by adding this remote origin. First of all, and then pushing that up into hub itself.

Once I reload, we can see that we have that new project. So now let’s actually import this into Netlify so we can see how that works. So once I’m in Netlify again, I created a new site. I’m going to hit get hub, which if this is your first time in Netlify, it’s going to ask you to authorize with GitHub, but because I’m already authorized, I can just search for my repository.

We’re once the search actually turns up all those results. I can select that. And like, I was kind of alluding to it already knows how I want to configure this site. Now it does this with all the different frames, the, all the different popular frameworks, at least where with next GS, it’s going to actually tell you, ask you if you want to install the next JS plugin we’re here.

It knows that these are the default commands with Astro. So it automatically puts those in for us. So I’m going to click, deploy. [00:32:00] And in the background with this, this is going to do is it’s going to start to build and actually deploy that site up onto the Netlify, uh, infrastructure, just based off of that get repository.

And because Astro is actually pretty fast, this shouldn’t take too long, uh, to actually. I’m kind of

Sam Brace: mystified right now, to be honest, because like, for people that may have not played with net Netlify and Netlify see a lie, the fact that you’re able to run Netlify dev and it just did so many magical things right there to be able to see everything locally, it just.

I was just, I just I’m, I’m really impressed. It’s really, really fantastic. All of the things that Netlify is doing on the back end there, um, for sure. Am I, the only person that feels that way, like, like when you

Becky Peltz: kind of freak out, I love this product. You can do all of that CLI. And then when you, once you hook up your get hub to it, every time you push to get hub, it’s got a hook and it just rebuilds your project for you.

Yeah. So we’ll [00:33:00] actually see

Colby Fayock: that when I configure Cloudinary, which will be cool. Um, but yeah, I think I kind of take it for granted now because easy it is. It’s.

Sam Brace: It is one of those things where it just like, I think as a developer, I mean, obviously we work for Cloudinary. We don’t work for Netlify. I need to make sure that’s a very, very clear based on how the tone of this conversation has been going.

But, but in the same sentence, like, like if I was trying to easily, you know, spin up a project, the fact that you just showed how easy it was to do this, um, I I’m just, I. Um, I’m very, very blown away. Very, very cool

stuff.

Colby Fayock: It is amazing. Um, but as we can see, it’s green and it was actually deployed already. So we can start to look at it on Netlify servers, uh, where if I inspect, uh, like we would expect they’re being served from Netlify, um, which is completely fine.

Netlify is a great CDN. But, you know, ultimately we want to see how we can add, uh, optimize this, uh, moving forward with Cloudinary. Now, one thing I do want to kind [00:34:00] of show before we get into that is kind of what we’re looking at inside of the network panel. Now, if you’re not familiar with, uh, what I’m showing you here, this is the developer tools that Chrome provides you and all the other popular browsers have something similar.

But what we can see here is all the different images that are being read. And one thing that I like to pay attention to are things like the size of that image and how much time it’s actually taking now I’m on pretty fast internet. So, you know, aside from that NPM install that we saw earlier, so these times are going to be pretty fast, but we want to see how we can actually improve.

These times, and to be fair, now that they’re cashed, we can refresh it again and see that they’re more normalized rather than that first request, which is going to be a little bit slower until it actually caches on the servers. So let’s leave this page open. We’re going to leave this page open and see how it compares once we actually convert this site to use, uh, the Cloudinary, uh, image hosting.

So what I’m going to do is I’m going to head back over to that plugin. [00:35:00] If I can find it with all my different tabs open of. But what we’re going to do is we’re going to first install our Netlify plugin locally as an NPM package. I’m going to simply paste that right in. And hopefully this one doesn’t take as much time to install since it’s just that single package.

But we can see that the second thing that we need to do is we’re going to need to add. Plugins snippet into our Netlify configuration. Now, what that means is I’m going to actually grab this full snippet at the bottom where this kind of just walks you through how that works, but I’m going to first open this up inside of my editor, which I’m using vs code right now.

And what I’m going to do is at the very root of the. I’m going to create a new file called Netlify dot Tommo. And only way to do is paste in that snippet. We’re here. We’re defining the plugin that we want to use, which is our Netlify plugging Cloudinary, and we’re going to define an input and that input is going to be my cloud name.

So I’m going to specify Colby demo [00:36:00] and make sure if you’re following along that you want to use your own cloud account. So you’re not limited to my demo free. Uh, so just to make that clear, um, but now all I’m going to do is simply add all those files to get. I’m going to commit it. Say adding Cloudinary, plugin.

And a way to push that up, which as, uh, was kind of alluded to here, what’s going to happen is if I refresh the page here, we now see that I have that file there, along with the changes for adding that package to MPM. If we head over to Netlify and I refresh the page here, where if you wait long enough, it will actually refresh on its own.

We can see that we already have a new build kicked off. And that’s because I pushed up to the main branch, which is the default branch for my note by site. You can change that branch and you could even create what’s called deploy previews, where if I push to another branch and create a pull request, there’s a little bit of a tangent.

But if I create a pull request with another branch, it’ll create a separate deployment rather than [00:37:00] deploying to that main, uh, that main domain. But once we kind of wait here for this bill to finish. We can see it’s already published before I dig in, though, let’s click through and look through the logs because what I want to show you is we can see that it’s going through this Netlify build process.

We can see that it runs the build command, which is just running through Astro for us, but we can now see that we have this Netlify plugging Cloudinary on post build event. And that’s exactly kind of how we talked about how this process would work going through. Now. I don’t really have a lot of logs going on here unless you have some kind of air, but we can see that it’s done.

So we want to see. Actually, it looks like when it’s done. So I’m going to head back and I’m going to open this up in a new tab and we can see that the images kind of look exactly like it did before, but let’s open up our inspector or I’m going to look the image and we can see that it’s now being served from Cloudinary.

Let’s actually look at the network tab and see what happens. I’m going to refresh the page and similar to before, after that first request, it’s going to kind [00:38:00] of normalize how it’s being loaded, but we can see if we’re starting to look here. We were originally requesting JPEG. But now we can see that we have a type of Ava is AVF the proper, uh, phonetic pronunciation of it.

But now we have all these Ava files, which are going to provide us a lot of benefits on top of that. Now, if I switch back and forth between these let’s just look at this beach bat JPEG where this original size was 566 kilobytes. Now, if I go back to the. That’s 186 kilobytes. We can see that. Let’s see. We can probably look at the total transferred at the bottom here, where we have two megabytes of those images.

Uh, what the ADA format I believe. And we had 4.5 megabytes for the JPEG format. Now I didn’t do anything aside from installing a plugin. And what that’s going to do is it’s going to automatically optimize and it’s going to automatically serve that modern format of Avis, which is going to give those smaller file size, which is first of all, transferring [00:39:00] less data to the browsers and devices that are requesting that.

But it’s also going to be quicker because you’re transferring less data. So. It’s a really easy way to have an easy performance wind, uh, to optimize those images on your site. And of course, we’re looking through this, nothing looks different between the two sites. It’s completely, it looks completely the same, but you have that auto, uh, bet optimization.

And I should

Sam Brace: clarify something here, Colby, cause you’re showing an awesome example and I’ve loved everything that you’ve shown him. This one thing that sometimes I, when I’ve talked to developers over the years that I’ve worked at Cloudinary, they sometimes think that EFA auto, which is the format transformation that you’ve applied.

It’s like almost like a web P converter or an AVF converter, like, and we’ve seen an example where we took everything from JPEG to AVF, but I shouldn’t really emphasize. He only did that because it found aid. That was the most optimized file. It doesn’t mean that everything will become Avis because there are some times you have a developer.

Who’s like, well, I don’t want all my files to be a w why [00:40:00] should I use that photo? And it’s like, well, it’s choosing the best possible version for what’s going to be there. So it actually, if you ever see a piece for you’re using F auto and it’s. The type didn’t change at all. I say, it’s stayed as JPEG.

That doesn’t mean that actually, if auto didn’t work, it just means that it said what you served originally is what is the most optimal version of that case. So just want to have as a clarification,

Becky Peltz: and just also that you didn’t lose your original file. The JPEG was what was uploaded to Cloudinary. And if you look at the media library, you’re going to see it.

There what’s been what’s happened is. Our transformation was run and you have a derived Ava file. So the Cloudinary CDNs can determine, oh, you’re coming from Chrome. You probably would do well with an AVF. And it’s going to go pull that derive. So you’re not losing your original image at

Colby Fayock: all. And thank you for clarifying those, those little details.

Definitely get lost in translation, but they are very important to that process. [00:41:00]

Sam Brace: But, oh my gosh. It like, it just, it, it really does show like the plugin. Fantastic. It does exactly what it’s supposed to do. You did the right thing by deploying Netlify and working with them. So, um, I’m, I’m very, very impressed.

Very good job holding. One question I did actually have for you about the plugin situation would Netlify being someone that’s has used Netlify before you’re familiar with everything that’s involved with that company and what they provide. Is there any other Netlify plugins that you’ve seen that had actually really helpful for you, for you to see your overall development work?

Anything that you’re saying while people are getting into maybe learning about Netlify learning that plugins. Is there any other ones worth exploring that are part of that like official

Colby Fayock: library? Yeah, there’s definitely a bunch. I can’t say that I’ve used a ton of different ones. I know there’s an Algolia one, which is a search.

Uh, it provides search onto your site. And part of that process it’ll automatically, uh, scrape your notifies site. I don’t know too much about that. I haven’t used it. I just heard cool things about it. But one [00:42:00] thing, one that I really enjoy is there next JS plugin, which it’s kind of behind the scenes.

Cause you don’t really think about it where if you’re a next JS application developer, which I love next year. Yes. When you deploy it up to Netlify part of the issue is a lot of features and next JS aren’t kind of JAMstack friendly or Netlify is really on the JAMstack static web kind of thing. Right.

Uh, plus Lambda functions on top of that, where next she has has some server side rendering and, um, Capabilities on top of that. But what they’re, what they’ve done is they’ve taken this next year. Yes. Plugin on LFI where it’ll take your next JS site and it’ll transform it into functionality where it can deploy on Netlify.

And if I’m not mistaken, it has most of the features covered. I know there might be some small ones that aren’t covered. Generally you can display any of your next chat sites on Netlify because of that, where things like server-side rendering, it’ll transform into Lambda functions. Um, probably more technical than just calling a general broad [00:43:00] list of functions.

But, um, that’s probably my favorite plugin and that I use all the time, even though it’s kind of just behind this. No,

Sam Brace: I, I can see that thing super helpful. And actually, Becky, tell me if I’m wrong about this. Is this the first time we’ve actually talked about next JS on any of our programs? I know we’ve covered damn stack projects, but this next feels new to me.

And in this case,

Becky Peltz: I think it is, I don’t think we’ve had anyone on that has brought it up. And I know I use it a lot in training to put together, you know, when you’re working with react and you want to like, say, put a video player up on a page. I like that. Just for the fact that I don’t have to get a router.

I don’t have to set up a router. And so I love I’m right with you on next JS was created by versatile and you can deploy it there, but for some reason I’ve put together next JS with Netlify in the way that you’re describing. So, yeah.

Colby Fayock: Yeah. And varicella is another great company. Um, nothing against them. I just, I’ve always been a Netlify fan.

[00:44:00] Um, Prefer it for whatever reason, maybe it’s just the UI or something. And, um, I, I have no reason to switch, so I keep the plant there and they’ve been amazing with, uh, keeping up with the next shift development, um, to make sure that the features are. Yeah.

Becky Peltz: I have a feeling there’s a laziness about developers, where when we find something that works, we stick with it for awhile.

And

Sam Brace: sure. So now that you’ve developed this plugin, you’re diving into all things Cloudinary course and your day-to-day work. What are, what are the next things? What what’s next for the plugin what’s next for Colby?

Colby Fayock: Yeah. So I think the biggest thing in terms of the plugin is I want to try to provide more, uh, broad coverage out of the box.

Um, now. W, I don’t think there’s going to be a solution where we can have complete complete coverage for any kind of JavaScript application. Um, kind of like next you asked what the client side routing, unfortunately. Um, but kind of like that solution where maybe we can take all images and the images directory, or whatever directory that you [00:45:00] specify so that we can provide at least more inclusive.

Coverage, uh, for your application. Um, but ultimately I want to try to make it as easy as possible to just, uh, put Cloudinary on your entire site because of the awesome optimization that you actually get for performance on it. Um, for me, you know, I want to keep trying to find. Different things that I can do with Cloudinary.

I’ve been having a blast learning about, uh, all the different tools on it. Um, and that’s not me here trying to plug Cloudinary. Um, but I’ve just been having a blast with it. And I can’t wait to keep digging into things like.

Sam Brace: Amazing. Well, Colby, I can’t wait to see what else you have to get into, to be honest, this, this is, if this is step one, I can’t wait to see what step 2, 3, 4, when it comes to your journey, working with us, working with assets, the way that you have been, of course, and empowering the JavaScript, the JAMstack developer community as much as possible.

So congratulations to you. And I’m so happy that you could be part of this.

Colby Fayock: Thank you so much. Yeah. [00:46:00]

Becky Peltz: Yeah. It’s been great working with you and I’m really happy that we could have you on this program. And as Sam said at the beginning, you’re the first to appear here that works at Cloudinary. So

Colby Fayock: I consider it an honor.

Thank you.

Sam Brace: There. As I mentioned at the very beginning of this. You saw it. There’s so many things that we talked about with Colby that just, when it comes to web development, it’s going to make your life easier to pick up some of these best practices and tips and tricks that he provided. But I think the first one that I have to stay in, I need to indicate I’m not paid to say this.

This is just because how much I believe it to be true. Netlify is making it so much easier to deploy your web projects then. Any time before today, because it’s just where you have to do certain things, but the certain things are very small and then once it happens, it just the deployment process. It just it’s easy.

And we saw it with Colby’s project. [00:47:00] Becky. Do you agree easy? Oh yeah.

Becky Peltz: I am a big fan of Netlify and I, I feel almost like I have a dev ops team of my own when I’m working there. They do all the building. You can pull in these, um, plugins to add extra functionality. And they make it pretty easy to configure.

You can run it from the command line. There’s just a bunch of things that make it a really a pleasure to work with. Netlify

Sam Brace: I agree. And you, and you said something that’s very true. I have worked with Netlify CLI I’ve seen it. I’ve talked to people that have developed it. It’s awesome. So if you haven’t had a chance to touch the Netlify overall system and ecosystem of what they provide in not just with some of the things that we should, but otherwise.

Take the time to do a little bit of investigation. I think you will be impressed like the way that me and Becky are. And I also think back to what Colby set out to do with this plugin. One thing, this is proving, and I think in general, what the efforts [00:48:00] of our cloud and your community is showing is that every project for the most part can benefit from some form of image optimization or video optimization efforts.

So whether it. Getting them to be at the right format, whether that’s changing your JPEGs to web PS or Avis, or whether that’s ensuring that they’re at the right resolution or they’re at the right aspect ratio, any form of optimization you can be thinking about before you deploy and put it out into the.

Is a great thing to be considering. It’s like, I remember back in the day, you’d see people walking around with bracelets that would say WWJD, which would mean what would Jesus do? I almost want you to be thinking of like, how can I optimize this and have this on a bracelet? Because there’s so many cases and I’m not saying you need to do a Cloudinary, but I’m saying you should be always thinking of yourself.

If you were in web development, can I optimize this? And probably the answer is.

Becky Peltz: I think, yeah, we’re, we’re all aware as [00:49:00] web developers becoming more and more aware because of web core vitals. If you’re working in Chrome, you’re gonna, you’re going to be aware. There’s going to be indications that you are not doing things in an optimized way.

Um, and. And then if it’s with you, especially with images and video, these tend to be the things that slow down layout and such or cause large downloads. So once you discover what Cloudinary can do with a photo and Q auto, it’s like, why wouldn’t you use it? You know? And then to have it built in with, uh, Netlify here during your build, it’s it really makes.

Pretty easy to incorporate. So

Colby Fayock: Becky

Sam Brace: we’ve said internally, just to each other, that, you know, even if you see yourself as a lazy person, it’s not hard to upend effort on cue out all your URLs and get it done and just let the system do all the work for you. It’s like it’s passively optimizing as you’re doing this process.

So it’s a good thing for sure. I [00:50:00] think the final thing that I wanted to point out with this is just the. Netlify is they’re showing they have a robust amount of build plugins that are happening, that are touching other types of microservices and other API driven companies like Cloudinary into the Netlify ecosystem because of their bill plugin program.

So I’ve seen them wherever, working with new Relic, I’ve seen them work through Algolia and other companies to help bring that in for helping people with their overall deployments, but also their overall product development. For developers that are saying, I would love it. If this thing could do this thing a great way to do that is to build a plugin or extension.

So whether that’s building Chrome extensions for your browsers, or if it’s building as Colby showed bill plugins for a system like network, Take the time to think about how you can benefit your user and developer community by creating something, just like the way that Colby did. I think it’s a great way to get your name out [00:51:00] there.

If you’re trying to make your presence spelt and shown, but it’s also definitely a way you can contribute back and help people accelerate and optimize their overall developing.

Becky Peltz: Yeah, I think this really brings us to, into integrating the best services in our applications that the cloud offers and it makes it these plugins make it really easy for us to do that.

And I think if you’re working in the cloud, this is kind of the dream of the cloud is that we can just pull the best of breed of all of these different services easily into our application. So this is a really big deal for, for optimizing images and video

Sam Brace: integration. Absolutely. Absolutely. And I think there’s so many reasons why it’s wonderful that.

Because of just the vastness of what the internet has provided with cloud-based services that provided you can really do that best of breed that you’re talking about. Becky it’s now [00:52:00] where with a little bit of research, I can find that great e-commerce system. I can find that great static site generator I can find back to, like I mentioned, Algolia a great way to really enhance all of your search capabilities.

There’s so many things that you can do, but of course you can pull it all in together. Plugins and extensions are a great way to do that from a nice turnkey perspective.

Becky Peltz: And then the other really neat thing is that they’re all open source. So you can go and read the code. You can read their test. You can really verify for yourself as a developer, whether this is something that you want to bring in to your system.

You know, this is the kind of thing that you want to add to your build. So that’s, that’s a real

Sam Brace: plus to it is. I mean, as much as I love marketing teams, there are times where you want to get into the technical details of this before you add it to your system. Yeah. Review a case study or a white paper or a web page description.

So I think the fact that all of these services have open hubs. I mean, we even see it with Netlify. They’ve [00:53:00] had their Jason for publishing the plug-in list right there available on GitHub. So it’s where the more transparency that all of these companies are providing, it helps out developers to see what gaps there may be and how they can fulfill that.

And also, what are we getting into before we get into installation prep? Becky and I, we’ve got our key takeaways here. And of course, hopefully you have your own after watching and listening to this episode, the only thing that we ask of you is tell somebody about this. If you had a good experience. So if you’ve watched this on YouTube or the Cloudinary academy, or you listened to this on Spotify or apple pie, Make sure to like it, share it, subscribe to it if it’s possible.

And then also make sure that you are just readily telling people that this content exists because we love making this content for listeners and viewers like you. And keep in mind that we always are going to be putting out new DevJams episodes from thought leaders, from people [00:54:00] that are pushing forward development projects, just like Colby.

If you are interested in being a part of this episode, if you feel like you are doing something interesting, feel free to reach out to us as well. We would love to talk to you about all the great things you might be doing. And of course, thank you from everybody at Cloudinary, our customer education team there, and of course, Colby and the developer relations team at Cloudinary.

Thank you for being a part of this and we’ll see you next time for the next episode of.

We did it. We did it.