A crash course in Jamstack with Headless WP, Astro, and Buddy

"Hello, everyone, welcome to the year 2022. We decided that we will start this year with with kind of bunch of new technologies. That's why we decided that we will do a webinar about the Jamstack about headless WordPress, about Astro and about body. And yes, everything in one webinars. So this, this is really going to be action packed. I am your host, I am Maciek Palmowski. I work here as WordPress ambassador. And as you can see, I became a full time webinar creator at Buddy. Also with me, I have a special guest, really a person of so many talents that will probably have to spend 15 minutes to list them all. Together with me is done. Awesome. Then tell us the shorter version of your bio."

Oh, yeah, sure. Hello, my name is Daniel Olson, I'm the Chief Operating Officer digital cube. Digital cube is a company that builds WordPress products and communities. My role here at Digital cube, aside from being an AWS super fan JAMstack advocate is to develop and innovate on the products that we build. So I'm working on WordPress, I'm working on other technologies within platforms, working on different technologies, and languages, just JavaScript and Python. It's really exciting.

And don't forget the topic that you really also got me hooked up on, which is artificial intelligence. And it's really funny, and probably at some point, we will also think about doing maybe a small webinar about this, too. To do one. Yeah, that's true. So before we jump into Astro, and this whole headless WordPress world, if you have any questions about, about our webinar, about Astro about gems, like in general, don't hesitate to ask the questions in the comments, either on YouTube or on Facebook, it depends when you are watching this webinar. Also, if you like our webinars, don't forget to subscribe to our channel, because it will be easier for you to watch not only all the webinars we did before, but you'll be also informed about the upcoming ones. So we have all the all the intros behind us, let's start talking about Astro. Astro S is a kind of really new kid in town, because when it comes to static site generators, and it's really getting more and more popular. It's it's really in JavaScript, it's it generates static sites. So how does it differ from from the rest.

So my point of view coming from next day is, you know, this kind of, I still feel kind of new to the JavaScript world, using frameworks, even though we build our products using React, developing on the front end, especially with using WordPress, you know, as your back end, CMS still feels kind of new, there's still a lot of new tooling coming out. And Astro is just another one of these new frameworks that I was kind of hesitant to give a try at first, but I kind of dived in based on your recommendation. And I was really happy. Because coming from next js, I just felt like JavaScript frameworks came to a point where they're really polished, and they felt kind of like a product. Trying out next trying out Astro was just seamless, it was smooth. There was kind of some, some simplicity to it, that I really loved. Just the kind of fun, interactive and iterative process of like trying to build a basic site using Astro was just a pleasure. So it was kind of nice that we're at that point. So technology can be you know, overwhelming at times. But you know, we all just want to build basic sites. And Astro kind of does that for you.

Yeah, that's true. And also the thing that really, that really got me interested in Astra was the fact about the size of the site that is generated by bias, because this is one of the biggest problems, especially from my point of view, when it comes to either Gatsby or next js, there is quite a big load of JavaScript on the front end, which isn't, which isn't needed for for everyone and in every case, and Astro just deploys the HTML, so it's much much lighter, and the website is much faster thanks to this.

Yeah, control over When it loads how it loads using other frameworks, if you need to include some functional library to have a slider or to add some authentication, it always seems like there's just a lot of other extra stuff that comes along with it. It's kind of hard to filter out.

Yeah, yeah, that's this, this was exactly the same that the same thing that I felt about about Astro, it's, it's just lighter, it's lighter. And we can just concentrate on making our our website without spending so much time wondering about the technologies, trying to find solutions, and trying to find out why something isn't working. Because this also happens when we have to connect lots and lots of libraries together. And today, we're going to connect Astro together with with shifter, right? Yep. So tell us a few things about about chipper, because I think that some people may not know it. And I would say this is a really interesting tool.

