Headless WordPress is al een tijdje een grote trend op het gebied van webdevelopment. Het loskoppelen van de frontend en backend kan leiden tot een betere mate van controle, omnichannel toepassingen en een aantal interessante andere toepassingen van deze nieuwe technologie.
Veel ontwikkelaars experimenteren met veel plezier met frameworks als Vue.js en React.js of zelfs webframeworks als Django en Ruby on Rails, die helaas meestal alles behalve compatibel zijn met WordPress.
Er zijn genoeg van dit soort frameworks die goed werken met headless WordPress, maar SvelteKit is een speciale. Het UI framework is speciaal gebouwd om het ontwikkelen van webapps eenvoudiger te maken met beknopte en strakke code. Het kan eenvoudig functionaliteit stroomlijnen die normaal gesproken niet goed werkt in een ontkoppelde omgeving.
Interesse om meer te leren? Laten we de headless WordPress basisprincipes doornemen, en dan leren we je alles over SvelteKit en hoe je het aan de praat krijgt in jouw omgeving.
Wat is headless WordPress?
Je kent misschien al het verschil tussen de frontend en de backend van WordPress. De backend is waar alle onderliggende CMS handelingen plaatsvinden: je maakt berichten en pagina’s, installeert plugins, ontwerpt je thema en wijzigt instellingen.
Aan de andere kant is de frontend eigenlijk de website die aan bezoekers wordt getoond. WordPress gebruikt, naast zijn thema’s en plugins, verschillende functies zoals get_posts() om de benodigde gegevens op te halen en weer te geven.
Neem bijvoorbeeld de widget Recente berichten die op de homepage wordt weergegeven. Met behulp van dergelijke functies worden gegevens van de backend opgevraagd en worden je nieuwste artikelen op de openbare frontend weergegeven.
De backend en frontend van WordPress zijn nauw met elkaar verweven en zijn in veel opzichten afhankelijk van elkaar om te functioneren, maar dat betekent niet dat ze onafscheidelijk zijn.
Dat is waar het concept van “headless WordPress” om de hoek komt kijken: hiermee ontkoppel je de backend van WordPress. Je bent dan vrij om het aan te sluiten op de front-end technologie die je wilt gebruiken – niet alleen PHP, maar elk framework voor webontwikkeling of zelfs een applicatie.
Dit heeft als extra functionaliteit dat je het WordPress CMS over meerdere kanalen kunt gebruiken. Draag je blogberichten of andere CMS items over naar meerdere websites, mobiele apps en waar je maar wilt.
Over het algemeen geeft headless WordPress je meer controle over het CMS en de mogelijkheid om technologieën te gebruiken die er normaal gesproken niet compatibel mee zijn. Het bespaart je ook het schrijven van een hele app vanaf nul – je kunt het ingebouwde CMS van WordPress gebruiken om een deel van het werk te doen.
Wat is de REST API?
Om headless WordPress te laten werken, moet je je applicaties met elkaar verbinden via een API of Application Programming Interface. Met API’s kunnen twee verschillende applicaties met elkaar communiceren, in dit geval de backend van WordPress en jouw aangepaste backend applicatie.
Er zijn vele soorten API’s, maar de REST API is er één die in WordPress zit ingebakken. Hiermee kunnen externe applicaties op een veilige manier gegevens van de WordPress backend ophalen zonder dat ze daarvoor de beheerinterface hoeven te gebruiken.
De REST API wordt gebruikt in een aantal officiële WordPress functies, waaronder de Block Editor, en de meeste thema’s en plugins die een API nodig hebben om te functioneren gebruiken deze.
Dit geldt ook voor headless applicaties. Veel van deze gebruiken de REST API als interface met WordPress, waarbij gegevens worden opgehaald van de backend en dynamisch worden weergegeven via je frontend app.
De REST API biedt endpoints die verschillende WordPress resources vertegenwoordigen, zoals berichten, pagina’s, gebruikers, categorieën, enzovoort. Als je deze gebruikt, kun je deze gegevens weergeven in de frontend.
Maar hoewel je de REST API ermee kunt gebruiken, vertrouwt SvelteKit voornamelijk op een andere technologie voor veel van zijn functies: GraphQL.
Wat is GraphQL?
GraphQL is geen API zelf, maar een API query taal. In tegenstelling tot traditionele REST API’s, waarbij clients vaak meerdere verzoeken moeten doen aan verschillende endpoints om gerelateerde gegevens op te halen, kun je met GraphQL al je gegevens in één verzoek ophalen.
In het algemeen is GraphQL ontworpen om je beknoptere queries te laten maken in een snel en geoptimaliseerd framework. Het is ook gemakkelijker te leren en minder complex dan de REST API.
Veel headless WordPress frameworks gebruiken om deze redenen GraphQL in plaats van of naast de REST API. Hoewel GraphQL niet gebundeld is met WordPress zoals de REST API, zijn er plugins die je kunt gebruiken om deze functionaliteit in het CMS te brengen.
Dankzij het geoptimaliseerde framework voorkom je dat gegevens te weinig of te veel worden opgehaald. Je kunt met één zoekopdracht precies die gegevens ophalen die je nodig hebt, wat veel gemakkelijker is voor je netwerk en server.
Wat is SvelteKit?
SvelteKit is een webframework gebouwd op Svelte, een open source, front-end framework dat qua functie lijkt op Next.js of React. Het is gebouwd om het proces van het maken van webapps te stroomlijnen, en hoewel het niet specifiek is gebouwd voor headless WordPress, is dit slechts een van de vele mogelijke toepassingen.
SvelteKit is gebouwd op HTML, CSS en Javascript – meer niet. Dit maakt het super eenvoudig te gebruiken en framework agnostisch, zodat je het naast andere frameworks kunt gebruiken om een volledig dynamische front-end app te maken of een statische site te bouwen.
Svelte werd in 2016 gelanceerd en wordt vandaag de dag nog steeds actief bijgewerkt. Het webframework SvelteKit kwam een paar jaar later, in 2020. Beide zijn bekend en geliefd in de webontwikkelingswereld, en stellen je in staat om eenvoudige en elegante code te schrijven.
Waarom je SvelteKit zou moeten gebruiken voor headless WordPress
Er zijn een paar aspecten van headless WordPress die lastig kunnen zijn om aan de praat te krijgen. Dankzij het minimale ontwerp van SvelteKit worden deze problemen geminimaliseerd en verloopt de installatie van headless WordPress een stuk soepeler.
Hier zijn slechts een paar van de functies die SvelteKit biedt.
- Alleen Javascript. In tegenstelling tot andere frameworks hoef je je nauwelijks zorgen te maken over afhankelijkheden en verwarrende setups. Vaak is er geen enkele configuratie nodig. SvelteKit werkt overal waar Javascript kan draaien.
- Framework agnostisch. Door zijn eenvoud werkt SvelteKit goed samen met andere frameworks. Combineer elke technologie met je headless WordPress applicatie.
- Uitbreidbaar. Als SvelteKit niet perfect werkt in jouw omgeving, dan is het heel eenvoudig om het uit te breiden en alles op te lossen wat niet goed werkt in jouw setup.
- Lichtgewicht en gemakkelijk te leren. SvelteKit gebruikt alleen Javascript, HTML en CSS. Het is erg licht vergeleken met traditionele frameworks en is super eenvoudig om mee te werken. Maak schone, elegante en eenvoudige code met compacte en beknopte componenten.
- Eenvoudig gegevens ophalen. GraphQL, waar SvelteKit goed mee werkt, vereenvoudigt het ophalen van gegevens uit WordPress en laat je beknoptere en efficiëntere queries maken.
- Authenticatie is eenvoudig. SvelteKit heeft onlangs ondersteuning voor NextAuth.js geïmplementeerd, waardoor je gegevens veilig blijven en toch eenvoudig te installeren zijn.
- Server side rendering (SSR) en statische site generatie (SSG). SvelteKit is niet alleen voor statische sites of dynamische applicaties. Je kunt beide eenvoudig doen met dit framework, omdat er meerdere opties voor het renderen van pagina’s worden geboden en het genereren van statische sites eenvoudig is.
- Sitemaps. Als je ooit je haren uit je hoofd hebt getrokken bij het maken van een werkende sitemap op een headless site, dan ben je niet de enige. Met SvelteKit kun je sitemaps dynamisch renderen met een endpoint.
- Levendige gemeenschap. Er zijn genoeg SvelteKit fans die apps ontwikkelen met de software. Als je hulp nodig hebt of wilt chatten over het framework, dan zijn ze gemakkelijk te vinden over het hele internet en op sociale media. Er is zelfs een Discord server met 60k+ leden!
Hoe maak je een headless WordPress site met SvelteKit?
Klaar om te beginnen? Deze gids helpt je bij het opzetten van WordPress in een lokale omgeving, het installeren van SvelteKit op je computer en het deployen van je headless WordPress instance op Kinsta zodra je klaar bent.
Laten we er meteen in duiken.
Stap 1. Een WordPress site opzetten
Er zijn veel manieren om een lokale WordPress instantie op je machine in te stellen. Als je al een Kinsta account hebt, kun je een website maken met het MyKinsta dashboard of de Kinsta API gebruiken om er een op te zetten.
Voor deze tutorial gebruiken we DevKinsta, een lokale WordPress ontwikkelkit. Je hoeft geen Kinsta hosting te hebben om DevKinsta te gebruiken – het is helemaal gratis.
Download DevKinsta via de bovenstaande link. Als je hulp nodig hebt bij de installatie of de kneepjes van het vak wilt leren, raadpleeg dan de documentatie van DevKinsta.
Zodra DevKinsta is geïnstalleerd en ingesteld, volg dan deze stappen om een lokale WordPress omgeving te maken.
- Maak een Nieuwe WordPress Site of Custom site als je instellingen wilt wijzigen zoals PHP versie, Multisite, enzovoort.
- Voer je sitenaam, gebruikersnaam, wachtwoord en eventuele andere info in en klik op Site maken. Wacht even terwijl DevKinsta je lokale WordPress omgeving opzet.
- Je komt nu in het scherm Site info. Noteer je Site host, want dit is de lokale URL die je gebruikt om je site te openen.
- Klik op Open site en navigeer naar http://<jouwsite>.local/wp-admin, of klik gewoon op WP Admin om die pagina direct te openen. Log in met de gegevens die je eerder hebt ingevoerd.
Set 2. WordPress voorbereiden voor headless
Op je gloednieuwe admin startscherm moet je een paar extra stappen nemen om je WordPress installatie voor te bereiden om headless te gaan.
SvelteKit vertrouwt op GraphQL om veel van zijn functies te laten werken, dus moet je WPGraphQL installeren. Met deze plugin kun je het GraphQL framework gebruiken om verbinding te maken met headless Javascript technologieën zoals NextJS, Gatsby en natuurlijk SvelteKit.
Doe dit door naar Plugins > Add New te gaan en WPGraphQL te installeren. Hiermee voeg je een GraphiQL IDE toe aan je beheerbalk die je kunt gebruiken om GraphQL queries te schrijven binnen WordPress.
Je moet ook je permalinks repareren. WordPress wordt standaard geleverd met gewone permalinks, die niet werken met de JSON API waar REST op vertrouwt of met SvelteKit zelf vanwege beperkingen binnen Next.js.
Ga naar Instellingen > Permalinks en schakel de Plain permalinks uit. Probeer Post name permalinks.
Om te controleren of het werkt, voeg je “/wp-json” toe aan de URL van je lokale site. Je zou de inhoud van je site moeten zien als JSON data.
Later moet je een volledige site redirect plugin gebruiken, zoals Redirection of All In One SEO Pro, om je URL te verwijzen naar de frontend applicatie die je bouwt. Installeer en stel een omleidingsplugin in zodra je klaar bent om gebruikers om te leiden naar je SvelteKit app.
Daarmee ben je klaar en kun je SvelteKit installeren.
Stap 3. Je SvelteKit omgeving instellen
Om te beginnen heeft SvelteKit een aantal basissysteemvereisten, waaronder Node 18.13 of hoger. Omdat het framework zo licht is, werkt het op bijna elk systeem. Zorg ervoor dat je npm hebt geïnstalleerd naast Node, anders werkt het niet!
Je kunt nu SvelteKit op je systeem installeren. De documentatie biedt een volledige handleiding, maar hier zijn de basisprincipes.
Laten we eerst Svelte installeren met het create-svelte pakket. Je kunt je project (“my-svelte-app”) noemen zoals je wilt. Dit commando maakt een Svelte app met alle basisinstellingen, klaar om te beginnen.
npm create svelte my-svelte-appJe krijgt verschillende vragen; antwoord met ja of nee om je SvelteKit omgeving aan te maken.
Er zijn enkele npm pakketten die je moet installeren, dus open de root van je project met dit commando (vervang “my-svelte-app” door de naam die je eraan gegeven hebt).
cd my-svelte-app/Voer dan dit commando uit om de benodigde pakketten te installeren:
npm installEn voer tot slot de ontwikkelingsserver uit met dit commando:
npm run devZodra de server is gestart, kun je je app in wording bekijken op deze URL: http://localhost:3000
In plaats van de standaard pagina renderer te gebruiken, kun je nu overschakelen naar de statische renderer om een statische SvelteKit site te genereren.
Hiermee zou SvelteKit succesvol ingesteld moeten zijn en kun je beginnen met het maken van je headless site.
Stap 4. GraphQL gebruiken om SvelteKit en WordPress te verbinden
Houd deze tips in gedachten terwijl je experimenteert met GraphQL en je SvelteKit omgeving.
- Lees de inleiding tot Svelte/SvelteKit om volledig te begrijpen hoe dit framework werkt. Deze tutorial is interactief; je kunt de code zelf uitproberen!
- Je kunt het SvelteKit GraphQL pakket installeren als je problemen hebt met het handmatig instellen van je GraphQL API.
- Als onderdeel van WPGraphQL kun je ook Gutenberg blokken gebruiken via wp-graphql-gutenberg, die wordt meegeleverd met de standaard plugin.
- Hoewel je de REST API tot op zekere hoogte kunt gebruiken met SvelteKit, werkt de uitgebreide functionaliteit van GraphQL het beste met dit framework. Als je liever de REST API gebruikt, bekijk dan deze SvelteKit headless WordPress demo op GitHub, die de REST API gebruikt om de twee platforms met elkaar te verbinden.
Je moet je ook verdiepen in het laden van gegevens en routing om SvelteKit en WordPress te integreren. Er zijn genoeg manieren om verbinding te maken met WordPress en een headless app te bouwen.
Stap 5. WordPress en SvelteKit deployen naar Kinsta
Zodra je een headless omgeving hebt opgezet en klaar bent om te deployen, moet je twee afzonderlijke stappen nemen: WordPress deployen en de frontend naar een statische site pushen.
Het WordPress gedeelte is heel eenvoudig. In DevKinsta, op je Site Info pagina, zou je een Push to staging knop moeten zien. Je moet inloggen met je Kinsta gegevens, maar daarna ben je klaar.
Wat je SvelteKit applicatie betreft, ook dat is vrij eenvoudig. Kinsta biedt gratis Statische Site Hosting, wat geweldig werkt met de meeste apps die in SvelteKit zijn gebouwd. Zo doe je dat:
- Push je SvelteKit applicatie naar Bitbucket, GitHub of GitLab.
- Maak een Kinsta account aan en log in op het MyKinsta dashboard.
- Log in op je Git account naar keuze en autoriseer Kinsta.
- Klik in MyKinsta op Statische Sites en dan Site toevoegen.
- Selecteer de repository van je applicatie en voeg de juiste bouwinstellingen toe.
- Klik op Site maken.
Als je een complexe applicatie hebt gemaakt waarbij een statische site niet voldoende is, dan wil je misschien in plaats daarvan implementeren met Kinsta’s Applicatie Hosting.
Je headless site is nu gedeployd! Je bent klaar om te pronken met je gloednieuwe headless WordPress applicatie.
Samenvatting
Headless WordPress is tegenwoordig een groot succes, maar het opzetten ervan is niet altijd eenvoudig. SvelteKit is speciaal gebouwd om webontwikkeling strakker en eenvoudiger te maken, en het framework is perfect voor een headless WordPress setup.
Nu je weet hoe je een lokale WordPress instance aanmaakt, met SvelteKit werkt en naar Kinsta deployt, ben je klaar om headless WordPress naar een hoger niveau te tillen.
Of je nu een statische site of een dynamische webapplicatie maakt, SvelteKit is bij uitstek geschikt voor deze taak. Kinsta’s Applicatie Hosting of gratis Statische Hosting is de beste plek om het te hosten, dankzij de bliksemsnelle infrastructuur gebouwd op Google Cloud en Cloudflare.
Heb je al met SvelteKit gewerkt? Voldoet het framework aan de hype? Deel je gedachten in de comments!
Laat een reactie achter