Going headless with Next.js and WPGraphQL | Buddy Webinar #23

Aug 15, 2023

Going headless with Next.js and WPGraphQL | Buddy Webinar #23

In this webinar, Fran Agulto will show us how to combine Jamstack with WordPress by decoupling it and bringing it into the modern API-driven web landscape!\r
\r
Who is the webinar for:\r
- Traditional WordPress developers who want to try the headless approach\r
- Developers who didn’t have a chance to try the WP + Next.js + GraphQL combo\r
- Project leaders who are thinking about jumping onto the headless bandwagon\r
\r
What you’re going to learn:\r
- How to build a simple Next.js application with WordPress at the backend\r
- How to use some cool Next.js features\r
- Brief introduction to GraphQL and WPGraphQL\r
- The basics of setting up a Jamstack pipeline in Buddy with testing and deployment

https://buddy.works/webinars/going-he…

[00:00] Introduction
[04:40] What does “headless” mean?
[06:05] Why we should decouple WordPress
[13:30] How to convert WordPress to a headless site
[19:33] Connecting NextJS with WordPress using GraphQL
[49:36] Deploying NextJS using Buddy
[1:05:02] Q\u0026A

Content

72.99 -> Maciek: Hello, everyone, welcome to yet another Buddy webinar.

77.16 -> Today we are going to dive into the world of headless WordPress.

82.8 -> And together with Fran Agulto, we will try to create a kind of

88.71 -> simple WordPress index js application together with a bit

93.39 -> of Graph QL. So friend, because you are much more of an expert

98.7 -> when it comes to headless and everything, tell us a few words

103.83 -> about yourself.

105.47 -> Fran: Yeah, absolutely Maciek. I'm super stoked to be here. And

109.43 -> my kind of battle cry if you will, is I'm jam stoked to be

113.54 -> here Extra extra excited. Thank you Maciek for having me. So a

118.94 -> little bit about myself just to know where your information is

122.27 -> coming from. I'm a dev rel advocate at WP Engine focused on

127.16 -> headless WordPress. I started my career actually, in tech at WP

132.89 -> engine on the sales side of things. And I was telling Maciek

137.27 -> offline when we first met, I was like, you know, the inner nerd

140.66 -> hit me. And during COVID, one of the one one of the few things I

146.06 -> mean, there's mostly negative with COVID. But one of the

148.61 -> positive things is, when we work from home, I had so much time to

152.06 -> learn. And I was like, You know what? I saw a demo that our old

158.15 -> Developer Relations Manager Matt landers did on headless

162.35 -> WordPress. And I'm like, You know what? I Maciek. I said to

165.71 -> myself, I need to learn that I enrolled in a JavaScript

169.25 -> bootcamp focus on react in the mean stack. And the rest is

172.94 -> history. Now I'm here two and a half years later and still

175.49 -> breaking React code. So

178.89 -> Maciek: yes, and now, we are we are here. So this is I mean,

182.67 -> yeah, this is one of the great things about COVID we had more

185.73 -> time to learn really cool and amazing things. So they're one

191.49 -> of the few things we can say that COVID was cool about. And I

197.01 -> am Maciek Palmowski and I work here at Buddy as a WordPress

201.12 -> ambassador. So Oh, and good news. We have Mwale with us. And

208.14 -> he's saying hi to us. Oh, hi, Mwale. So today, we'll learn

216.87 -> about how to decouple WordPress and what does it means what is

220.71 -> this headless WordPress, we will learn how to create the simple

224.7 -> next JS app using WordPress Graph QL. And of course, next,

231.15 -> and in the end, we'll try to deploy everything using Buddy en

235.89 -> and Netlify account. Also, if you like what we are doing,

243.42 -> remember to press the subscribe button on YouTube. You will

247.41 -> always get informed about all the upcoming webinars. And also

252.06 -> you will have a chance to watch a lot of interesting stuff that

255.18 -> we have on our channel. And the last thing if you have any

260.7 -> questions regarding headless WordPress, don't hesitate to ask

265.62 -> them in the comment section either on YouTube or LinkedIn or

269.61 -> wherever you are watching this. Okay, so I think everything I've

275.22 -> remembered about everything, yes. So we can start talking

279.18 -> about headless WordPress. So let's start with the basic

282.48 -> question. What does it mean? What does it mean headless?

286.77 -> Fran: Yeah, that's a that's a good start to the webinars to

290.61 -> ask that basic question. So headless WordPress essentially,

294.78 -> in a few words, Maciek is the decoupled approach A lot of

300.63 -> cutting off the front end presentation layer that PHP

304.86 -> usually handles in a monolithic sense, with traditional

308.34 -> WordPress, and allowing a front end JavaScript framework within

313.05 -> the node ecosystem to handle the front end UI layer. And then

317.4 -> making WordPress basically just a database with an endpoint that

321.66 -> you're going to consume that data out of. So essentially,

324.6 -> that's, that's, that's what it is. It's cutting the hence the

328.23 -> word headless. It's not because the you know, Sleepy Hollow and

332.76 -> Headless Horseman story that we we knew when we were kids during

337.65 -> Halloween. No, it's, it's not that, although it kind of

340.65 -> relates to that when people think oh, Fran, what is headless

342.87 -> WordPress? Is it? Does it have to do with a headless horseman?

345.33 -> No, you're literally cutting off the head of WordPress, and

348.87 -> making it having having the JavaScript front end do the work

353.04 -> on the front end UI. So so that's what that's what it is.

357.51 -> Now, the first thing I wanted to like just tell you Maciek unless

362.19 -> did you have like another question real quick? Or can I

364.86 -> dive right in?

365.76 -> Maciek: Quick question, why? Why should we decouple WordPress?

369.84 -> Fran: Ah, yes, that's actually a next. That's a great question.

374.19 -> So why should you decouple WordPress? Well, there's

378.09 -> actually, there's three main reasons that you would, okay,

383.67 -> when you sit down as a developer, and this is something

387.33 -> that, you know, you and I being in tech Maciek, especially web

391.5 -> development, at the end of the day. Typically, if you work for

396.03 -> an agency, or you're a mom and pop that has your own business

400.86 -> that relies on your digital property, aka, your website, or

404.55 -> your web application, in order to generate money at the bottom

408.72 -> line, you're going to have to make a decision on like a now

413.04 -> that it's available, headless, or traditional. Now, here's the

416.34 -> whys. Okay? If you're if if you want an uptick of perceived

422.19 -> performance and actual performance, as far as the jam

426.15 -> stack is concerned, because I throw that word out there. And I

430.83 -> will for those that aren't familiar, because there might be

433.92 -> some kind of super new beginners to the crowd of headless

437.88 -> WordPress, jam, stack Sanford JavaScript API and markup. And

441.93 -> essentially, that methodology means that at build time,

446.97 -> meaning not at runtime, because traditional WordPress is server

450.9 -> side rendered, right, it's dynamic. So when you hit that

453.96 -> URL, every request is going to go back to the server, PHP runs,

459.63 -> everything creates the files, and all the things that you

462.12 -> requested, or that template sends back into HTML form. And

465.9 -> then there Wallah, you can read it on the browser. In the

469.59 -> decoupled approach, in this sense, from a performance uptake

473.25 -> wise, you're not only cutting the front end off that

476.97 -> JavaScript framework, you're going to pre build or pre render

481.29 -> everything, meaning you're going to build everything before a

485.1 -> user requested. Okay. And then you're going to throw it on a

489.33 -> CDN, which means static files, which then in turn means Quick

495.93 -> Access. When you hit that endpoint, literally, there is no

499.74 -> going back to a server, all the files are right there already.

503.58 -> So that's, that's one thing Maciek is that like, literally,

507.69 -> the performance uptick is can be quite noticeable, perceived by

513.96 -> the user, and also within the tech stack. So that's number

516.87 -> one. Number two, from a security perspective, when you decouple

523.2 -> your WordPress site, the surface area of attack for hackers, is

530.37 -> very small. That's number one. Number two, because your back

534.93 -> end is hidden, and this is with any decoupled approach it you

538.86 -> could have a Shopify back end, you could have a Drupal back