Okay. So before we dive into it, I want to kind of set the stage, I got a couple slides we're going to go through. Because I feel like there might be some people, you know, being, you know, joining this webinar that might be completely new, to the jamstack to web development. Maybe they're they work alongside those developers, maybe they're interested in getting into this field. So preparing for this webinar, I was talking to a couple people, even on my team that were like, Hey, I'm going to join so that I can learn what this stuff is, even though I've been kind of talking to my teammates, and sharing this knowledge along the way, giving it some context really helps. So you know, as I mentioned, Hello, I'm from digital cube, we build all sorts of WordPress products, and offer agency services. So today, we're going to be trying out shifter. So shifter started as a platform back in 2016, are really, really a plugin. Today, it's matured into a platform. And today, we're going to be trying out one of our latest products called shifter headless. This was after the experience of building shifter static, which was a static site generator for WordPress. So you know, you have your traditional WordPress site and theme, you can generate a static site against that site using no code. Or if you want to kind of dive in and use the API to build something more complex, aka, just imagine running WordPress, on demand, as you know, a back end database for your, you know, large scale enterprise application like those things are possible. So we cater to all sorts of different users. But there was one category that we were kind of missing. And that was people who purely needed an API as their data source. And WordPress is great for that. WordPress is great as a CMS, it's why it's powering over 40% of the internet. So what we realised is, you know, there was kind of a need for this. And it was, we wanted to redevelop something for that specific type of customer. So with a lot of the technology coming out from AWS, all these new product updates, we wanted to take a look at fargate. Again, this is the service that runs AWS is containers. And this is a really powerful service, if you want to build an application that can scale. So this is actually what powers shifter headless. So it's kind of built for enterprise grade WordPress hosting. So if you need WordPress as just a data source, this is kind of, you know, this is what we felt was the best solution. And this is kind of how we started. So there's a couple other things, as you mentioned, handling images. So image images, were something that we wanted to tackle when developing was shifter headless. So by default, we offload all of your images off to a media CDN. So the name is kind of a it's a bit of a misnomer, or it's not a misnomer. It's just not as accurate, because there's a lot more features packed into the media CDN, than just serving purely media. So image compression was a question that came up in our, like screening for the for the webinar. Didn't someone asked about compressing images?

Or? Yes, yes. Yes, it Yes. Yes, it was. We were We were wondering how we can be done.

Yeah, so this is actually, I'm not going to answer that question by answering a much larger question, which is kind of how should web developers handle their images? Should we be running these processes on our local machines, on our computers in the cloud, to crunch these images, make them smaller, so that they're, you know, it's a great experience for our end users. But some companies like Google for one that you kind of introduced me to was this idea of compressing images on the CDN at request or In the cloud, so you can do that with things like lambda at edge. So you might be familiar with Cloud, Claire functions. This is the same idea. And this is what we use. So when an image is requested over the CDN, we're actually detecting what kind of browser you have, hey, does this browser support Web P? Well, if it does, we serve that web P version, you don't have to instal any plug in to kind of crunch that down. You know, as more formats Come, come available and become standardised and more browsers support them, it's great that your provider can just kind of flip on a switch. And now all of your images can be delivered as a service or some other fancy new format that will come out. You don't have to update your plugin or kind of sit there while there. It's crunching 10,000 images. So this is kind of how our approaches to solving this kind of problem. You know, let the provider let the CDN handle it. So this does it but it does it actually actually at edge of the CDN. So when you request the image, that's when it's happening. So the other thing I wanted to mention, we're talking about WordPress here, but we're also talking about static sites, you know, the jamstack, this kind of new modern web development approach. Take a look at the jamstack survey, the community survey from Netlify. There's an interesting kind of point in the survey, it said that the WordPress is among the most popular for API driven applications. It's, you know, a preferred back end for web developers. But it's also one of the biggest pain points for jamstack developers. So it's not WordPress, WordPress isn't the problem. It's the operations and maintenance of of that system. So it's something that's outside of their typical use, maybe they don't want to deal with kind of scaling it, protecting it, securing it. So building kind of platforms specifically for that purpose, is really kind of what we have in mind. So this is an interesting report, I highly recommend checking it out. The data that went into this is impressive. There's so much research kind of it even just as a web belt, or you may be curious to check this out. So welcome today. So this is a guess what we're gonna get into, like I said, this a crash course of magic when he said, Hey, let's do a workshop or webinar about Astro. I was like, I don't know anything about Astro. So this was kind of new to me. So I just want to quickly share things that stood out as a developer getting into a new project. So as he said, This is Astro. It is a framework JavaScript framework. So if you're familiar with any other kind of framework, really, this this will seem familiar to you as well. So you can find it on Astro dot build. It says building websites, but I see Hansa really going beyond just websites. I've experimented with some, you know far future features that I want to include in some of these starters, such as authentication. So I have got authentication working on an astrocyte static website, you can stop, you can log in using Netlify authentication. But uh, that's not included in the starter today, I wanted to kind of give that a little more space to explore. But what I'm saying is it can do a lot more than just sack sites. But we're just getting getting started. So, Nick, like I said, I'm hoping for the next year as world. So if you use next js or next, you would really feel at home with Astro. If you're using TypeScript or view, you probably feel at home using Astro two. Because there are some slight differences. One of them being is the syntax. So there is a new format that you may be intimidated by, but no worries. It is just called dot Astro. But if you open up these files, if you go to the starter on the the Astro site, it looks similar to view from what I've been told. I'm not a view developer, but it's basically it looks like JavaScript. So if you're familiar with any basic HTML, or TypeScript, or any of those things, you may, you're going to recognise what these files look like. You can make them complex with creating TypeScript props and being really kind of granular with setting up your components. Or you can just really basic and drop in plain old HTML. And both will work so much is kind of packed into Astro, you know, out of the box. If you need support for TypeScript, or you're just building with basic HTML. You can do both, which is that's that's what I said. You know, I felt like such a pleasure just using it. You know, smooth sailing, like starting the project, very little things you needed to instal almost everything was kind of baked in there.

