Depuis un certain temps, WordPress headless est une grande tendance dans les sphères du développement web. Le découplage entre le frontend et le backend peut conduire à un degré de contrôle plus fin, à des applications omnicanales et à des utilisations intéressantes de cette nouvelle technologie.
De nombreux développeurs ont pris plaisir à expérimenter des frameworks comme Vue.js et React.js ou même des frameworks web comme Django et Ruby on Rails, qui sont généralement incompatibles avec WordPress.
Il y a beaucoup de frameworks comme ceux-ci qui fonctionnent bien avec WordPress headless, mais SvelteKit est un framework spécial. Ce framework d’interface utilisateur a été spécialement conçu pour faciliter le développement d’applications web grâce à un code concis et gracieux. Il peut facilement rationaliser des fonctionnalités qui, normalement, ne fonctionnent pas bien dans un environnement découplé.
Vous souhaitez en savoir plus ? Passons en revue les bases de WordPress headless, puis nous vous apprendrons tout sur SvelteKit et comment le faire fonctionner dans votre environnement.
Qu’est-ce que WordPress headless ?
Vous connaissez peut-être déjà la différence entre le frontend et le backend de WordPress. Le backend est l’endroit où se déroulent toutes les opérations sous-jacentes du CMS : vous créez des articles et des pages, installez des extensions, concevez votre thème et modifiez les réglages.
De l’autre côté, l’interface est essentiellement le site web présenté aux visiteurs. WordPress, avec ses thèmes et ses extensions, utilise diverses fonctions telles que get_posts() pour extraire et afficher les données dont il a besoin.
Prenez par exemple le widget « Articles récents » qui s’affiche sur la page d’accueil. Grâce à des fonctions de ce type, il accède aux données du backend et affiche vos derniers articles dans l’interface publique.
Le backend et le frontend de WordPress sont étroitement liés et, à bien des égards, dépendent l’un de l’autre pour fonctionner, mais cela ne signifie pas qu’ils sont inséparables.
C’est là qu’intervient le concept de « WordPress headless » : avec ce concept, vous séparez, ou découplez, le backend de WordPress. Vous êtes alors libre de le relier à la technologie frontend que vous souhaitez utiliser – pas seulement PHP, mais n’importe quel framlework de développement web, ou même une application.
Cette fonctionnalité supplémentaire vous permet d’utiliser le CMS WordPress sur plusieurs canaux. Portez vos articles de blog ou d’autres éléments du CMS sur plusieurs sites web, applications mobiles, et où vous voulez.
Dans l’ensemble, WordPress headless vous donne plus de contrôle sur le CMS et la possibilité d’utiliser des technologies qui sont habituellement incompatibles avec lui. Il vous évite également d’avoir à écrire une application complète à partir de zéro – vous pouvez utiliser le CMS intégré de WordPress pour faire une partie du travail.
Qu’est-ce que l’API REST ?
Pour faire fonctionner WordPress headless, vous devez connecter vos applications à l’aide d’une API (Application Programming Interface). Les API permettent à deux applications différentes de s’interfacer l’une avec l’autre, dans ce cas, le backend de WordPress et votre application frontend personnalisée.
Bien qu’il existe de nombreux types d’API, l’API REST est l’une de celles qui sont intégrées à WordPress. Elle permet à des applications externes de récupérer en toute sécurité des données du backend de WordPress sans passer par l’interface d’administration.
L’API REST est utilisée dans une variété de fonctions officielles de WordPress, y compris l’éditeur de blocs, et la plupart des thèmes et des extensions qui ont besoin d’une API pour fonctionner l’utilisent.
Cela s’applique également aux applications headless. Beaucoup d’entre elles utilisent l’API REST pour s’interfacer avec WordPress, en récupérant les données du backend et en les restituant dynamiquement dans votre application frontend.
L’API REST fournit des points de terminaison qui représentent différentes ressources WordPress, telles que les articles, les pages, les utilisateurs, les catégories, etc. L’accès à ces points vous permet d’afficher ces données dans l’application frontend.
Bien que vous puissiez utiliser l’API REST, SvelteKit s’appuie principalement sur une technologie différente pour la plupart de ses fonctions : GraphQL.
Qu’est-ce que GraphQL ?
GraphQL n’est pas une API à proprement parler, mais un langage de requête d’API. Contrairement aux API REST traditionnelles, où les clients doivent souvent faire plusieurs requêtes à différents points de terminaison pour récupérer des données connexes, GraphQL vous permet de récupérer toutes vos données en une seule requête.
Dans l’ensemble, GraphQL a été conçu pour vous permettre d’effectuer des requêtes plus concises dans un framework rapide et optimisé. Il est également plus facile à apprendre et moins complexe que l’API REST.
Pour ces raisons, de nombreux frameworks WordPress headless utilisent GraphQL plutôt que l’API REST ou en complément de celle-ci. Bien que GraphQL ne soit pas intégré à WordPress comme l’API REST, il existe des extrensions que vous pouvez utiliser pour intégrer cette fonctionnalité dans le CMS.
Grâce au framework optimisé, vous évitez de ne pas extraire suffisamment de données ou d’en extraire trop. Vous pouvez récupérer les données exactes dont vous avez besoin en une seule requête, ce qui est beaucoup plus facile pour votre réseau et votre serveur.
Qu’est-ce que SvelteKit ?
SvelteKit est un framework web construit sur Svelte, un framework frontend open source similaire à Next.js ou React. Il a été conçu pour rationaliser le processus de création d’applications web, et bien qu’il n’ait pas été conçu spécifiquement pour WordPress headless, ce n’est qu’une des nombreuses applications possibles.
SvelteKit a été construit sur HTML, CSS et Javascript – rien de plus. Cela le rend super facile à utiliser et agnostique, vous pouvez donc l’utiliser avec d’autres frameworks pour créer une application frontend entièrement dynamique ou construire un site statique.
Svelte a été lancé en 2016 et est toujours activement mis à jour aujourd’hui. Le framework web SvelteKit est arrivé quelques années plus tard, en 2020. Les deux sont bien connus et appréciés sur la scène du développement web, vous permettant d’écrire un code simple et élégant.
Pourquoi devriez-vous utiliser SvelteKit pour WordPress headless ?
Il y a quelques aspects de WordPress sans tête qui peuvent être difficiles à faire fonctionner. Grâce à la conception minimale de SvelteKit, ces problèmes sont minimisés et rendent l’installation de WordPress headless beaucoup plus facile.
Voici quelques-unes des fonctionnalités offertes par SvelteKit.
- Javascript uniquement. Contrairement à d’autres frameworks, vous n’avez pas à vous soucier des dépendances et des configurations confuses. Souvent, aucune configuration n’est nécessaire. SvelteKit fonctionne partout où Javascript peut s’exécuter.
- Framework agnostique. SvelteKit fonctionne bien avec d ‘autres frameworks en raison de sa simplicité. Apportez n’importe quelle technologie dans votre application WordPress headless.
- Extensible. Si SvelteKit ne fonctionne pas parfaitement dans votre environnement, il est extrêmement facile de l’étendre et de corriger tout ce qui ne fonctionne pas bien dans votre configuration.
- Léger et facile à apprendre. SvelteKit ne repose que sur Javascript, HTML et CSS. Il est très léger comparé aux frameworks traditionnels et est très facile à utiliser. Créez un code propre, élégant et simple avec des composants compacts et concis.
- Récupération de données simplifiée. GraphQL, avec lequel SvelteKit fonctionne bien, simplifie le processus de récupération des données de WordPress et vous permet de faire des requêtes plus concises et plus efficaces.
- Authentification facile. SvelteKit a récemment implémenté le support de NextAuth.js, gardant vos données sures et sécurisées tout en étant facile à installer.
- Rendu côté serveur (SSR) et génération de sites statiques (SSG). SvelteKit n’est pas seulement destiné aux sites statiques ou aux applications dynamiques. Vous pouvez faire les deux facilement en utilisant ce framework, car de multiples options de rendu de pages sont fournies, et la génération de sites statiques est facilement réalisable.
- Sitemaps. Si vous vous êtes déjà arraché les cheveux en essayant d’obtenir un sitemap fonctionnel sur un site headless, vous n’êtes pas le seul. SvelteKit vous permet de rendre dynamiquement les sitemaps avec un point de terminaison.
- Communauté dynamique. Il y a beaucoup de fans de SvelteKit qui développent des applications avec le logiciel. Si vous avez besoin d’aide ou si vous souhaitez discuter du framework, vous les trouverez facilement sur Internet et sur les réseaux sociaux. Il y a même un serveur Discord avec plus de 60.000 membres !
Comment créer un site WordPress headless avec SvelteKit
Vous êtes prêt à commencer ? Ce guide vous guidera à travers la configuration de WordPress dans un environnement local, l’installation de SvelteKit sur votre machine, et le déploiement de votre instance WordPress headless sur Kinsta une fois que vous aurez terminé.
Plongeons dans le vif du sujet.
Étape 1. Configurer un site WordPress
Il y a plusieurs façons de mettre en place une instance locale de WordPress sur votre machine. Si vous avez déjà un compte Kinsta, vous pouvez créer un site web avec le tableau de bord MyKinsta ou utiliser l’API Kinsta pour en créer un.
Pour ce tutoriel, nous utiliserons DevKinsta, un kit de développement WordPress local. Vous n’avez pas besoin d’avoir un hébergement Kinsta pour utiliser DevKinsta – c’est totalement gratuit.
Téléchargez DevKinsta à partir du lien ci-dessus. Si vous avez besoin d’aide pour l’installation ou si vous voulez apprendre les ficelles du métier, consultez la documentation de DevKinsta.
Une fois DevKinsta installé et configuré, suivez les étapes suivantes pour créer un environnement WordPress local.
- Créez un nouveau site WordPress ou un site personnalisé si vous souhaitez modifier des réglages tels que la version de PHP, le multisite, etc.
- Saisissez le nom de votre site, votre nom d’utilisateur, votre mot de passe et toute autre information, puis cliquez sur Créer un site. Patientez un peu pendant que DevKinsta met en place votre environnement WordPress local.
- Vous serez amené à l’écran Info du site. Prenez note de l’hôte de votre site car il s’agit de l’URL locale à laquelle vous accédez pour ouvrir votre site.
- Cliquez sur Ouvrir le site et naviguez jusqu’à http://<votresite>.local/wp-admin, ou cliquez simplement sur WP Admin pour ouvrir cette page directement. Connectez-vous avec les informations d’identification que vous avez saisies précédemment.
Étape 2. Préparer WordPress pour un déploiement headless
Sur votre nouvel écran d’accueil, vous devrez prendre quelques mesures supplémentaires pour préparer votre installation WordPress à un déploiement headless.
SvelteKit s’appuie sur GraphQL pour la plupart de ses fonctions, vous devrez donc installer WPGraphQL. Cette extension vous permet d’utiliser le framework GraphQL pour vous connecter à des technologies Javascript sans tête comme NextJS, Gatsby, et, bien sûr, SvelteKit.
Faites-le en naviguant vers Extensions > Ajouter et installez WPGraphQL. Cela ajoutera un IDE GraphiQL à votre barre d’administration que vous pourrez utiliser pour écrire des requêtes GraphQL dans WordPress.
Vous devrez également corriger vos permaliens. WordPress est livré avec des permaliens simples par défaut, ce qui ne fonctionnera pas avec l’API JSON sur laquelle REST s’appuie ou avec SvelteKit lui-même en raison des contraintes de Next.js.
Allez dans Réglages > Permaliens et déconnectez les permaliens de Simple. Basculez les permaliens sur Nom de publication.
Pour vérifier si cela a fonctionné, ajoutez « /wp-json » à l’URL de votre site local. Vous devriez voir le contenu de votre site sortir sous forme de données JSON.
Plus tard, vous devrez utiliser une extension de redirection de site, tel que Redirection ou All In One SEO Pro, pour faire pointer votre URL vers l’application frontend que vous construisez. Installez et configurez une extension de redirection une fois que vous êtes prêt à rediriger les utilisateurs vers votre application SvelteKit.
Avec cela, vous avez terminé et vous êtes prêt à installer SvelteKit.
Étape 3. Configurer votre environnement SvelteKit
Tout d’abord, SvelteKit nécessite un système de base incluant Node 18.13 ou plus. Puisque le framework est si léger, il fonctionnera sur presque tous les systèmes. Assurez-vous que npm est installé avec Node, sinon cela ne fonctionnera pas !
Vous pouvez maintenant installer SvelteKit sur votre système. La documentation fournit une marche à suivre complète, mais voici les bases.
Tout d’abord, installons Svelte avec le paquet create-svelte. Vous pouvez nommer votre projet (« my-svelte-app ») comme vous le souhaitez. Cette commande créera une application Svelte avec tous les réglages de base prêts à l’emploi.
npm create svelte my-svelte-appDiverses invites vous seront présentées ; répondez par oui ou par non pour créer votre environnement SvelteKit.
Il y a quelques paquets npm que vous devrez installer, donc accédez à la racine de votre projet avec cette commande (remplacez « my-svelte-app » par le nom que vous lui avez donné).
cd my-svelte-app/Puis lancez cette commande pour installer les paquets nécessaires :
npm installEnfin, lancez le serveur de développement avec cette commande :
npm run devUne fois le serveur lancé, vous pouvez consulter votre application en cours à l’adresse suivante : http://localhost:3000
Maintenant, plutôt que d’utiliser le moteur de rendu de page par défaut, vous pouvez passer au moteur de rendu statique pour générer un site SvelteKit statique.
Avec cela, SvelteKit devrait être configuré avec succès, et vous pouvez commencer à créer votre site headless.
Étape 4. Utiliser GraphQL pour connecter SvelteKit et WordPress
Au fur et à mesure que vous expérimentez GraphQL et votre environnement SvelteKit, gardez ces conseils à l’esprit.
- Lisez l’introduction à Svelte/SvelteKit pour bien comprendre le fonctionnement de ce framework. Ce tutoriel est interactif ; vous pouvez essayer le code vous-même !
- Vous pouvez installer le paquet SvelteKit GraphQL si vous avez des difficultés à configurer manuellement votre API GraphQL.
- Dans le cadre de WPGraphQL, vous pouvez également utiliser les blocs Gutenberg via wp-graphql-gutenberg, qui est livré avec l’extension standard.
- Bien que vous puissiez utiliser l’API REST avec SvelteKit dans une certaine mesure, les fonctionnalités étendues de GraphQL fonctionnent mieux avec ce framework. Si vous préférez utiliser l’API REST, consultez cette démo WordPress headless SvelteKit sur GitHub, qui utilise l’API REST pour connecter les deux plateformes.
Vous devriez également vous renseigner sur le chargement de données et le routage pour intégrer SvelteKit et WordPress. Il existe de nombreuses façons de se connecter à WordPress et de construire une application headless.
Étape 5. Déployer WordPress et SvelteKit sur Kinsta
Une fois que vous avez mis en place un environnement headless et que vous êtes prêt à le déployer, vous devrez suivre deux étapes distinctes : Déployer WordPress et pousser le frontend sur un site statique.
La partie WordPress est très simple. Dans DevKinsta, sur votre page Info du site, vous devriez voir un bouton Pousser vers le staging. Vous devrez vous connecter avec vos identifiants Kinsta, mais après cela, vous aurez terminé.
Quant à votre application SvelteKit, c’est également très simple. Kinsta propose un hébergement gratuit de sites statiques, qui fonctionne parfaitement avec la plupart des applications construites avec SvelteKit. Voici comment procéder.
- Transférez votre application SvelteKit sur Bitbucket, GitHub ou GitLab.
- Créez un compte Kinsta et connectez-vous au tableau de bord MyKinsta.
- Connectez-vous au compte Git de votre choix et autorisez Kinsta.
- Dans MyKinsta, cliquez sur Sites statiques puis sur Ajouter un site.
- Sélectionnez le dépôt de votre application et ajoutez les réglages de construction appropriés.
- Cliquez sur Créer un site.
Si vous avez créé une application complexe pour laquelle un site statique n’est pas suffisant, vous pouvez opter pour l’hébergement d’application de Kinsta.
Quoi qu’il en soit, votre site headless est maintenant déployé ! Vous êtes prêt à montrer votre toute nouvelle application WordPress headless.
Résumé
WordPress headless est une grande affaire de nos jours, mais sa mise en place n’est pas toujours facile. SvelteKit a été spécialement conçu pour rendre le développement web plus propre et plus facile, et le framework est parfait pour une installation WordPress headless.
Maintenant que vous savez comment créer une instance locale de WordPress, travailler avec SvelteKit, et déployer sur Kinsta, vous êtes prêt à faire passer WordPress headless au niveau supérieur.
Que vous créiez un site statique ou une application web dynamique, SvelteKit est parfaitement adapté à la tâche. L’hébergement d’applications ou l’hébergement statique gratuit de Kinsta est le meilleur endroit pour l’héberger, grâce à son infrastructure rapide comme l’éclair construite sur Google Cloud et Cloudflare.
Avez-vous déjà travaillé avec SvelteKit ? Le framework est-il à la hauteur de l’engouement qu’il suscite ? Faites-nous part de vos impressions dans les commentaires !
Laisser un commentaire