542.79 -> end, you could have a MongoDB, back end, whatever Contentful,

547.32 -> you get the idea. It's hidden, it's hidden, so they won't even

551.55 -> know you're using WordPress in this case. So the surface area

555.18 -> of attack is more secure. And then there's only so much

559.2 -> nefariousness you could really do in a browser. And then the

563.64 -> third and last thing, and for me, Maciek, I think this is the

567.48 -> most important because yes, you could you could aggressively

571.44 -> aggressively cache pages in traditional WordPress, speed,

575.31 -> all that stuff, right? Depending on how dynamic the site is,

580.23 -> yada, yada yada. However, from a future proof perspective, I

585.72 -> truly believe and this is why I joined the dev rel team here

588.96 -> focused on headless WordPress. The future of the web as far as

593.04 -> web technology is concerned is decoupled movement. It's, it's

597.87 -> cutting the front end layer off and Having third and backend

601.32 -> party services with all that data on your back end, consumed

605.85 -> by endpoints so that you could essentially future proof your

609.69 -> front end UI, right? That way thing. When users are trying to

616.14 -> access your application or website through different nodes,

620.61 -> a kiosk, a phone, it's much easier. It's much easier to grab

626.64 -> any front end library or framework and whatnot and

629.31 -> manipulate that data from your back end API into what the you

635.34 -> want your users to see. So those are the three main things that I

638.43 -> think a business or an agency would decouple. Now, Maciek, let

644.79 -> me just add something on the flip side. On the flip side, why

648.66 -> wouldn't you? Overkill? Because I'm telling you, you know,

657.42 -> traditional WordPress is just fine for small medium businesses

662.07 -> that

664.02 -> don't have that many users like, or my sister who has a therapy

669.6 -> practice in California, she uses traditional WordPress, she does

673.38 -> not want to touch code. And WordPress is excellent for that.

676.8 -> She can just download a bunch of plugins, manipulate her front

680.07 -> end, and not even ask a developer to do anything. You

684.66 -> know what I mean?

686.22 -> Maciek: Yeah, this is a great thing that about WordPress, that

691.47 -> it can be really almost no code or low code. And the moment we

695.88 -> are trying to go headless, we require this one extra layer of

701.28 -> work, we have to prepare this front end. And there was a thing

705.12 -> because, together with friend, we had that dry run, which

708.45 -> turned into quite an interesting discussion. And we also

712.17 -> discussed that the headless is a really great solution when it

715.65 -> comes to the moment when you are, for example, let's say a

720.45 -> React developer, you don't want to learn PHP. So in this moment,

725.91 -> why learn PHP, it's easier just to grab, for example, Gatsby, or

730.83 -> sure shopping or something similar. And using your

735.09 -> knowledge that you already have. Just grab the data from

738.63 -> WordPress, mix it together. And yeah, you will have a working

742.77 -> website without the need of learning new technology, which

746.91 -> is sometimes especially right now very important, because we

750.54 -> don't have too much time and learning new tech takes time. So

755.22 -> Fran: yes, 100% agreed Maciek, it does take a lot of time. And

760.62 -> that's the thing too, from a financial perspective, the

765.96 -> decision going headless, you have to account for money,

769.47 -> because to your to your point Maciek, you're going to have to

772.53 -> hire if you don't know React code, say you're not even savvy

776.43 -> too much on JavaScript, you're gonna have to hire a React

780.24 -> JavaScript, you're gonna have to hire a developer team. And that

784.62 -> costs money unless you want to learn it. yourself. Now, again,

789.51 -> there's trade offs to everything. That's why like, I

792.96 -> truly believe that like, there's always going to be the room for

798.33 -> both monolithic and headless WordPress. And I think that's

802.71 -> the beauty that you have a choice in web web development,

807.3 -> especially, especially with WordPress.

810.54 -> Maciek: Hmm, yeah, that's, that's true. So I think it's

814.62 -> time to show how to convert how to decouple WordPress, right?

821.04 -> Fran: Yeah, let's let's let's do it Maciek. Let's talk through

823.41 -> this. So the first thing that you have to consider when you're

828.48 -> decoupling WordPress is the API layer. Right? Because as

833.46 -> mentioned, when you go the jam stack approach, the decoupled

837.81 -> approach API driven development, whatever you want to call it,

841.47 -> it's just that it's your API endpoint that you're going to

844.29 -> consume this data off of. And luckily, there's two ways you

848.37 -> can do this in WordPress. I'm going to use Graph QL. And don't

852.9 -> worry, everybody in the webinar throughout this whole webinar

858.36 -> that I'm going through, in our developers.wp engine.com

863.19 -> website, we have a whole tutorial that I'm playing off

867.18 -> of, as well as rest vs Graph QL, and all these things. So if you

871.02 -> want to dive deeper in and whatnot, I'll work with Maciek

874.98 -> to like, send some links, a post webinar. But anyway, there's

880.35 -> two, two ways you can do this. You can use the REST API, which

885.66 -> some of you that are already developing in traditional

888.48 -> WordPress already used because it ships with WordPress Core.

892.92 -> And with the REST API, you use the HTTP verbs or I like to call

898.47 -> them verbs but methods like get create, read, update, delete, to

902.22 -> grab up that data off it. And then I always pull up this

907.17 -> handbook here, from wordpress.org to so I have a

910.92 -> reference of like all the endpoints that I have, so that I

915.18 -> can grab that data from posts, categories, tags, etc. Now,

921.81 -> here's the difference. And there's trade offs which we

924.3 -> won't go deep dive because this is not a rest versus Graph QL.

927.63 -> webinar, but major difference between will actually the two

933.57 -> major difference I want to address Maciek is the way you

936.6 -> grab data. So first of all, as I mentioned, HTTP method, REST

940.56 -> API, Graph QL queries and mutations. Because what Graph QL

946.02 -> is, at its core is a query language. And when you have a

950.88 -> Graph QL layer on whatever database data data schema you're

955.98 -> using, it exposes it as a Graph QL schema this way? How it's,

963.06 -> it's interesting, because one of the benefits of it is that Graph

965.91 -> QL itself kind of makes each API is kind of different, right?

973.05 -> Whether you're using a Shopify API, WordPress Core REST API,

977.49 -> whatever back end, you might be, it's hard as a developer,

980.13 -> because you're like, Oh, great. Now I have to like expose that

982.77 -> schema and see how the API endpoints are all laid out and

987.96 -> everything with Graph QL it uniforms it and turns everything

992.43 -> into a Graph QL schema. And most, I'll show you real quick

998.22 -> most Graph QL instals. Now, within a database, have this

1003.98 -> graphical IDE editor, where you have a query composer, and this

1009.41 -> is that my WordPress schema here, exposed in a Graph QL

1013.4 -> scheme. So that's the beauty of Graph QL, it kind of unsniff

1018.29 -> flakes, each API because of API to me, it's like a snowflake

1021.59 -> Maciek, it's all different, unique, and Graph QL, we'll

1024.47 -> just, um, snowflake that and now you were like kind of used to

1028.4 -> this graphical IDE. And then the other thing I wanted to point

1031.97 -> out is that I showed you guys can reference that in

1036.02 -> wordpress.org, all begin points within WordPress that you have

1039.2 -> access to and rest. But in Graph QL it is just one endpoint. And

1046.1 -> within that endpoint, in rest, you're you you're at the mercy

1049.97 -> of what's in the API, you can't declare exactly what you want.

1054.53 -> But as I mentioned here, in Graph QL, in this case, again,

1059.72 -> queries and mutations I'm clearing and asking my Graph QL

1065.75 -> server, which is on top of WordPress, now, hey, Graph QL.

1070.88 -> From my WordPress data schema, I want all the posts. And within

1075.77 -> those posts, those posts have nodes. And those nodes have

1079.25 -> fields of title, your eye, I'm pulling out the date the

1082.64 -> content, you can pull out other things. But for the webinars

1086 -> sake, we're just going to run this press play against the

1090.26 -> Graph QL server.

1092.63 -> And there you go. I asked exactly for this data, and in

1097.73 -> this form, and it's giving it back to me in this forum. JSON.

1102.38 -> So simple as that. That's how we decouple WordPress with Graph