Yes, I'm not Let's look at the partial 100. Hydration, because this is a really cool feature, when if you need some more, if we need some more, let's call it horsepower. When it comes to development, we can use React, we can use Preact, whatever we want.

Yeah, you can, you can kind of pick and choose and be very, like intentional about how you're building your application. With performance in mind, you don't have to, you know, just kind of by default, load everything and peel it back, you know, it's starting with nothing, you need to opt in to all of these features to do actually need to run this JavaScript well, as you're building your application, and these features don't work, you'll realise, oh, I need to actually hydrate my application, I need to load the data here. So you're doing it where it's necessary. You're not kind of, you don't have the fatigue of kind of optimising while you're just going along, you really, it's a very delicate development process. I like this approach, it's actually it's actually similar to a concept called the Rule of least power, which is, you know, I recommend checking it out, this kind of philosophy is something that I really like, you know, starting with the minimal amount of features or resources, and then kind of building it up from there. So it stays very lean, Astro feels super lean. The other thing that was included in the starter that I had to use was data fetching. So we're building a headless application, we need to get our data from somewhere. So while many people our team Graph QL, you know, I love Graph QL, I wanted to keep it keep it basic, keep it as minimal as possible and use the things that Astro is going to give me in its core features. So one of them is using fetch, which is included in almost every modern browser. So I can use Fetch to hit the REST API and WordPress, query some data and pull down those posts to start developing the application, I can use almost the same exact syntax as Axios. So coming from Next, I'm using Axios a lot to develop, you know, applications making data requests. So the syntax is almost identical. So setting up authentication for WordPress, using the applications passwords, was just, you know, really easy, it felt familiar. So it's also great that this is just baked into Astro. But it's all wrapped around an async function. So if you're familiar with JavaScript, you know, you may have, you may be writing async functions or promises to fetch data. So you don't need to write, actually, the async function, and then everything inside of it, you can just leave that out, and you can start to write, you know, await, and then fetch your data. So Astro just makes the syntax a lot cleaner. And, um, you know, it's more concise, you don't have to write as much, which is great. It's, it's, it's like, we're finally reaching the maturity where it's like, yeah, I don't want to write this, I write this every single time in this in this project. Like, why don't we just bake this and make it standard? And then peel it out? If you don't? So the project structure is very similar to other projects. browser screen bigger, I see any comments? What is the total price? Okay, so, so the project structure is very familiar. If you're familiar with other JavaScript frameworks, even things like create react app, you'll get your source folder, and inside pages, it supports static routing. So if you create, you know, a static page that says login, you'll have a path slash login. And you can navigate to that. So this is all very familiar. And the project that we created just has one index file, so it's even simpler than this. But we are using components, which is a feature that, you know, you can develop your components and design system and then import those components into your application. You know, so you can basically better organise it. So like I mentioned, TypeScript comes baked out of box. We love TypeScript here at Digital cube, it's something that really has brought a lot of clarity into the the work that we're doing. Having types, you know, sharing the what, what functions are writing, but also how to interact with those functions. Not only adds to the quality of the code you're writing, but also adds to the documentation. It's self documenting. If you have a question about how something works, you can go and look at it and you can say, hey, I can pass a post ID into this and it will give me the post of the WordPress object. You can write that out in TypeScript, and it's well documented. So there's Astro, those are my first impressions. It is, if you're coming into the JavaScript, you know, development world, it's as like a your first step, it's going to be very similar to almost any other framework out there, but maybe a little simpler. So maybe it's a great choice to start with. If you're coming from another area, such as like React, development or view, it's definitely going to feel familiar. And it's just going to feel really simple. So I recommend trying it out. And for now, they're probably only going to recommend it for basic static sites. But like I said, I think it can do a lot more. I'm just kind of getting started exploring. So we'll see what happens. See where we go next.

Yeah, I can also agree that it's really great to start your adventure, because it's simple. It's really simple. And as you said, we don't have to type it all up. So we can all the components are, are small, there are so clean, we just can see all the code that we need. So yes, it's a really great way to start our adventure with with the Jamstack world, because personally, I had much more troubles starting with Gatsby starting with next js. And here like, out of the blue, I just felt like I'm at home this destructor was so clean, adding everything was so logical. Just just just like that. So we

