Astro + WPGraphQL for more secure WordPress sites

WordPress powers over 43% of the web, and that makes it a prime target for hackers and bots. But you can make your WordPress install immune to automated attacks and far less susceptible to hacking by decoupling the public site from your WP admin.
Source code: github.com/learnwithjason/unh...
This video was sponsored by Netlify, where you can host your decoupled web apps for free: ntl.fyi/3Is5lvf
For more videos, check out www.learnwithjason.dev

[@AdamBJohnson1]

I think this is the most succinct video explaining how to hook up Astro to a CMS. Well done. If you're looking for more video suggestions, I'd love to see more 15 minute videos hooking Astro up to other headless CMS's. Your process here was very clear and to the point. Great job. 👏💯

[@learnwithjason]

thanks! that's a great idea - I do love Astro and could definitely put together some videos on how to plug other CMS options in thanks for watching!

[@themedleb]

Strapi next?

[@TonyAlvesDev]

I love that you used Astro for this example. Thanks Netlify for supporting our fav Jamstack educator.

[@learnwithjason]

I do love Astro! and yes, extremely grateful for companies like Netlify that make creating videos like this possible for me 💜

[@ChristianKolbow]

I've been using it this way so much lately. Customers like WordPress as backend and I can design my frontend with Astro as I want. Great combination

[@learnwithjason]

I really love the combo. I’m hopeful the Content Collections in Astro expand to allow for third-party data soon, too, because that would really make this a killer stack even in larger teams

[@kelas-frontend]

Hi @learnwithjason, I am curious is it automatically update the content if the user edit on the wordpress admin? Or we need to build the site every changes in wordpress content?

[@codewithguillaume]

Jason that's an AMAZING video. Honestly, I am going to do it this week-end. Thank you so much !

[@learnwithjason]

thanks so much for watching! let me know how it goes!

[@pablopenalva9137]

Hi Jason! I've been using Astro for my clients, and I love it. I've never used WordPress, but I've been thinking about learning how to use it so that I can give my clients the ability to modify the content. I'm particularly interested in knowing how I can allow them to add new elements to the layout, such as images, instead of just updating the existing content. I have a friend who has been working with WordPress for a long time, and he suggested using the WordPress Site Editor and the Gutenberg editor (or something like that...) to create custom blocks with React. This way, I can continue developing the website as I'm used to, while also giving the client the opportunity to modify the layout. I hope I'm explaining myself clearly. Thank you!

[@OneBrighDay]

This is a great starting point. Can you suggest a full course on this subject?

[@IainSimmons]

I'm not sure if it's just from the edit, but you said "I prefer Astro because I only want to ship HTML and CSS when it's necessary". Was that meant to be "ship HTML and CSS, and only JS when it's necessary" or something like that? All that aside, great video. I love Astro!

[@BrunoPulis]

Hi Jason what amazing content, just I needed. Thanks for sharing ❤❤

[@learnwithjason]

Glad you enjoyed it!

[@manosmenexis3160]

Love the vibe of this content!

[@learnwithjason]

thank you!

[@Shuyinz]

Can you also please make a video tutorials how to make Astro + GraphQL work for rendering the Gutenberg Blocks?

[@Cloudinary]

Love this!

[@Noritoshi-r8m]

Amazing guide. Did you end up making the github automation webhook/action when we have new changes video?

[@learnwithjason]

I didn't, sorry. on Netlify there's a plugin for it: github.com/lukethacoder/wp-webhook-netlify-deploy I saw a couple for GitHub Actions but I haven't tried them so can't vouch for their quality

[@maurolobo3450]

Hey there, great video! Really useful! Is there a way to deploy this on a shared host or is it necessary to use a VPS? For instance, with Hostinger

[@learnwithjason]

I haven’t tried, so I’m not 100% sure, but it *should* work on shared hosting just fine

[@axMf3qTI]

Yeah all the marketing companies that use WP with DIvi will start using headless WP with an Astro front-end. I know companies like that who just do WP. They sometimes hire me because the LinkedIn social icon isn't available by default in the Divi settings. So I add a line of css that turns the RSS icon a LinkedIn one.

[@chrisdenicola4336]

Would this setup also be useful for building a headless cms with Wordpress back end ?

[@learnwithjason]

definitely!

[@MrBrady95]