1108.41 -> QL. Now, skipping one thing in the plugins, and I gotta give a

1113.12 -> shout out Maciek, I know you know what, I'm gonna shout out

1116.06 -> to one of my favourite people in the decoupled movement in

1121.13 -> WordPress. Mr. Jason

1123.65 -> Maciek: Fried Pizza. Yeah.

1126.74 -> Fran: In fact, I, I think I'm doing an injustice to Jason.

1131.33 -> Because I should have had like an Arab fried pizza for lunch

1137.84 -> here, but anyway, brought to you by air fried pizza and Jason

1140.9 -> ball. So WP graph. QL is an open source plugin created by Jason

1146.6 -> ball who works at WP Engine and he's one of my favourite people

1150.53 -> in the world. But essentially, all you do is download this

1154.13 -> plugin. And then it turns your WordPress instal, like I said,

1158.39 -> into a graph, QL server, and then all of a sudden, you have a

1161.42 -> Graph QL option in the menu on the left side of WordPress Core.

1165.77 -> And then you have your graphical ID. So that's it. That's all you

1169.4 -> have to do to decouple WordPress. Now, Maciek, we're

1174.29 -> ready to talk about the front end. In this case, we're going

1179.03 -> to use next JS for our front end framework. And then for some

1185.96 -> helper functionality to grab the data. On the front end, we're

1191.45 -> going to use the Apollo client and its Graph QL library. So

1195.17 -> let's jump over to my Visual Studio code here. And I have

1201.77 -> some things already pre made for the sake of time here. And

1205.28 -> again, don't worry, we have an step by step tutorial on the

1209.27 -> website that I'll link over after the webinar is over. So

1215.36 -> the first thing I want to talk about is next Js itself, right?

1221.33 -> Because it last time I checked, which was like last week, and I

1229.34 -> always see Lee Robinson, who's the head of Developer Relations

1233.09 -> at verse cell. Next, Js is made by Marcel. And it's the most,

1238.43 -> it's the most popular, most used downloaded framework in this

1244.61 -> ecosystem, and there's a reason for that. And for me, developers

1249.44 -> are full of opinions, and whether you agree with them or

1252.74 -> not, that's just how they are Maciek, you know that you've

1255.59 -> been doing this longer. You know what I'm saying, Man, so I'm

1260.18 -> going to share with you guys my opinion about why I think next

1263.15 -> Js is so popular. So the first thing is the developer

1266.72 -> experience and the productivity of the developer flow that

1270.8 -> allows you to get into off the bat as a developer, okay?

1276.32 -> Because the first thing is how its structured, boilerplate

1281.33 -> wise, when you spin up and pull, it's an NPM package out of the

1284.75 -> box. So if I jump into my terminal right now, which I did

1290.87 -> before this, and then put the utility command in there, MPX

1295.31 -> create next app, it's going to pull out all the dependencies

1298.58 -> and the packages and all that. And this is basically a next Js

1304.76 -> boilerplate, I've made some things, but I'm gonna go over

1307.25 -> what it spins up out of the box here. The first thing I think is

1310.85 -> super sweet is the page based routing that it does out of the

1314.45 -> box, because as a web developer, especially on websites, next to

1318.98 -> us is actually built architecturally already for you

1323.63 -> for pages and routes. And as a web developer, you're like, oh,

1327.65 -> great, sweet, my friend. And my framework that I'm using already

1331.97 -> does that for me. So in this pages directory, all you do is

1336.56 -> in this case, the index.js comes out of the box with it, that's

1339.92 -> the homepage, when you hit the just the forward slash, that's,

1345.05 -> that's the default homepage route. But I can drop in this

1348.53 -> page, and it relates to the file. The route is related to

1354.5 -> the file name. So if I put like about.js Maciek in this, and

1359 -> then render a, create a React component, a default component

1363.05 -> and render some JSX, like, Hello World, or whatever. If I go to

1367.88 -> my browser, and then visit that path, slash about, it's right

1374.69 -> there for you. So that's one of the things that I think is

1377.57 -> pretty sweet. And then obviously, this is built on top

1380.15 -> of React. So it uses React component style library. And

1386.33 -> then the second thing that I think is super sweet about next,

1390.47 -> Js, and I'll get down into this, once I start talking about the

1394.58 -> files and how to create a headless WordPress site here

1399.41 -> is the rendering patterns that next Js allows you to have as a

1404.45 -> developer at a page level, right? Because I mentioned at

1409.19 -> the beginning that like going decoupled and JAMstack in your

1412.1 -> site is the approach of hey, as much as we can, at build time,

1419.57 -> before user even is available to request and hit that URL at

1424.55 -> build time. Let's build everything. Let's build

1427.43 -> everything. Let's make it static. Let's throw it on the

1430.07 -> CDN. faster access. Some people in countries that maybe the

1435.38 -> internet's not so good static file, they can access it. Okay,

1439.55 -> great. However, with pre pre pre rendering, if you will, pre

1446.36 -> building there's a trade off long build times. Because if

1451.76 -> your site is ginormous, and you're building everything from

1454.73 -> scratch, every time you make a change that gets that that's a

1460.28 -> trade off, you're gonna you're gonna have long build times when

1463.25 -> the

1463.85 -> Maciek: new page will make it longer and

1466.55 -> Fran: longer and longer, longer and longer. Yes, Maciek.

1469.58 -> Exactly. Exactly. It's like rebuilding your house every dang

1473.18 -> time you make a anyway.

1477.23 -> Maciek: Yeah, just I decided to clean the window. Let's let's

1480.86 -> change Let's rebuild the fundamentals to build the

1483.26 -> concrete. And this extra annoying when you have, for

1489.77 -> example, a new site that has news from like 10 years

1494.15 -> backwards, and you just published a new post and if you

1499.46 -> would pre build everything he has all the news from those 10

1503.12 -> years back will be rebuilt. So this is a trade of, as you

1509.96 -> mentioned,

1510.72 -> Fran: 100% a trade off. Now here's how next Js kind of

1514.65 -> alleviates that as, as well, on a per page basis. You have the

1520.56 -> optionality to either statically generate, or pre build, if you

1525.84 -> will, each page. Or you could go back to and again, Maciek and I

1534.06 -> were joking around, because if you're on a Twitter space, in

1537.09 -> web development, and other social media platforms, there's

1540.69 -> this joke going around that like web development is like fashion.

1545.67 -> In the 70s, bell bottoms were in disco, you know what I'm saying?

1549.81 -> Guess what Maciek bell bottoms are making a comeback, retro.

1555.3 -> And then like server side rendering, could be making a

1559.53 -> comeback. But in next Js, you can choose per page to server

1564.12 -> side render instead of statically. Generating so that

1567.66 -> your entire site's not pre pre building, if you will. And then

1572.7 -> there's a hybrid pattern of like incremental static regeneration,

1576.96 -> where you can set a time interval where the paid, say a

1580.65 -> certain page is changes quite a bit, but you not enough to like,

1586.86 -> Hey, I'm going to statically pre build this page first. But in

1591.33 -> next few years, I can set a revalidate cache interval, where

1595.38 -> it's going to check my back end and this in this case,

1598.74 -> Wordpress, say you set it every 30 minutes, whatever the time

1601.95 -> interval is, is going to check to see if there was any changes

1605.97 -> within the data. And then it's going to invalidate that on a

1612.57 -> timed interval. So the first user that hits it will get the

1615.57 -> stale data, then that triggers it to go okay, yeah. And then

1618.84 -> now we're going to show on upon every subsequent request the new

1621.81 -> data so. So that's what I think is sweet. Okay. So I think now

1630.21 -> we are ready to get into the nitty gritty, and just go over

1634.11 -> how, how I did this thing. So let's, let's do it. So. So the

1640.02 -> first step in creating a headless WordPress site is, as I

1645.96 -> said, we're connecting, we're going to use the Apollo client.

1650.73 -> And you can download the package, I've already installed

1654.45 -> the Apollo client dependency, and its Graph QL client, so we

1658.56 -> can use this data fetching library. So we need to hook

1663.48 -> Apollo client to WordPress. So the first thing that we have to

