Intro to Headless WordPress with SvelteKit

you're a web developer who's just been tasked with building a new web app for a client their marketing team tells you that they know and love wordpress it's a trusted rock solid cms that powers over 40 of the web and it provides them with the editorial workflows and content creation experience that their team relies heavily on and wants to keep you dig in and learn a bit more about the project requirements two things in particular pique your interest one the need to support multiple clients you learn from your discussions that after the web app is launched the client also plans to launch ios and android apps so that means the web client ios client and android client all ultimately need to be able to source their data from the same wordpress backend two a persistent podcast player the client tells you that they want to have a fixed podcast player at the bottom of the page site visitors should be able to start playing a podcast episode and then navigate around the rest of the site with uninterrupted audio playback you take a step back to consider all of this using wordpress as a traditional monolithic cms would certainly allow the marketing team to continue using their preferred platform however that would make it difficult and cumbersome for the wordpress backend to be able to serve up the platform agnostic json data it needs to to serve the ios and android apps further it would also be problematic for the persistent podcast player feature since out of the box traditional wordpress performs a full page reload every time the user navigates to a different page so the audio playback would then be interrupted you find yourself wishing you could use something like sveltkit a single page app framework that makes persisting elements across route changes nearly effortless among many other benefits so what do you do how do you proceed with this project i'm kellan mace from the developer relations team at wp engine and i'm here to tell you that this time around you can have your cake and eat it too for the rest of this talk we'll build out a proof of concept app to accomplish these goals we'll use wordpress as a headless cms and pair it with a sveltkit frontend by using this decoupled architecture we'll see that we're able to accomplish our goals of supporting multiple clients as well as having a persistent podcast player that has uninterrupted audio playback across route changes let's start by setting up our wordpress backend here i'm using a free app called local to create a local wordpress site for me to work with you can see i have it running at sveltssummit.local and here's that site in a browser you can see here that i'm at the wordpress admin screen and uh here i've created a few dummy blog posts just we have some data to work with next let's turn our wordpress backend into a graphql server using the wp graphql plugin so i'll head over to plugins we'll go to add new and then i'll search for wp graph ql we'll find that plugin on the list and click install now and then once it's been installed we can go ahead and click the activate button now that wp graphic ul is activated i can head over here to graphql and then go to settings and at the top of this page we can see what our graphql endpoint is so we'll need that in just a moment here let's turn our attention now to our sveltkit app so i went ahead and ran npm init felt at next and just gave my app a name that's all i've done so far this is just a skeleton code base at this point so the first step we need to do is link up our front end to our back end using that graphql endpoint so how we'll do that is we'll create a new file called dot env dot local and inside of that we need to define an environment variable so we'll make it veet public wordpress api url just like that and then we'll head back to wordpress and we'll copy this graphql endpoint so go to copy link address and we'll paste that in there so i'll hit save and this is the endpoint our frontend app will use to fire off its graphql requests i also have a completed version of this app here um so as we go we'll copy and paste some things back and forth and then i'll explain it each step of the way for now we'll just copy a few things over so one is this layout css file it just has some global styles in it that one will stick in our source directory to give us a bit of a head start there and we'll also take a look at this layout file as well so i'll copy that and then we'll put that inside of our routes directory so for now we don't have this podcast player we'll do that later for now we'll just start with this so in our application we'll have the css file with our global styles being pulled in and just a you know main element that wraps our app and gives it a little padding and margin and so on next let's see how we can actually pull data out of wordpress and display it on a blog page so inside of routes we'll create a new file and that'll be blog slash index.felt so let's create that and for now let's make sure we have a page rendering so let's check out this page in our frontend app now so i'll head to localhost 3000 and we should be able to hit our blog route next let's see how we can query our wordpress backend to get a list of posts and then render those on the page in our frontend app we have this completed file here and i'll just steal a few things from this so ultimately what we're going to render on the page on our blog page is this so we'll still have our heading but then we'll say if we have posts loop over those and display you know list items otherwise say no posts found and for now because we don't have a postcard component let's go ahead and just render a paragraph and we'll say post dot title if you head over to the sveltkit docs you can see that there is a load function that spell kit provides where you can do any data fetching that you need this is exactly what we need i'll go ahead and copy just the script tag and then our load function will grab from our completed app to save a little bit of time so here i am with my script tag and then in our completed app here's what the load function is going to look like so i'll copy that and let's talk through it alright so here's the load function that were exporting you can see it receives you know fetch and it it uses the fetch api and it sends a request to our wordpress api url it's a post request and the type is application json then we're passing into it the query that we would like to run here so we need to define what that is above we're going to have const query equals some string here so we need to determine you know what that needs to look like and then fire off this request for a production application you know you might want to consider using a library here instead of just a straight fetch call so you could use like urkel or apollo client or spelled query you know one one of those libraries for our app though just using fetch for our proof of concept is going to work great all right so let's say we've made it this far and now we need to figure out what actual actual query do we need to fire off to our wordpress backend thankfully graphql and wp graphql specifically have really great um tooling around this so if we head back to the wordpress admin now and we go to graphql and then graphical ide here you can see that wp graphql provides this embedded graphical instance and from here you can explore the graphql data graph and compose your queries very easily so it comes with this explorer here on the side where you know if you want to drill down to like posts and then the nodes of each post and get you know the date or whatever other data you can see as i check these boxes it composes the query for me over here so then when i hit the play button to execute this i see what the result would be you know if my front end spell kit app were to fire off the same query so this is huge this is super you know powerful and makes composing your queries very easy another trick you can do is if you're inside of if you're nested inside the query here you can hit control space to get auto complete as well and see you know what's what's available so at this point you know you would explore the data graph and build up your query and think about what your pages need to look like for us we'll we'll skip ahead to the finished result so this is the query that we would have composed here in the wordpress admin so you can see it is called get post and then we're saying we want to get the blog posts and then for each of those nodes we want this data back so if i were to fire that off here's the result so this is what our front end spell kit app will receive and what we need to use to you know render these on the list so armed with that knowledge now let's go ahead and copy you know this whole query right here that we've built up and we'll head over to our app and that's what we're going to stick inside of this string here all right so let's test this out and see if we can get it working so we have our load function that's running this and it is going to fetch the data and when the data comes back assuming the response is okay it'll pull out the blog post and then pass through those through as a prop to our component but our component can't use that data just yet because we need to export posts so that it's usable by our component so let's flip back to our finished product and we'll see further down what that looks like so here we just have this other script tag below the first one and we'll get rid of comment out postcard just for now and just leave posts here all right so here in the browser we were successful you can see we're getting back uh the post titles and we're able to render those on a list this is great as a starting point you can see now our front-end spell kit app is hooked up to the wordpress backend and is able to pull out you know data via graphql so from here we can display you know more data about our blog post so to do that we'll use this postcard component and then that's the thing that we're going to render in this place so we'll say postcard is there and then the prop it expects is post just like that this postcard component will steal from our finished product um so it's this one so i'll copy that and then we'll create inside of source a components directory and then inside of that we'll paste that in so that component is pretty simple this postcard there's not a whole lot to it it just receives you know the post as a prop here and renders an article tag with you know some info about the post inside of it and it has some styles at the bottom and this is what it looks like in the browser so this is pretty cool you can see that we have our blog post you know cards being displayed here so we have the featured image title and then the excerpt for each of our three blog posts and these are linked as well so if i click on this it'll send me to slash blog slash whatever the slug is for that blog post but we haven't implemented that just yet so let's do that next this will be our single blog post page so to do that um i'll close out those files and we'll take a look at our completed app and look at blog and then this slug dot svelt so this will be a dynamic route for us so let's create the same in our new application so in blog we'll do a new file slug.felt just like that now inside of this let's figure out what we're going to need so we'll do some data fetching just like we saw last time so let's um you know prepare for that we'll have this and then our closing script tag all right and we'll need to define our query all right and we'll do some very similar data fetching to what we did in the last file where we'll use the load function and then you know the fetch api just to send through our query this time it's going to be different in one way and that is uh we need to send through a variable though to our graphql query so let's uh inspect that a little bit so inside of our load function here um we are still passing in the query as we were uh in our previous example but this time we have this extra variables object that we're passing along so we're saying here's the query i want you to run and you know it is going to expect a variable called slug and here's the thing to use for that variable and you can see here that we're um drilling down to page.prams.slug so that'll be our you know dynamic route here whatever slug is in the url that will be passed through and used when this query is run all right and then from there we're saying if you know the response is okay pull out the post you know data that was received and then pass that through as a prop and just like last time we need to make sure we export that from our file so we'll need to do this alright so we'll export that so we have it available to us to in our component and a few other helper a little helper function to format our date and this code just to pull out a list of our the categories that the blog post might have below that we're ready to have our html then so this is nothing to write home about again it'll be pretty straightforward so we'll have a link at the top to go back to the main blog post page if the user wants to and they'll just have an article tag with you know the info about this single blog post that the person is viewing and we'll give that some style as well there we go so at this point we have all of our markup all of our styles accounted for but we still you know need to build up this query at this point to fetch the data for our individual blog post um so at this point you know i would head back to the graphical ide instead of the git post query here i would you know do another query for an individual post and then compose my query here until i'm getting you know the data back that i expect so to get a bit of a head start though we can steal the finished query from our completed app so i'll go ahead and copy this and then we'll just take a look at what that looks like here all right so this is um different in one noteworthy way and that is like i said it expects a slug argument so this is what that syntax looks like you say we're expecting a slug and the type uh is id and then we're passing that through and telling it the type of this id we're providing is a slug because there are some other identifiers you could use to identify a blog post such as its you know id in the database but in this case we're saying the type of id we're passing through is a slug so try to locate it based on that if i try to fire this off it will crash and burn because i haven't provided that slug variable so down here let's actually do that i'll i'll open up the query variables section and i'll say here's the slug and we're passing through one of the post slugs so let's figure out what one of those is so i head to one of my posts and here it is the url slug copy that and then in my career variable that's the thing that will pass through as the slug so if we try to execute that now shazam there we go so we get our posts back and then date title content all the info that we want about this individual blog post so this is basically what we're going to do in our sveltkit app so we have this identical query so i'll copy that and we will make that the query that we're going to run so i'll head back to our frontend app and let's just start out at the slash blog page again so here's our first blog post and i'll try to click through to it and there we go uh seems to be working so i have my you know link back to the blog post page and i have the featured image the title uh the author and date you know they're nicely formatted the content of our blog post and then the list of categories so i think we're doing great here we've seen in our web client how we can you know query for data from our wordpress backend and then create our blog post list page as well as individual blog post pages but have we accomplished our goal of having a platform agnostic and you know graphql server that can be used for our web client and also ios and android so one way to test that would be to use a standalone version of graphical so this one is embedded into wordpress right here you can you know we can simulate having other clients just by having like a standalone graphical app just like that so you can imagine this is like the ios app or android app if one of those sends a request to our slash graphql endpoint and requests you know some data like this then we can fire that off here you can see that they would get structured json data back just like our web client does so this is great for you know consistency right anything any tweaks that you make to the graphql schema to serve the purposes of your web client that would that would also benefit any other clients ios android desktop or whatever else so we've met that requirement now we have you know our data being you know sent through to our web client and also any other you know clients that i need to consume this in the future our one last requirement for this project was to have the persistent podcast player and with felt kit being a single page app framework that would be pretty effortless for us to implement so let's see how we can do that now back in our code base i will i'll take a look at the completed project and we'll see that we have this podcast player component so i'll copy that and we'll paste it into our project and you know explain uh what that is so here's podcast player you can see it's pretty darn simple i just have a wrapper div here with an iframe inside that's going to pull in um this you know podcast player from this buzzsprout.com site and then below i just have some styles so that that stays fixed at the bottom of the page so now that we have that player we can actually you know render it somewhere in our app so seeing as how we want this to you know persist across route changes one place we could add that is into in our layout for our app here so we'll go ahead and open this layout our completed app and do the same thing so go ahead and import this podcast player component and then we'll render that out right below the main tag of our app here so i'll save that file and now you can see what's happened here so if we head back to the browser it's easily working just great now we have our embedded player down here so i can start playing an episode just like this and browse around the site as though i was a user i can head back to the blog list page i can you know find another post that's interesting click through to that and so on and all the while have uninterrupted audio playback so with that we'll wrap things up i hope this talk gave you a really good sense of when it might make sense to use wordpress as a headless cms and pair it with a svelt kit front end and some of the problems that that decoupled architecture can help solve thank you so much for watching

Channel: DE{CODE}

Views: 387

Keywords: WordPress, Headless WordPress

Id: 94FZvB6B_c0

Length: 20min 47sec (1247 seconds)

Published: Wed Nov 24 2021

Reddit Comments

[u/kellenmace]

Want to learn how to build a SvelteKit app that sources its data from a headless WordPress backend?
My talk from the Svelte Summit conference covers exactly that! 💥
In this video, we build an app for a client with these requirements:
- They want WordPress as their CMS
- The WP backend also needs to serve up JSON data to their iOS and Android apps
- They want a persistent podcast player with uninterrupted audio playback across route changes
Can those requirements be met with a with a headless WordPress + SvelteKit architecture? 🤔
Let's find out!! 😄