get to building it's like, Well, why don't we get the building? So?

Yeah, exactly. Let's

demoing our application.

So yes, yes, I will. And here is I hope that that Michael will be will be satisfied with with the font size, you can

rebake Can you see my screen? Maciek, can you see my screen?

Yes, I can. Yes, I can. Um, I was I was waiting for Michael comment. Okay, so maybe comment in a minute.

So the way that I learned Astro was I pulled down the starter project. And I wanted to explore another project of mine. How I could use Philly tab finder. So see, so affiliates out finder is a website that I took over a couple years ago. It is a craft beer website that lists the beers on tap at bars and Philadelphia. So this website is built in WordPress. And what I want it to do was use the WordPress REST API to kind of give this website you know, some new life. This website design is you know, due for a refresh. So I wanted to keep the data in WordPress, but I wanted to experiment with that data and build something new. So, you know, Astro is where I started. So this project uses the data from that other website. What I've done is I've, before this webinar, I use the REST API to pull down data from Philly tap finder, I stored that data as just JSON, so just lines of JSON. And then I use the WordPress REST API on shifter headless, to push that data back up into WordPress. So as you can see here, so this is the back end of shifter. So this is the shifter dashboard, you can see that I've created the site for this webinar, the container is running. And we've got a couple of tabs in here. One of them is called the playground, which you can kind of just put your queries in here to test them out. So we're just going to do a per page query to see what gets returned. And you can see there's some data in here. So this data comes from the affiliate app finder website. And this is the data that we'll be using to build the starter. So if we log into the backend of WordPress, you can see we've got all these beers listed. So these are just different craft beers with descriptions. Convert the blocks because you know we're Team Gutenberg. So let's take a closer look at the application and see how we can use this data. So inside the source folder, similar to the Astro starter, we have a couple folders. One of them is styles, pages and components. Inside the Pages folder, we have one index X file. So this is an index dot Astro. As we mentioned before, the Astro syntax is what Astra uses. So, you know, for this project on Team Astro syntax, it was new to me, but still very simple. One of the unique things about Astro is these, these three dashes. Like I mentioned, this comes from the view world, I don't know what this is called. But basically any kind of header information you need for your template, you know, creating your variables creating different, you know, requests, writing functions, all that stuff goes in the head. And then you can pass that information down to your template file. So in our case, we set up the file, you know, pretty basic. We're pulling in our components. So we've got a hero posts, list and search. Then we're setting up our post id, which is set up as an EMV file. So most projects use dot EMV. This allows you to store your environment in variables, such as the post ID or the username, password, all that stored in EMV. And then we're creating some authentication to hit WordPress. So we're hitting the WordPress REST API, we're getting 20 posts, and then we're returning that as a JSON object. And we're calling that constant posts. And as I mentioned, the the entire everything in Astra was wrapped in a big async function. So we don't need to write async await, we can just write, await, which makes our our code really clean and short. So I have this post objects. And I'm going to pass it into this post list component that we created. And we'll we'll hop over to the posts list component and take a look at what's going there. So we're just going to pass the whole object in here, and then we're going to do something else in it with it in post list. So magic, is that good. Did I cover that? Did I do?

Yes, you've covered everything. That's why I'm just I'm just listening with blocker.