1666.21 -> do is use environment variables. And how we're going to do this

1671.67 -> is we're going to create a dot e NV dot local file, which I

1676.2 -> already have right here in the root of my project. And when

1680.43 -> within this environment file, you're going to have a key,

1687.15 -> which you can name whatever you want. In this case, I named it

1691.5 -> next public WordPress API URL. And then you simply put your

1697.68 -> value in your WordPress API URL exactly what the key is asking

1701.73 -> you for. So that's the first thing so then what happens now

1705.27 -> is that within next Js, by default, it's going to look for

1709.5 -> the dot E and V dot local file in the root of this project, to

1714.6 -> load any environment, variable files within a dot process dot

1721.11 -> EMV object, which I'll show you in a second how that's created.

1724.02 -> So. So that's step one. The next step is the Apollo client. So we

1730.92 -> have to now that we've downloaded the dependency of the

1733.38 -> Apollo client, we just have to create that instance of Apollo.

1737.28 -> So let's see how I did this here in this file. So what I did is I

1741.78 -> jumped into the root of my directory, I created a folder

1746.31 -> called library or lib for short. And within this library, I have

1750.45 -> an apollo.js file.

1753.99 -> And then let's see what the configuration says. So the first

1757.32 -> line up at the top, on line one, I'm importing the Apollo client,

1762.75 -> and it's in memory cache from the package. Okay, and then

1766.77 -> below, I'm creating a new instance right here of the

1770.1 -> Apollo client, and I'm just calling the variable client. And

1775.32 -> then within this, we have a config object with two

1778.29 -> properties Maciek is a URI property, that's going to point

1784.8 -> our environment variable to that graphQL endpoint, because that's

1789.87 -> where Apollo is gonna say, hey, Fran, and Maciek, where where's

1794.88 -> your WordPress? Data? Where do you want me to grab it? It's

1798.21 -> right here. So that's What I was talking about with the process

1801.36 -> dot ENV object that next Js will look for, as far as from the

1807.69 -> Apollo side is concerned. And then one of the reasons to use a

1812.85 -> client side library to help is having in memory cache on

1818.1 -> Apollo, which is one of the main reasons people and web

1821.61 -> developers use Apollo client so that when you make a query, a

1825.33 -> graph, QL query, and a same one is made it caches and stores in

1831.54 -> Apollo's memory that way, there's some performance upticks

1834.09 -> there. Okay, so that's it within a couple of six, what is it,

1840.12 -> four or five lines of code here, we've configured an Apollo

1843.3 -> instance, and we've connected WordPress, to our next js

1847.65 -> application. Now, we need to access this and then get grabbed

1854.46 -> that data dynamically from WordPress within our pages. So

1857.22 -> let's let's do it. Okay, so the next thing you have to do is

1862.2 -> within the pages directory in order to make your Apollo client

1866.61 -> and its provider accessed throughout the root of the next

1870.09 -> js, application, and all its components, and its pages, is

1875.64 -> next Js ships out of the box, I just call it a wrapper, it's the

1879.84 -> underscore app.js file. And within this file is where all

1884.73 -> the page props within the page components are accessible.

1888.93 -> Within next Js, and in here, as you can see, I'm importing the

1892.29 -> Apollo provider from its library client, and then its react

1896.37 -> instance. And then I'm taking our client that we just made

1900.99 -> from our library, Apollo folder here, and then I'm wrapping it

1906 -> around the Apollo provider component, and passing in the

1909.27 -> client as a property so that now Wallah, we now have access to

1915.39 -> our Apollo provider across our entire next js application. And

1920.19 -> Okay, step two is done. Now, here's the fun part, y'all. And

1924.63 -> I, and this is this is, this is where I get really excited. So

1929.46 -> the first thing we're going to do is we're going to talk about

1932.61 -> how making the homepage in and don't worry, I'm talking about

1939.42 -> code I know is abstract, you know that to Maciek, but I'll

1943.17 -> hit the browser once or twice just to show you what's going on

1947.04 -> and seeing that sweet JSX and HTML. But the first thing we

1951.72 -> need to do in our homepage, because this is what I actually

1955.11 -> want to do here is I want a list of titles on the homepage. And

1960.6 -> then within that whole, within those titles, I want a clickable

1965.67 -> link so that the user can click on that post title and go, Ah, I

1970.23 -> want to be taken to the details of this. This this post, give me

1975.21 -> the post Details page. Okay, so the first thing we're going to

1978.24 -> do on the homepage, and it's funny, because I think of this,

1984.21 -> a basketball analogy. I know I'll most a lot of developers

1989.64 -> maybe have like little quarks on how they think of things. But

1992.67 -> for me, this is how I think of this, like so it's like when

1996.24 -> you're doing a basketball shot, like you're like taking the

2000.11 -> basketball from from down here. And then you're shooting it so

2004.34 -> that the ball goes up and into the basket. And in this case, my

2011.21 -> hand is my functions. And then the the the ball is data, and

2015.95 -> the ball is jumping into the hoop to give the data into the

2022.16 -> JSX and HTML corny I know, but it's how I remember things. So

2026.87 -> it starts off with the first function here that you guys can

2031.01 -> see on the screen Maciek you can see clear yes, right here. I'm

2033.86 -> Maciek: like yes, yes, of course I've ever think is visible.

2036.98 -> Fran: Okay. Perfecto. So the first thing that I mentioned at

2043.82 -> the top is that with next Js, you have the option of

2050.27 -> essentially statically generating all your pages pre

2053.27 -> rendering pre building, within next. Js, the function name to

2056.9 -> do this is export is going to be an asynchronous function, get

2060.92 -> static props. Okay, that tells next Js. In this case, it's,

2067.85 -> it's, I'm telling it, hey, for the index page, I want this to

2071.99 -> be statically generated every time and that's okay. Because

2076.16 -> the data here won't change much. Plus our query is stagnant. It's

2080.87 -> not dynamic. There's no variable. It's the same query

2084.44 -> that you can that we made, actually from the graph, QL IDE

2089.33 -> and WordPress. So that's the next step that I wanted to talk

2092.33 -> about is that within our asynchronous get static props

2098.39 -> function, we're going to Create a variable I just named it get

2102.08 -> post, which is going to equal our Graph QL. Client. And that's

2107.3 -> when you would go back. And remember our query here. Y'all

2113.99 -> remember that? Yep. We're gonna go back, we're going to take

2117.83 -> that query, and essentially, paste this within a template

2122.54 -> literal backticks, into this variable here of getting the

2127.58 -> post. So that we're telling next Js, within this function. Next,

2135.2 -> Js, this is my graph, QL query. And this is exactly what I want

2138.95 -> to grab. Now, after that, we're going to have to make a call

2143.54 -> with a client and passing the query string to the config

2146.21 -> object right here. Because like I said, I called it get post.

2150.35 -> And then here's the query property here. And we're just

2153.17 -> grabbing that, then we have to traverse that data to pull out

2156.47 -> the data we want into the homepage. So here's the other

2160.61 -> variable of posts, and then the response is going to be data

2163.61 -> post notes. You're probably asking Fran, how do you memorise

2167.33 -> there? How do you know that I don't memorise these things? Are

2170.12 -> you? Are you kidding me? Coding is hard enough, developers

2173.81 -> always look at Doc's. And go, do you know what I'm saying? So

2178.46 -> just so that I remember, Oh, how does it return? Again, I go back

2181.64 -> to my graphical IDE. And there, there it is how it comes back

2186.41 -> within the graph, QL schema of WordPress data, post notes. And

2192.32 -> that's how you manipulate the response and get back, get it

2196.61 -> back. And then you have a return object, of course, with a props

2200 -> property, and then you're returning all the post data.

2203.48 -> Okay, we're set with our function, this is grabbing our

2208.28 -> data. Now we have to, we have to shoot that data up into an

2213.41 -> export default function, that's going to act as our page

2217.22 -> component. Okay. And this is where it's going to return the

2220.85 -> JSX, which will show the HTML on the page. So in this case, right

2226.22 -> here, within this function Maciek, putting within the

2230.87 -> object parameter post, because that's the data that we want

2234.41 -> accessible within this function. And then I'm just returning some

