Local By Flywheel has Fancy Headless WordPress Scaffolding Chris Coyier
Local By Flywheel makes running a local WordPress site trivially easy. I just got a marketing email from them saying that there is a plugin for Atlas now, which is their parent company WP Engine’s product for running “Headless” WordPress. Headless, meaning the front-end of the site isn’t HTML produced from PHP directly, it’s some other kind of front-end that digests content from WordPress via API.
I didn’t really know what supporting Atlas really means, so I just gave it a shot. First, you gotta add and activate it as a plugin:
Now you’ll have some Atlas-powered “Blueprints” available when you spin up a site:
Spinning it up the first time will install some extra stuff, as to be expected. Once it is spun up, you’ll see in Local it’s not just running the PHP, MySQL, and Nginx stuff, but there is a whole section just for the Node.js front end too.
And you got a site!
This website is VERY different from how you’d “normally” build a WordPress website. It’s literally Next.js, so it’s React-powered, and it looks like it grabs the data with GQty, a GraphQL client. That weirded me out because I was like… WordPress’ API isn’t GraphQL by default. But that’s part of the Blueprint! It installs and activates WP GraphQL by default.
This is some fancy shit I tell you what!!!
Part of me is like… ugh, but this is a lot of technology to maintain. I wouldn’t do it for anything that doesn’t really need it. The homepage has like 4 MB of JavaScript by default 😭. That’s a development build but still, cripes.
But another part of me is like… I would probably enjoy working on a serious product with this stack. Because two things:
- The DX of Next.js and GraphQL is fricking good and it blows working with normal WordPress theme workflow out of the water.
- I still get to use WordPress, which is a very nice CMS that blows any Node.js-native thing out of the water.
I just don’t like how this isn’t quite a first-class citizen situation from either side.
Related
ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpa2dhZnxxhI6lppyZnGKvunnFpbCwoJWauW60wKxkn5memMZutMSam6Wdo6h6uLvRnaernaOoerSvwJ%2BdqKSUnruoew%3D%3D