Okay, good. So we're setting up in this file, we're getting a little more technical, we're setting up some props. So this is the interface that I want to use for this component. And the prop that I want to create is called posts. And this is a record. So it's going to be something like it could be an object. I'm not a TypeScript expert. Still learning. But this has been right for now, the ID has not yelled at me. So I'm assuming it's all good. So this is the interface for the component. But we're also pulling in another component called post. So before we dive into the Post List, let's take a look at the post. So this is just a small component that is a list object gets a little more technical with, you know, praying, bringing in more variables, making some more rest API calls. So to give you some kind of top context, I'll run the build. And we'll actually see what these components look like. So I'll do NPM, run, start. And just a quick look at our package dot JSON file. Our start command is actually proxying. The Astro, you know CLI command. I just wanted to point that out. So Astro does come with the CLI as well. Interesting. I haven't gotten into that yet. But this kind of, you know, let me know that. So I'm going to run npm start, we're going to start our development process. And as you saw, it is insanely fast. It started in 85 milliseconds. So I will take a look at our local application. So this is the little demo app that we built, you know, the single page application, I'm bringing in an SVG, just you know, short description, I've got a search input. And here's our list of beers. So we've queried the beers from, you know, Philly tap finders website, consume that data, you know, added that these posts into headless WordPress. And now we're pulling that data back into a new application for you know, this Astro starter. So some of the concepts behind this starter, you know, we don't have to go too much into this, but I wanted to introduce the element of rank for beers. So one of the things that I started to do was read more about the post meta endpoint in WordPress. So how do we use you know, custom fields? Like I've never used custom fields in WordPress, I know a lot of people do, you know, with plugin development. But as a you know, a jam stack developer had lit meta fields are everything like you know, custom fields for this custom fields for this custom post type, advanced custom fields and pods and everyone has their flavour Plugin. They love. But I wanted to use something in WordPress Core. And what I realised is it's really simple to do. So, inside WordPress, there's this snippets plugin, which comes with shifter, headless. And it really is just a quick, easy way to drop in some code snippets. So I found this, I think maybe on, I might have found it on Stack Overflow, I don't know. But probably, but basically, this function adds to the WordPress custom or WordPress post type post the, to the endpoint, it adds rank. So I was able to add a custom field to my API. But I also added it in WordPress, really easily, I just kind of added new field and I can type in the rank. So the future use for this would be to develop some sort of requests that can do a post back into WordPress, and allow users to vote or, you know, upvote, certain beers that are currently on tap. So this is very similar to something like Hacker News. You know, I'll be working on this a little more. But it was something new to me, I wanted to share that, too. So this is what it looks like. Let's take a look back at the application, and actually kind of make some changes. So hide my terminal, we'll go back into posts list. So what we're doing is we're making a post query in our index file, right here, taking that response, calling it posts, passing it into the posts list. And then we're iterating over that, you know, with a map. And with each time we're loading in the post component. So inside of our post component, we have the props that we set up, like title brewery categories, you know, we're gonna pass all that in, and some of this is still kind of a work in progress. As you can see, I'm just writing style and brewery. But one of the more interesting things in this component is client visible. So magic, you pointed this out? Before? What got it? What kind of got you interested in this?

Yeah, because thanks to this, we can, for example, load a component, in this case, when we will scroll down to it. So we can, we can add many, many different behaviours. It can be based on visible we can use, for example, client, client resolution, because we can use media queries and stuff like this. And while in our case, this, this won't give us a big gain. But when we are using some more advanced JavaScript techniques that are loading more, and the more libraries, this can really speed up our our website.

Yeah, like let's say this component, made other API calls to get a lot more data to other services. And we really wanted to kind of offload or kind of delay, making those requests so we can load them when they're visible in the viewport, we can load them when the browser is idle. So there's a whole API available in Astro, because this is a feature built into Astro. So they really give you a lot of these kind of tailored ways to load in JavaScript just when you need it, or control when it does get loaded. To kind of just deliver a great experience to the people using your application.

Yes, we we even forgot to mention because Astro described their architecture as an archipelago.

Well, yeah, that was interesting. I was in it's yes.

And this is this really nice name that describes how Astra works because the ocean is the is the HTML and CSS. And those small islands are JavaScript components, just like this. And and really, this, this, this describes how Astra works perfectly.

Yeah. So this project, you know, we got it running locally here. It's, it works. I mean, it's making API calls. It's bringing that data. It's simple enough that if you know nothing about JavaScript frameworks with just a few commands, you can start to see the effect of, you know, how this thing works. You know, what are these components do? How do I create a new component? I think it's a great way for someone who's just getting into web development to test it out. I think that there's a lot to learn. This demo is simple enough that you could use it as a starter. We've published it on our GitHub. So let's see our github.com/get shifter headless example, Buddy. Nope. Not that.

It will set up find any final number.

Starter. Oh, it's still private. I'll publish it. I'll publish it after this. But yeah, so that's kind of the, what we wanted to build on. Were there other kind of parts I wanted to dive into? Oh, we didn't talk about tailwind. So something that we use a lot at Digital cube, something we're using more often is tailwind. So love it or hate it. It's been really great. And building design systems for us. I am definitely a fan of tailwind. And it was something that I wanted to experiment with on this project. So what I did was I went to the docks in Astro and they have some really simple guide to add tailwind to your project. There are some examples with tailwind already included. But I wanted to go through that process myself just to see what it was like. And it was as simple as adding a post CSS file. So post CSS is the compiler that compiles the CSS for Astro. And what you can do is you can use the CSS tailwind CSS plugin from post CSS, so many CSS first to load the tailwind config. And in this case, our tailwind config. Since we are doing a website about beer. We've appropriately named all of our beer colours after types of beer. So we've except for this orange one, this one was my test colour. Well, we got a red ale brown ale Pale Ale got that foam and some stout. So this was the inspiration for the project since it was all beer related. But yeah, all of our tailwind config is kind of loaded in here. We were going to do some some work on creating a, you know, search form. So we're bringing in some other tailwind plugins as well for forms. But yeah, this is the super easy, it was like create this file, restart the process. And now you have tailwind support. So if tailwind is you know, if you're a fan, it is super easy to include in an astro project. So I recommend it.