2238.88 -> H, HTML with some JSX. Right here mapping through dynamically

2245.06 -> mapping through all the post data, and then returning a

2249.14 -> single post. And then within this return statement, you're

2253.46 -> gonna notice something you all here. And this is one of the

2256.4 -> cool things of React development is component reusability. So I

2262.67 -> created a postcard component, because remember, I told you all

2266.03 -> that the idea here and you'll see in a second, because I'm

2268.34 -> going to spin up the browser is we want a clickable link with

2274.97 -> the post title, right? Well, you know, we want to make that

2279.2 -> pretty and reusable, because we might have another page that

2281.9 -> might need like a postcard, and whatnot. So in I built it, I

2286.88 -> made a components folder with a postcard.js file. And within

2291.89 -> this, just an export default function with the postcard and

2297.05 -> then we've got the posts. Within the parameter object, we got the

2301.19 -> post data in here. And then we're pulling back the

2304.94 -> essentially we're just grabbing the post dot title within using

2309.35 -> next link. And that's another sweet thing about next Js, it

2313.55 -> has the link component with client side transitions for

2317.27 -> linking between pages out of the box. So that's cool. So let's

2323.18 -> see how that looks on the browser, shall we? So if I just

2330.5 -> run my development server, and it kind of always defaults to

2333.71 -> localhost 3000 Let's visit the browser here. And there it is.

2342.71 -> And before I actually, here's the postcard component, and then

2348.95 -> here is this is the dynamic data that we're grabbing right here.

2353.36 -> This isn't from the next Js front end, these titles are

2358.01 -> coming from here. Okay, so the next thing we're going to want

2364.73 -> to do is when I click this link, I want a dynamic route page to

2370.64 -> route me to the actual detail of and I know everybody's dying

2374.99 -> Maciek to know what my top five movies of all time are. Like. I

2379.37 -> know already you may know already and you had some

2381.8 -> disagreements and that's okay. But um, lastly, we need and then

2389.9 -> I'm super excited for the next step because I want to see how

2392.45 -> we're going to deploy this to Buddy, Buddy. But lastly, what

2397.88 -> we need to do like I said, is homepage, not dynamic, right?

2403.19 -> It's always the same query and whatnot. But we need a dynamic

2409.01 -> route. Okay? So every time a user next is doesn't know, when

2414.68 -> they click on the link, what that user is going to click, and

2417.68 -> what route and path to access and what content detail that

2422.06 -> posts relate to index js, the naming convention, you all to

2428.12 -> create a dynamic route file is the bracket syntax. So in this

2432.89 -> case, I have I made I created a dynamic route file, and the

2438.02 -> parameter within this dynamic route, you could do URI, I do

2443.33 -> slug, it's just the easiest, just this the slug of each post.

2448.61 -> But I'm just like that, this tells next, Js, hey, this is

2454.88 -> this relative dynamic. So we're not, we're not, we are not super

2460.52 -> sure what the user is going to access here, slug wise, but it

2465.56 -> will be a parameter of slug. And then when they click on that

2470.21 -> detailed page, to that slug, we're going to give them back to

2474.68 -> the post detail content. So let's, let's see how that's

2478.49 -> done. You're going to notice a little bit of similarity here,

2481.73 -> y'all.

2483.62 -> Because, again, you guys saw this on the index page, right?

2488.15 -> Get static props, we want to essentially, jam stack this

2493.73 -> thing and grab the data pre rendering from WordPress, and

2498.29 -> then pump it into our HTML JSX. Up on our default function. Now,

2503.9 -> here's the thing, right? Notice a couple of differences.

2508.13 -> Remember, I said this is a post detail page, we don't want all

2512.63 -> posts, we don't want that. That's what we're grabbing on

2516.35 -> the index file index.js file on the homepage, we're grabbing all

2519.38 -> the posts, because that's never going to change, we just want

2521.36 -> all the titles. This is the detail page. So if you notice

2524.72 -> the query changed a little bit, y'all, and you can paste this

2527.99 -> into graphical ID, and it'll come back. But notice here is

2533.51 -> that it's singular. And then to parameter a ties, if you will,

2539.51 -> this query so that it knows, hey, this query is, is his

2545.03 -> variety, it's a variable, okay? Like it's not static, like the

2549.29 -> index file, friends asking for actual details to a post with

2556.49 -> the ID type, which is the slug. And the database ID meaning

2563.69 -> that, hey, this is this, this is a, these are the things that are

2567.53 -> going to be changing within this query within this graph, QL

2572.21 -> query. So that tells next, Js, hey, yeah, within Graph QL, this

2578.81 -> query is a variable, and it's going to relate within this

2583.79 -> parameter. Within the object here, you pass in the params,

2587.72 -> which is the slug. And it's going to say, Hey, these are

2590.48 -> the, it's going to look back into WordPress and go, Hey, this

2594.41 -> user is asking for a friend's top five movies. That's the

2598.37 -> variable that he's asking for. So let's give him that data

2600.92 -> back. Okay. So that's, that's, that's the major difference is

2604.88 -> this. This query has variables, the index page did not. So now

2611.51 -> this is very similar. But again, we have to account for the

2615.29 -> variables. So we have a response variable where we await the

2619.07 -> client, then we have a property of query and then same thing get

2623.42 -> post. But again, accounting for the variable, which in this

2627.41 -> case, the parameter is the slug, that's what's going to be a

2631.52 -> variety, it's going to be a variable, it's going to change,

2633.71 -> okay. And then down here, we traverse that with data post.

2640.58 -> And then we return the property of the single post this time,

2643.97 -> not posts, posts, that's the major difference between the

2647.12 -> dynamic page and then the homepage. And then, the last

2652.22 -> thing I wanted to go over before I show you everything and then

2655.46 -> pass the realms over to Maciek is that if you notice, we have a

2662.27 -> new function down here. This is get static paths. Now within

2668.63 -> next Js, the in a dynamic route file, when you're going to make

2673.73 -> get static prompts. You have to pair up with get static paths.

2678.8 -> Because next Js pre will generate a static version of

2682.7 -> your page when it starts serving the app. So what happens is,

2688.34 -> because these paths are dynamic, and they're multiple, you have

2694.7 -> to let next Js know, hey, within this dynamic route, there's

2697.94 -> different paths right? Excuse me that we're going to have to

2702.86 -> account for two, otherwise, it's not going to work, we need the

2705.8 -> paths and their props. So this is the function that pre

2710.84 -> generates or pre builds the static paths. Here's the caveat.

2714.98 -> And this is going to be solved in the future, maybe Maciek you

2717.53 -> and I can do another webinar indicator when Jason ball

2721.16 -> releases WP Graph QL smartcash. But here's the thing that here's

2725 -> the issue right now. If you're getting into headless WordPress,

2729.17 -> and using dynamic route files, index js, sometimes, we didn't

2735.56 -> get stuck in static paths, you can make another query of

2739.88 -> grabbing all the paths and pre building them. Okay. Which is

2746.12 -> fine. Because obviously, it's it's pre built JAMstack

2750.92 -> snappier, faster. caveat to that. When it when you have a

2757.7 -> large site, like maybe Android authority, who's on WP Engine

2762.38 -> using headless? Or if you're if you'd like sports, I don't know,

2766.49 -> ESPN, okay.

2769.85 -> Those have those are big, large, huge sites with multiple pages

2775.22 -> and paths. Imagine, every time you have a dynamic route file,

2781.67 -> you're going to tell next, yes, oh, build every single path

2786.47 -> that's going to pin your WordPress ever, how many ever

2790.19 -> times that you have, as far as like, those pages are concerned,

2795.38 -> that's not good. You're going to timeout your WordPress server

2798.35 -> exhausted and it's kind of like your DDoS attacking yourself.

2801.53 -> And it's going to timeout the WordPress server and then you're

2804.05 -> gonna get a 504 and a JSON error. You don't want that. So

2809.21 -> and again, this is only for large sites. But for best

2812 -> practice, you can essentially do two things right here. The first

2817.73 -> thing is, as you can see, in this get static path function,

2821.45 -> I'm returning here, I'm I crossed out the slash about