Would you need to pay for 2 hosting accounts if you did it this way? (Seems like you'd need one for Astro and another for Wordpress)

[@learnwithjason]

yes, if you wanted full separation. but you could use free hosting like Netlify or Cloudflare for Astro for quite a while because of how it works before you hit any usage charges or needed to upgrade

[@dhanushcode9892]

Great video Jason. Thank you. Does this work for woo commerce as well?

[@learnwithjason]

it looks like there's a way to get it running, yep! github.com/wp-graphql/wp-graphql-woocommerce

[@dhanushcode9892]

@@learnwithjason That's great. Thank you

[@naregtokatlian2869]

everything looks nice and clean with Astro, until we start talking about authentication. i'm trying to implement Supabase Auth with Astro and can't find any information on the internet on how to do it.

[@Nico3120g]

Great video

[@aldoxo96]

Great vid man! Loved the content. Which browser are you using?

[@learnwithjason]

thank you! I’m using Arc arc.net

[@aldoxo96]

@@learnwithjason thanks dude! 🤙

[@robertoflores2078]

Most headless cms integration examples are related to blogs. Blogs are good candidates for a headless solution, but what about normal web pages? WordPess is usually used with page builders like Elementor, which enable non -devs people to design websites. Under such scenario, how can Astro help us?

[@learnwithjason]

if the headless CMS provides details about the layout, Astro can be set up to build pages based on that data. I haven’t tried Elementor, but I built a small proof of concept using Gutenberg. so it’s possible!

[@MrJfergs]

I haven't yet made a decoupled Wordpress site but I feel like it may be better to just use a headless cms that is made specifically to be headless.

[@learnwithjason]

I think it depends on who your customer is. I've spent a lot of hours trying to make newer headless CMS tools do WordPress things because the user was familiar with WP. Especially for folks who don't ever want to think about code, WP is still reigning champ for UX in a lot of ways.

[@MrJfergs]

@@learnwithjason Makes sense, I think the name recognition and the UI of the dashboard are the selling points. It would be cool to see a video from you about deploying Wordpress, either via a tool GUI CI tool like buddy, or via github actions.

[@learnwithjason]

good idea! I'll add it to my list. thanks!

[@TonyAlvesDev]

Although, I agree with you for some use cases. I think when the customer is WP driven and wants to keep their content marketing team happy with what they are already using, but want to stop the issues with WP getting hacked, this is a fantastic solution.

[@robieism]

Hi Jason! Great video. I was trying to compose the query on GraphQL. But it returns: "{ "errors": { "message": "Unexpected token '

[@learnwithjason]

it’s hard to say without seeing the code, but it looks like one of the queries is getting an error that returns HTML instead of JSON, and that query result is being used for this call. you can add a check to make sure the response has a status of 200 to catch this and see what the error message is

[@nickslab3589]

Wow thanks

[@visualmodo]

Very good video!

[@learnwithjason]

thank you!

[@henrybenedict6357]

Wait, are you the same Jason that teach at frontendmasters? That's so cool

[@learnwithjason]

I am! hi!

[@user-pb6oe4qd6k]

what's the name of the melody starting at 03:03 ? great video btw, thank you

[@learnwithjason]

I can't remember the name of the track, but I got it from Epidemic Sound

[@kerodfresenbetgebremedhin1881]

so you made a headless setup with wordpress as ur backend.

[@learnwithjason]

yep! it keeps the WP Admin off the main site, which cuts off a huge number of automated and manual attack vectors

[@99secure11]

Instead extracting just the login page you extracted the whole site instead and left the login page? 😆

[@ParasocialFix]

don't run that insecure WordPress software on the public internet, just run it on your personal computer that has all your data instead! this is part joke, part warning because WP could have remote code execution issues as well, so it could be checking for updates or something and hackers could intercept that and now that code is running on your personal PC, which could be mitigated by running it in virtual box, docker, or on a hosting somewhere where you can protect it with something like private VPN

[@learnwithjason]

fair. I think there's a spectrum here - for most folks, cutting off automated attack vectors is enough (it's easier to move on and target less protected sites). that definitely changes as a site gains prominence and/or value (e.g. data) it's an exercise for each site owner to make the call on how far they need to go with security for sure. I think the ideal in a "high value" site setup would be to run the WP instance on the company intranet behind a firewall

[@jessicapotter2396]

LocalWP uses docker right?

[@Whoknowsthatman]

Too much work.