Yeah, so. So the only thing that we did not covered in in this in this crash course is routing. And, yeah, but I want to mention a finger to about because routing is really simple. And it's it's file based. So in this case, we have the index file. So this will be the home page, if we would create a test dot Astro File, we would have our domain slash test website. And we can also pass variables to it. So we can even create dynamic, that dynamic routing, there is a really simple, simple tutorial. So it's really quite easy to get all the data from the REST API. And based on it create new new pages. Yeah, so I think we covered everything when it comes to basics of developing an astro. The only thing

here, Alexander and he mentioned in the chat. He's using process ENB. So in that this is a I skipped over that. So my apologies. I do want to mention that process dot E and V is something that you might be familiar with if you're using Node or other react or JavaScript frameworks. But process that ENB is not loaded by Astro because of it's not dynamic. I'm not sure why. If you check their website, they recommend just a different like import dot meta dot EMV. So those variables are static. They currently have an open ticket, a discussion about how they're going to handle secret variables. So there are certain things that you want included in your application like the endpoint of your API, like you need to make an API call to a website. That variable needs to be public. But let's say you have an API key included in your application, which is pretty common to use as a part of your application with you know, other frameworks. How do you do that with Astra when it's all static? And everything can be read. So there's an open circuit for that. I don't know how they're going to solve it. But it's, it's interesting.

Yeah, so we, I think that we, we covered most of the things when it comes to developing in Astro. Now it's time to show how we can deploy it because it's, it's really simple and so you can probably see my screen right now. And I created I connected our GitHub repository. And now it's time to create a pipeline. So we're gonna create a production deployment, we're gonna run every time that Ben will publish something new in the in the repository. So let's add a new pipeline. And now it's just time to add first, the first action. So it's not, we have to just instal NPM we have to instal everything. And then we have to just run NPM run build, the only thing we have to remember is to use the latest version of node, because Astro is I remember that when we first tried using the older version, everything crashed. So it's important to us that the latest one, so we have this and we have to you are muted. Oh, sorry.

Sorry, my neighbour was drilling the wall. So I muted myself,

um, it's this issue normal

doing this project, only one of them was the new version was to like old when we first started. Because Astra was so new. It's it's, you know, we're running on like, version 17. So running latest, that was like a weird thing. That was our that was easy fix. And the other issue was, when you tried to run the build, I had the WordPress container turned off. So that was like, yes, hiccups we had, it was really surprising how easy this was.

But now you have your neighbour with a drill. So yes, something had to go go wrong in there forever. Yeah, and the next thing we have to do is to upload it, we can upload it in many places, you can use FTP SFTP, we can upload it to nullify but in our case, we're gonna use our local testing environment called sandboxes. We only need to close the dist folder. And we gonna do it as w. W data, and we're going to push it into the HTML folder. Okay, so let's add this action. And that's it. This is the website without before the upload, as you see, it's, it's empty. So let's run it. And it will take a short moment, but because it also have to connect with with with shifter and download the things from from from the REST API, the good thing is that we are only showing top 20 beers, instead of for example, 100 or 200. Or, and, yes, and it's done. That's it. And here we go. Here we have our, our Astro hosted on, Buddy sandboxes. But like I said, we can push it to nullify to our FTP SFTP. It doesn't matter. We can do it. We can do it all. So um, well, I think. I think we we have we have everything. I know that we have some questions. So before we will wrap up. Let's start with with with the q&a section. Because the first question, yeah, you mentioned it at the beginning. But but but let's dive into it again. Because Hubert was interested to find about handling responsible, responsive images in Astro, because Astro out of the box doesn't have a component to handle images, like for example Gatsby has because I really remember that Gatsby has this image component which works really nicely, it compresses the images resizes them creates all the all the sizes in between. And Astro doesn't have this, that's why we have to use either a CDN or we just have to do it a bit manually, or because we can connect react or react or whatever we want with Astro. We can find an external external library and, and use it in Astro just like this.

So there's a this was something that was, you know, coming from using Gatsby, having the image component is really handy. But looking at Astra I realise you know, they don't have it included yet. They could. But there's no one telling you that you can't create your own. So the Gatsby one is just really it's a React component that bundles up a few functions and makes using images and Gatsby really easy. You could make Astro component like anyone could make this project and start developing it. And it's basically would just be a wrapper of a some JavaScript that crunches An image. Gatsby is using sharp. So the image module built. It's a like an image compression library called sharp. I imagine that you could use the same thing with Astro. I don't see why see why not. But maybe there are other options too. So if you're using a platform that provides the images over CDN, if there are some things that can be compressed, like the image format, or changing the optimising in some way, that's great. But what about resizing? As we know WordPress will handle different image sizes? It doesn't do it on the fly. But it can, why can't you use the WordPress REST API to make those requests, create the images, crunch them down? Because WordPress does support all that stuff. And then all you need to do is make a request to the media endpoint in the WordPress REST API. And then you now have your image objects. So it's an idea. It's, I'm sure there's people out there, you can probably find example projects doing it. But I would love to explore that myself.