2826.28 -> path, but I'm returning an empty array. Okay. And then I return

2832.01 -> just the past and fall back blocking. This is telling next

2835.31 -> to Yes. Oh, next. Js, I want you to not pre build these static

2840.38 -> paths. But at runtime, aka server side render, that's what

2845.57 -> I want you to build the path when the user is trying to

2848.18 -> access the link on the browser, server side, render that built,

2853.7 -> build that at runtime, okay. And then after that, after

2859.46 -> subsequent requests, that path is already built. And then it's,

2863.9 -> it's static. So the code here is fallback blocking to server side

2869.9 -> render that now if you must, if there's really important paths

2874.1 -> that you need to pre render, like I said, you can just open

2878.39 -> up parentheses and then actually declare the relative path right

2882.74 -> here, and say, I have about page in here, somewhere, it'll, it'll

2888.5 -> pre render that actual path so that like, there's certain

2891.17 -> passes, you can render. So so let's see how this works in

2893.84 -> action. Super excited. Okay, I didn't close the server, the

2898.13 -> dump server. So now in theory, when I click on this link, it

2903.98 -> should take me to a post detail page with my top five movies of

2907.58 -> all time. And there it is that it did it. Yeah, there you go.

2913.94 -> The dynamic route, brought to me this path, which is the

2917.99 -> parameter of slug here. This is the slug of this detail page.

2922.49 -> And hopefully you like these movies, maybe you don't, that's

2925.64 -> okay. And that's how you build a startup headless WordPress site

2931.82 -> Maciek. I mean, again, I pre built all these files, and we

2936.32 -> have a step by step tutorial that you want can do but as you

2940.16 -> can tell, it's there's quite a bit of code code involved and

2942.98 -> whatnot, but we're trying to lower the barrier of entry to

2946.37 -> make it that much easier. So

2950.36 -> Maciek: yeah, and what's important right now, this is at

2954.89 -> least this part the single pages are server side rendered,

2958.46 -> because you set this static path to blocking Right,

2965.06 -> Fran: correct. That is correct. So this is the path of server

2969.08 -> side rendered. And then every subsequent request from then on

2972.56 -> is is cache.

2976.28 -> Maciek: Yeah, so are the thing that that this, this left we

2983.69 -> should and I will show how to how to deploy how so? So now

2993.32 -> it's my turn. I'm just doing some. Okay, let me just zoom in

2999.74 -> a bit. because I know how so cool this is, in general, the

3004.15 -> repository, we already talked about this. There is just one

3007.96 -> thing about which friend didn't mention because it wasn't

3011.11 -> related to, to the product itself is this Netlify dot tomo

3018.04 -> file. So this is in short this configuration file to deploy on

3022.63 -> Netlify. The problem here is the problem, it's that moment when

3026.92 -> we are using server side rendering, we need a note

3032.41 -> server. Because the cool part about using everything that is

3039.22 -> prebuilt, we can just drop it anywhere because it's just HTML.

3044.38 -> Right? Now, we will have to use Node. That's why we will deploy

3051.04 -> it on Netlify. Because Netlify has a feature like this. Also,

3055.87 -> we can use versatile, some digital ocean if we can

3059.53 -> configure it properly. Okay, so let's do it. Yeah, so we're

3065.56 -> going to create a new project. Zoom. This is this body run.

3075.58 -> Project. So let that initialise. Okay. And what we have to do is,

3082.72 -> of course, create a new pipeline. Pipelines are of

3087.58 -> course, the set of actions we will be repeating every time we

3091.54 -> will try to deploy our code. So let's call it deploy to Netlify,

3100.12 -> right, because we will be and we will do it manually every time.

3106.72 -> When we press the Run button, let's add a pipe. So we go to

3115.99 -> our pipeline will do two things. First, we will try to build

3121.36 -> everything locally, at at Buddy to see is everything all right

3127.84 -> with our code. Why? Because it's much easier to debug some build

3134.68 -> errors using Buddy rather than using Netlify. So first, we're

3139.57 -> going to use that node command. And here we are going just to

3144.52 -> run NPM instal. And it was NPM run build, if I remember, what

3150.58 -> is important, if we will, or let's let's run it, oh, I forgot

3159.22 -> to change because it will be better to run on Node 17.

3163.54 -> Because you use its newer syntax at some point. So let's, it will

3169.99 -> be better to do and let me show what will happen because it will

3174.49 -> crash, it will crash for some reason, and we will fix it

3179.38 -> together. Okay, so it's now it's installing everything we have in

3189.73 -> our package json file. It will take a second because the first

3196.99 -> time is always the longest. Okay, and it's starting to

3202.87 -> create everything trying to collect the page data. Cool. And

3208.78 -> we have an error. Why? Because friend used very good practice

3217.03 -> of storing some of the data in the end file. But we shouldn't

3222.31 -> never store the env file in a git repository. So we have to

3226.54 -> pass the variable responsible with the URL of the of the

3231.94 -> WordPress inside we have something like the variables,

3235.48 -> and they can be either pipeline wide or action wide. We will

3239.59 -> store it for the for the whole pipeline. So we need this

3244.3 -> variable called x public workers PPI URL and it has to be the

3255.79 -> Okay, so let's see what will happen right now. So let's go

3260.8 -> back into the run. Let's run it again. And let's see what will

3266.98 -> happen. This is cool right now.

3276.52 -> So again, this time it was faster because all the packages

3279.73 -> were already downloaded. And this time collecting the pages

3286.9 -> that we see the generating static pages three out of three,

3290.11 -> everything is done. So we were missing this variable. So right

3294.07 -> now we see that the whole build process is working. That's

3298.69 -> great. So we have it locked. If we will have a prebuilt page, we

3303.94 -> will just move only this dot next folder onto onto nullify,

3312.31 -> because we need to learn to note server, which everything is

3316.75 -> configured in this Netlify dot Tamil file, we will just do it a

3321.07 -> bit differently still, we will use that Netlify action.

3331.69 -> And instead of the default Netlify Deployant select in the

3336.34 -> directory, we will do something like this and we will I already

3344.53 -> integrated with with my account called premium Euler. The

3348.4 -> problem is, if you will try to deploy right now we'll hit the

3353.44 -> same problem, we had action before. Because Netlify doesn't

3358.87 -> have this variable set this next public WordPress API URL and it

3365.17 -> will be built on the server. That's why we have to use

3371.17 -> nullify CLI has this great command called Netlify env. Set.

3377.71 -> And we will set the next public WordPress API URL, and it will

3381.22 -> be automatically taken from our variable. So we don't have to

3384.88 -> correct it in both places. We will we will store it at once.

3389.17 -> And then we'll run Netlify deploy and with the build

3393.7 -> parameter. So there was this built action set in this Netlify

3397.27 -> TOML file. So everything should work. Let's nice add this

3402.19 -> action. And the only thing left is to is to run it. Let's see

3409.78 -> what will happen.

3415.78 -> Okay, so we we now have a few seconds. Until we'll, we'll

3424.9 -> we'll get the result and we'll see what will happen. So already

3428.47 -> the NPM build, as we see that now we are setting this next

3432.22 -> public, WordPress APA URL to our URL that we wanted. And in the

3439.93 -> meantime, we are deploying. Okay, it was set right now and

3444.19 -> I'm gonna context the belt is happening. We can see that the

3449.17 -> config file from the Netlify TOML file will be used. Oh yeah,

3453.97 -> I see. Yeah. Okay. That's why. Yes. And then, yeah, it's always

3464.74 -> taking away. We can talk a bit about your, oh, we have an

3469.27 -> error. I always hate when this happens. And it happens Netlify

3478.81 -> NPM. Run build config environment known version. This

3484.75 -> is this is rather weird. Let's check. Unexpected tokens. This

3495.37 -> is weird. It should you know what? I set the version of the

3502.87 -> node to the latest one. Yeah, you did. I saw that. I saw. I

3508.66 -> did it. But so you know what we're gonna do? A bit dirty fix

3516.7 -> right now because it doesn't. It's yeah, this is this is the

3523.42 -> thing about version changes, and everything's gonna work fixed in

3530.68 -> the code. Because because Brian is using always the latest