Yeah, another question that we have is from Adam. He asked us to mentioned about the hosting side of the headless approach. So I have to get into Do you because it's, the hosting part is really your thing.

Yeah. So yes. So you can this is this. This is actually a I was curious about this question. Because it could mean like for both sides of the project, you know, your front end, where are you going to host it? You know, hosting providers, like if you want to deploy to Netlify, or sell or AWS amplify any static hosts will do. But if you need to protect your WordPress installation, there's a lot more that comes along with just hitting your REST API, like yes, you can do that. But if you are going to build on build a project that is API, first, think about the hosting environment created for that purpose, make sure that you're locking down the front end of your site, making sure that you have some levels of security, or you're using a provider that is kind of built for that kind of that's what we do. So yeah, there's two, there's two ways to think about the hosting side of it.

Yes, and here is another question from Tom. What is the total price of all presented stack for a small website? Or for a freelancer? If I remember, a shifter has a free tier, right?

Yeah, so shifter has a free tier. The stuff that we download today is on shifter, headless, if you're building an application that needs like, you know, a connection, you know, 20 475 nines of reliability, that's, that's going to be a great, you know, option. But if you're building a static site, and you only are accessing that site, kind of to make changes, we have another product called shifter static, which does have a free tier. And you can use the REST API. So I have a demo in our shifter GitHub, where it's demoing both shifter, static and shifter, headless, using the REST API with authentication. So the only catch when using shifter static is the container will turn off. You know, it's only running as needed. That's kind of how shifter static is built. That's the purpose of it, you log in to your site, you create your changes, and you deploy those changes. And then WordPress powers down. But it has an API that comes along with it, you could interact with shifter from your command line, because we also have a CLI or with node. So there's a lot of like pipelines and build processes that you can use as a developer on shifter. So if you want the cost to be zero, it's possible you can use shifter, you know, just store your data in the backend. And you can deploy to, you know, one of those services like Netlify, and your cost could be nothing. So, yeah, it's, it's up to you.

Yeah, it will just require some time to set everything up, for example, creating a special pipeline and in body that will first invoke the the shifter CLI that will wake up the server after it's after it's awake, you would do the whole build process. And when everything is ready, you can either put it to sleep for or it will do it automatically after some time. It's up to you. So it depends Do you prefer to spend your money or spend your time?

Here's it. Here's another idea. Um, so this is something that you can probably find this on our GitHub, it's, it's out there. But so you're making API requests to WordPress and some of the features about shifter, headless or shifter static is that the container powers down. But you can actually hook into the REST API request within WordPress core. kind of monitor it. So any requests that are, you know, outside requests, things that you could make publicly or even with authentication, you can save those requests to static JSON files on the CDN. So as your application is running, and you're changing that data, you're actually just creating a tonne of dynamic static content on the CDN, you could stop requesting the data from your WordPress site, and shift over to these static JSON files on your CDN, you've now got a near dynamic site, because when you make changes within WordPress, boom, those those changes are deployed to the CDN. And now you have fresh data. So there's a lot of different design patterns that you can use when creating static sites to really make them dynamic again, but it makes your systems more resilient. They're not normal, they're kind of abnormal. They're not typical patterns that we use in everyday development. But I'm hoping that we can make these these methods a little easier to access and reduce the friction for developers.

On the other hand, this is our role as developers to prove that, yes, we can. Yes, we can. Yes, we can. Just because there is a possibility. So why why not do it? And we have a lot more question from, from from Sharif. Do we need to build? Again, Once data is changed in WordPress?

Good question.

Yes. And I would say with that it will end with the typical Id answer, it depends. Depends. Because if we are, if we are building studies aesthetic part, and in Astro Yes, then we have to do we have to because we change data, so we have to rebuild everything. But also in Astro, we can create a dynamic component that will ask our REST API every time using using JavaScript. And in such cases without, but