3536.02 -> latest stuff. And this is and this is great. I mean, I need to

3541.87 -> find, okay, now. That's why it is jumping like this. Oh, girl

3548.98 -> by the second. Okay, I'm trying to Okay. It was the fallback?

3555.13 -> No, this is the post responses. Okay, here. Sorry, not this one.

3561.16 -> It was on the index js and slide. Okay. I see is the

3564.67 -> problem. So we're going to fix it right now. Let's get to the

3570.79 -> index file. Let's click at that. I already see. See the problems

3579.91 -> here? Yeah, this is it. Because this is this is a newer syntax.

3584.8 -> And for some reason, I see that. Okay, if I did not set the node

3591.43 -> version of what I want, I won't go into details right now. Just

3596.11 -> Let's retry the execution should it should go right That one, if

3600.43 -> not, we'll just rebuild it from from the beginning, then then it

3604.15 -> should work. It because this is the thing that was either in the

3608.56 -> lighter in some latest 16 version or in 17. From from what

3614.2 -> I learned, because it took me a while trying to figure out Yeah,

3618.82 -> so let's rebuild everything from scratch. It will be. It will be

3624.19 -> easier. Let's try it. Let's do it. It should be all right now.

3631.03 -> And if and if not well, we'll see.

3638.59 -> Fran: You got it. Love it.

3640.54 -> Maciek: Yeah. Those are the joys of

3647.08 -> Fran: live webinar in. Oh, yeah.

3649.9 -> Maciek: Yes. Some things are happening. Yeah. But in general,

3654.19 -> we can see that the problem was related to this. Okay.

3665.41 -> Come piled.

3668.38 -> Fran: Yes. Come on, baby.

3670.93 -> Maciek: Yes, it was at where it wants to be. It went through it

3674.92 -> went through it was it was this one? Yeah, I'm kind of surprised

3679.57 -> because I did test before something with setting the node

3685.84 -> version on Netlify. itself. Didn't work, right.

3690.01 -> Fran: Is that what okay.

3692.11 -> Maciek: Okay, and then we have the website URL, everything

3694.93 -> should be working. So we can we can copy the URL. Paste it and

3702.28 -> see if the website is working. Oh, no, that's it's my old one.

3709.36 -> So. Oh, yeah. Because I'm using this. I'm using the same account

3714.82 -> for for all the tests. Oh, please rebuild. What are you?

3720.94 -> Why are you behaving like this during the live webinar? This is

3723.88 -> this is really not nice of you. Oh, this is totally weird,

3731.68 -> Edward. This it's weird. It's something totally different. And

3737.44 -> it's not can Yeah, that was.

3741.4 -> Fran: That's interesting. I wonder if it's because criminal

3744.31 -> Reaper,

3745.18 -> Maciek: it's showing me the the previous version of the website

3750.67 -> that we're offering is yeah, this is let's check the this

3756.91 -> one. Yeah, something is. Let me close this. Okay, this one will

3763.75 -> work. Yeah. So like, I already see the title. And was WordPress

3768.73 -> starter? Yay. Yes, we have cash cash. Of course, if everything.

3779.08 -> If something goes wrong, it's the cache. Yeah. clear the

3783.07 -> cache? Cache? Exactly. So yeah. This is, this is more or less

3792.34 -> how we, we can deploy everything. Of course,

3795.64 -> everything, it's very important about keeping an eye on on the

3800.29 -> versions of node of tools like this. And here we can, we can

3806.23 -> see that the routing is working. Also, because this part is

3811.06 -> dynamic. Could you try doing one thing? Please change the title

3816.31 -> of this website? Spent? Let's, let's do something. Okay. So we

3822.82 -> can see that without rebuilding that this is dynamic. So we will

3826.24 -> press the Ctrl.

3830.8 -> Fran: Oh, you mean? So? So? So. So this actually is statically

3842.74 -> this dynamic page? Just that just the slug path is dynamic?

3849.01 -> The actual content is still on the page getting started? page

3854.08 -> itself is static. Not that yeah, it's the path that's not in the

3857.2 -> route. Okay. Yeah. So

3862.96 -> Maciek: have to rebuild everything to

3865.09 -> Fran: we would have we would have to Yeah, we would have to

3868.03 -> essentially drop in a revalidate ISR function. And that could

3877.06 -> that we could do that on another on another one. But yeah,

3882.1 -> Maciek: yeah. Okay. So so I think we, we got it we we really

3888.19 -> covered a lot of things today about building and deploying

3893.89 -> everything, and dealing with some small box during the live

3897.88 -> webinar. This is always the best part. Have it. You never know

3901.66 -> what will happen. And we have some questions from the

3904.84 -> audience. So we let's let's try to respond to all of them,

3909.94 -> especially that some of them are very interesting. First of all X

3912.67 -> asked, When will be WP Graph QL added to core?

3917.41 -> Fran: That's a great. That's a great question. Um, I don't

3923.8 -> know. But I will tell you something like that. I'm a big

3927.07 -> proponent for it. So as Json ball I, it would be amazing.

3933.19 -> When WordPress ships with Graph QL at its core. I don't know

3939.55 -> when I hope it's soon, man. I hope it's soon. So yeah.

3945.19 -> Maciek: Okay, so yeah, we are. I remember that at some point.

3949.51 -> Jason had this discussion with Lennar There are loads of it's

3952 -> who is out there have a similar, have a similar plugin and they

3955.63 -> were discussing, should we or shouldn't we add Graph QL to the

3961.39 -> core. And I remember that at some point, they even started

3964.63 -> thinking that, yeah, Graph QL shouldn't be added to the core,

3968.65 -> it should be more of a plugin territory because of its nature,

3972.67 -> because the graph REST API is, let's say always the same. And

3977.74 -> with Graph QL. It's more about the query language. So yeah,

3983.5 -> yeah, yeah, it's not that easy. And Maula also asked a very

3989.47 -> interesting question is, how difficult would it be to use

3992.47 -> BuddyPress? With Graph QL? Seems there isn't a lot of

3995.23 -> documentation about it? I mean, if I remember, body press has

4001.38 -> the REST API. So this is good news. Because at least there is

4006.48 -> a REST API. I'm not also sure is there a Graph QL for for

4011.55 -> BuddyPress. But wallet, good news, I because I once played

4015.6 -> around with creating a Graph QL support for one plugin. It's not

4022.2 -> that difficult, try and do it, you can try making a plugin for

4027.57 -> it. It's not that difficult, although then you will have to

4031.41 -> support it and get hundreds of tickets every day. So I'm not

4037.8 -> sure where to start. But I think that if, if there was a Graph QL

4043.53 -> support for BuddyPress, it would be kind of easy to use. Together

4048.75 -> with static. Of course, we shouldn't use prep building, we

4053.55 -> would have to use server side rendering in most cases, because

4056.7 -> if I remember BuddyPress is for this, the social way to add the

4064.08 -> social plugin to use with WordPress. So yeah. And I see

4072 -> here, all we have this one from Luke Sanders. So would this be

4079.17 -> the preferred way? If I am building a one page website that

4082.95 -> will most likely stay static?

4086.85 -> Fran: I mean, essentially, Luke, that's a good question. There's

4090.51 -> a lot of variables. That would depend. But but but if you're

4096.39 -> saying, Hey, if you're asking me, Hey, Fran, would this be the

4099.57 -> preferred way? If I'm building a static website? And I want to do

4103.92 -> it headless WordPress way? Yes, you would essentially just

4108.42 -> statically pre generate that page? Because there, there would

4113.91 -> be no real reason to use the other rendering patterns. If

4117.66 -> it's like, if it mostly is just static HTML that you're showing

4121.62 -> on a page. That doesn't change? Very much.

4125.67 -> Maciek: Yeah, does come converted to HTML and Yeah,

4129.6 -> forget about it. It's Yeah, forget about it. Yeah, this is

4132.96 -> the best thing about the about static HTML, it's well static.

4139.38 -> And we have also this on how can you create a clean editing

4143.28 -> experience while using component based patterns? Do you retain

4146.7 -> any server side rendering? Or is it static site generation? Or is

4152.37 -> the site static site generator?

4154.53 -> Fran: So how can you create a clean editing experience? Okay,

4157.92 -> while using component based patterns do you mean like as far

4167.58 -> as a clean editing experience on the WordPress back end, and then

4172.26 -> retaining any SSR on obviously on the end, is that I probably

4177.69 -> think

4178.05 -> Maciek: yeah, it's about something like this. So

4183.21 -> Fran: yeah. So so as far as from the editing experience is

4187.2 -> concerned with WordPress, that's one of the major kind of

4193.44 -> benefits if you will, on when you when you go headless,

4198.06 -> there's so many CMS is out there. There's Contentful,

4201.9 -> there's graph CMS. There's Super Bass. Well, actually, that's a

4208.11 -> database, but you can turn it into a CMS.

4211.47 -> Maciek: There is state make Drupal. I'm working on the list

4215.88 -> of headless CMS is like, Yeah, I'm on this topic right now.

4220.53 -> There's a lot of them.

4222.06 -> Fran: Yeah. And that's the thing, right is that like, as

4225.6 -> as, as a WordPress editor, like you saw the post that Maciek and

4229.41 -> I were pulling out of WordPress, by default, the editing

4234.27 -> experience is just that awesome. In WordPress, it's easy. It's

4238.17 -> super easy it, it comes with default types, posts and pages,

4243.57 -> right. And then right away, a WordPress editor in a headless

4248.94 -> fashion workflow, they can have a front end dev team, and this

4252.72 -> is how mostly WordPress, headless WordPress teams work.

4258.57 -> Because I've seen I've seen actual customers do this,

4262.32 -> they'll have an actual editing team to your point. And they,

4265.59 -> they just go about their business like using WordPress,

4267.84 -> they don't, but they now know that, hey, I, I need these front

4272.1 -> end developers to say, Hey, these are my post types in

4275.61 -> WordPress, whether they're going to create a custom post type or

4278.19 -> not, Mr. Editor, you now create the components on the front end,

4283.02 -> okay. In react view, whatever, you're going to use front end.

4287.88 -> And then you are going to be in charge of whether you're going

4291.18 -> to statically site statically generate the page within those

4296.85 -> components on the page, or server side render, or like I

4299.91 -> said, you could hybrid render with ISR on next Js. So that's

4305.22 -> that's exactly the workflow. I hope that answers your question.

4308.22 -> Because the editing experience stays clean. Like the WordPress

4312.3 -> content editor, their workflow kind of doesn't change. The only

4315.69 -> thing that really changes is like, Oh, crap. I need a

4320.94 -> JavaScript front end developer to create those components to

4324.69 -> grab that data from like, like we were just showing exactly, I

4330.06 -> was creating page components to grab the data. So so yeah.

4335.28 -> Maciek: And the last question we have when a non technical user

4338.61 -> makes a change in WordPress, how can they trigger index js

4342.06 -> rebuilt? Oh, that's

4343.68 -> Fran: a great, that's actually a great question. And the answer

4348.12 -> to that is, there's quite a few ways. Currently, what's really

4354.03 -> cool is on the Atlas, the Atlas platform, a WP Engine, you could

4361.38 -> do it via a web hook. And what a web hook is, is essentially it's

4365.52 -> just an endpoint that hooks hooks into certain backends or

4372.9 -> platforms to trigger an action. So in this case, say a non

4377.73 -> technical user. Maciek say I say my content editor and I'm like,

4381.66 -> I don't I don't want to I don't know code. Simply go simply go

4385.26 -> into your WordPress admin. You're going to download a

4388.83 -> plugin. There's quite a few I like WP web hooks, download

4394.47 -> that, go to your atlas platform. Or you can tell it's easy. Are

4399.06 -> you familiar developers who don't want to mess with a web

4400.86 -> hook, you just press generate web hook Netlify has come to for

4404.61 -> sale has him too. It's gonna give you a body that he hasn't,

4408.66 -> but he has him. It's gonna generate an endpoint URL, you're

4412.47 -> gonna embed that URL into your WordPress admin within that web

4416.13 -> hook plugin. And then you're going to tell that plugin, hey,

4421.68 -> every time a non technical user publishes a post, creates one

4426.21 -> deletes one, updates, one, please trigger a build in the

4431.28 -> front end index js so that it reflects the changes. So that's

4434.61 -> the, that's, that's a major and main way most people do it. And

4440.46 -> then obviously, like I was telling, Maciek with, with with

4446.13 -> ISR, and everything, if a developer is using next Js and

4450.27 -> the other frameworks do hybrid rendering, they can set a

4453.42 -> revalidate time period to invalidate the cache so that

4457.95 -> when you're like, when you change a data in WordPress,

4462.3 -> whether it's you make a change in the post or whatever. And you

4465.12 -> publish that you as a as a non technical user can rest assure

4470.52 -> that the front end code is going to search for that change.

4474.51 -> Whatever time you sent it, so that's another way and then you

4478.74 -> could also time it and use a cron job for it, yeah, so

4483.21 -> anyway,

4483.99 -> Maciek: anyways, so so so we can use one of our favourite

4487.71 -> phrases. It depends.

4489.57 -> Fran: It depends. Yeah, it depends.

4492.15 -> Maciek: Also, using web hooks, we can also do one more thing we

4495.63 -> can connect it automatically that every time someone will

4498.72 -> press the same post, it will be automatically. So there are

4505.59 -> there are really lots and lots of ways that we can that we can

4510.81 -> do it. And it's really up to the situation because true, this is

4516.15 -> the most important that it always depends on the situation.

4519.39 -> So also, yeah, this was the last question we have also, with the

4524.88 -> start of this webinar, we launched a poll in the on the in

4529.71 -> the two commands about are you using WordPress as a headless

4533.28 -> CMS? And I mean, this is one of those surveys that didn't tell

4540.72 -> us so much, because every because it split it almost

4545.55 -> equally. Only decoupled WordPress, 1/3. Both 1/3. And

4554.34 -> WordPress as front back a little less, but they were quite quite

4559.26 -> near of of itself. So still, everyone uses WordPress as they

4564.36 -> want. Because we have really so much options. There's options.

4568.38 -> There's options. So really, selecting the best one is isn't

4574.41 -> easy. It isn't easy. And so friends, I really want to do.

4579.93 -> Thank you so much for showing us how to help start. I think that

4585.72 -> next time, Astro right. Will will dive more into us. Right?

4590.13 -> Yeah,

4590.37 -> Fran: we actually that's a good idea. Because Fred shot I hope I

4595.08 -> pronounced your name right, Fred, the CO creator of Astro is

4598.44 -> actually coming onto my podcast next week to talk about Astro

4603.87 -> headless WordPress and how Astro might overtake next Js as the

4607.44 -> next framework. So listen, tune in for that. But yeah, next time

4612 -> because I'm going to be messing with Astro so maybe we do

4613.98 -> something with Astro Maciek.

4615.89 -> Maciek: This will be amazing. And remember everyone if you

4620.39 -> want to be up to date with what is happening with our webinars,

4624.77 -> join our meetup group called Buddy CI/CD group will be always

4628.49 -> informed about the events that are that are happening. Also, if

4634.43 -> you like what we are doing, remember to press subscribe or

4638.33 -> follow us on Twitter, Facebook, LinkedIn, whatever you whatever

4642.35 -> you like. And next week we will have a really interesting topic

4648.41 -> to be honest this is one of those topics when I didn't even

4652.58 -> knew almost anything about it. So I will be learning together

4656.75 -> with with with Philip tapper because we will discuss why the

4661.52 -> lack of us array disses kills your business. This SRA is a

4667.97 -> very interesting topic when it comes to DevOps. So if you are

4674.27 -> all in DevOps, please join us it will be something really, really

4679.73 -> interesting. So, friend, thank you. Thank you once again, it

4685.43 -> was really amazing doing this webinar with you. Also, I wanted

4689.18 -> to thank everyone in the audience for being with us. And

4694.49 -> what can I say Have a great day night or whatever you have. So,

4701.78 -> bye everyone.

4703.25 -> Fran: Cheers.

Source: https://www.youtube.com/watch?v=N6KOkZmpgdE