yeah, we could have developed the application or you you kind of have to opt into that. The way it's built right now it won't. But Sharif, it you can quickly do that. So this actually relates to that sending the data to a static json file on the CDN. If you were to do that, that also makes your application dynamic, you don't have to run a build again. So it actually someone also mentioned incremental builds, if you're sending or if you're using that, that pattern. And this actually applies to Gatsby as well, even shifter, building static sites on shifter. If you're using an endpoint that is updating, and you're actually fetching that data within the application, like you're not writing it to the file itself, you're just getting the query, then no, you don't need to even run incremental builds, what you end up with is instant builds. So as you change the data in WordPress, that endpoint is from the CDN. So boom, the endpoint is a new data. That's what you get in your front end. So you didn't have to run a build. You just changed WordPress data.

Yes, and this was this was the last question. So I think it's, I have one more banner here. Okay. It's, it's hidden now. So I think it's time to wrap everything up. So first of all, yes, try try Astro. It's, it's new, but I think it may it might become one of the one of the big ones I think it will probably differ from from from the target of gadget br Or next when both of them are going more and more towards enterprise. Product and actual will be for this hobbyist, small business, maybe medium, we will see how will they do maybe about incremental builds because this is this is also something interesting. For sure. Astro is very young, there are far away from the one zero version. So we'll have to still wait and see what will change in the in the upcoming future. And okay, I think that's that's all I really want everyone to try. Yeah,

Andrew. It's actually a yes. Oh, no. I'd be happy to answer that.

So let me I have to wonder how well it works when clients are doing lots of content updates every day. So

this is a I'm glad that you asked this One of the reasons why there's, you know, not that I'm saying like people follow the work that we're doing. But if you notice, there's been a lot of development work coming out of digital cube lately. One of the things that we're really thinking a lot about is how to how does this technology make its way down to those end users, the clients. So digital cube started as an agency. So we our bread and butter, the core of our business is agency services. So something that we're doing this year, and, you know, in the US, coming from Japan, you know, we originally started as a Japanese company from Kobe, you know, the agency team has expanded here. So we're doing a lot of this client services with this technology. But we're doing it with the purpose of making it accessible for those for our clients. It's really a kind of a testing ground, we're really excited to see how the small improvements are making its way to our clients, in these collaborative projects. You know, with our agency team, it's really kind of given us a, you know, a new passion to solve these problems. We feel it's our personal duty to make these things easier to use, not just for developers, but for the end user to our clients.

Yeah, so. Yeah, so like I said, I think we have have ever been right, then do you? Would you like to add something about Astro? What What are your What are your predictions,

um, my predictions is that it's it's straight, hot fire. And it's going to keep growing the community is really exciting. There's some companies that are backing it, that are very smart, and they've made some, you know, good decisions along the way that are rooting for Astro. So they've got a lot going for them. I think that I also feels like this is like the March Madness of JavaScript frameworks. But it's, I don't know, it's just exciting to see that. Frameworks are maturing to where they're just a pleasure to use. They're fun, where you can say, like, hey, I want to build a website this weekend, or I need to build it for this project. And it's not like a dreaded task. And it feels like picking this project up again, you can clearly see that there's been progress made in that category. Like it's these are fun to use.

Yes, yeah. So with this with this kind of work, it's towards Astro. We are we are slowly ending this webinar. And I would already like to invite everyone that because on second February, we are doing a webinar on how to design an accessible website. And this time, we will host it with Amy Kearney. She's a great specialist when it comes to accessibility. So mark your calendars. And the best way to find all the webinars is visit our website Buddy dot works slash webinars. And if you if you like this webinar, remember to subscribe our our channel so then I would like to thank you again for for spending for spending so much time with me because we had to, we had really quite a few dry runs to the player to play around with with everything because this is this the really cool part about doing a webinar. I have a real lot of 10 chance to play around with so many technologies. So So yes, and and I hope that soon we will work next, our next topic, building an application with AI or something like this.

Yeah, we're gonna, I mean, really, you kind of you, you're the one that kind of tipped me over the edge into getting an AI when you asked me for your webinar description. The webinar description for this event was generated by open AI. So I I was a typical developer and I just wanted to avoid the task of writing out my description when you asked me for it. So I decided to during the holiday train an open AI model to write webinar descriptions I went to your back catalogue and I took all the examples and fed them into the Da Vinci instruct beta three and out came you know a couple good examples that I sent you and you were like hey, it looks great. And then I told you Hey, by the way you bought with that so I am very curious to incorporate AI into WordPress you know, web development and build something with that.

Yeah, so for sure, thanks to AI developers are going into this crazy lazy mode. How how to spend our holiday break to teach an AI to write the description for us. But yes, probably. I will start doing exactly the same because I like I said I also started to play around with open AI and and I really like this The slides the approach so far like I said, Thanks, Stan. Thank you, everyone who joined us for this web for this webinar. Thank you for all the questions and see you on second February during our next webinar. Thank you everyone. Bye bye