Comment créer un site WordPress sans tête avec Faust.js (en 9 étapes)

Si vous devez exécuter WordPress sans tête, un cadre de qualité est indispensable. Cependant, même avec un peu d'aide d'un cadre moderne, vous pouvez toujours avoir du mal à prévisualiser efficacement votre contenu.

C'est là qu'intervient Faust.js. Ce nouveau framework exploite la puissance de Next.js et de React, et les combine avec des fonctionnalités pratiques de prévisualisation des publications. Avec Faust.js, vous pouvez afficher votre contenu avant de cliquer sur Publier , exactement comme avec un site Web WordPress traditionnel.

Dans cet article, nous allons explorer pourquoi vous pourriez vouloir utiliser Faust.js pour votre prochain projet WordPress sans tête. Ensuite, nous vous montrerons comment configurer ce nouveau framework et créer un frontal simple. Commençons!

Pourquoi vous pourriez vouloir exécuter un site WordPress sans tête

Le système de gestion de contenu (CMS) typique se compose d'un front-end et d'un back-end, et WordPress ne fait pas exception. Cependant, il est possible d'exécuter WordPress sans tête.

La « tête » fait référence à la couche de présentation, tandis que le « corps » est l'endroit où le contenu est stocké et créé. En supprimant l'extrémité avant (tête) de l'extrémité arrière (corps), vous pouvez exécuter WordPress sans tête.

Avec un projet sans tête, vous continuerez à utiliser le tableau de bord et les outils WordPress familiers. Cependant, vous êtes libre de concevoir votre propre front-end, indépendamment des contraintes habituelles de WordPress. Cela vous donne un contrôle total sur la façon dont votre contenu est affiché.

Créer votre propre frontal peut être une perspective passionnante, mais ce n'est pas particulièrement simple. Heureusement, il existe des outils qui peuvent effectuer une grande partie du travail lourd à votre place.

De nombreux utilisateurs de CMS sans tête choisissent de faire appel à un outil tel que Frontity, le framework Gatsby ou Next.js basé sur React. Cependant, traditionnellement, il a été difficile de prévisualiser les publications et les pages sur un site sans tête, même en utilisant un framework. C'est là qu'intervient Faust.js :

Ce framework est construit sur Next.js et React, et s'efforce de fournir une expérience de publication cohérente avec WordPress traditionnel. Pour y parvenir, Faust.js propose des aperçus de contenu transparents.

Faust.js utilise également un client GraphQL. Cela vous permet d'interroger l'API WordPress WPGraphQL sans avoir à connaître les requêtes GraphQL à l'avance.

De plus, Faust.js fournit des mécanismes intégrés pour authentifier votre back-end WordPress. Cela facilite la création de contenu sécurisé et de sites de commerce électronique avec votre CMS sans tête.

Comment créer un site WordPress sans tête avec Faust.js (en 9 étapes)

Maintenant que nous avons couvert ce qu'est Faust.js et certains de ses principaux avantages, voyons comment vous pouvez démarrer avec ce framework. Voici comment créer un CMS headless avec Faust.js, en neuf étapes.

Étape 1 : Préparez votre environnement de développement

Avant de commencer, vous devez installer Node.js et le Node Package Manager (NPM). Vous aurez également besoin d'une installation WordPress, que vous pouvez héberger localement ou sur un serveur Web.

Vous utiliserez également quelques plugins WordPress. Tout d'abord, le plugin WPGraphQL transformera WordPress en une API GraphQL, prête à être utilisée par votre projet.

Vous aurez également besoin de WPE Headless. Ce plugin fournit des fonctionnalités supplémentaires qui permettent de garantir que WordPress fonctionne correctement en tant que CMS sans tête. Vous pouvez télécharger la dernière version de ce plugin, puis la télécharger sur votre tableau de bord WordPress.

Pour vous aider à démarrer avec le framework Faust.js, vous utiliserez le projet de démarrage create-next-app. Cela génère une application Next.js amorcée avec toutes les configurations et tous les fichiers nécessaires déjà en place. Vous pouvez ensuite l'utiliser comme base pour votre projet Headless Faust.js.

Vous pouvez installer create-next-app à l'aide de l'outil npx, fourni avec NPM. Dans votre fenêtre de terminal ou d'invite de commande locale, exécutez ce qui suit :

 npx create-next-app faust-headless-demo

Cela créera un projet faust-headless-demo dans le répertoire des utilisateurs locaux de votre ordinateur. Une fois ce processus terminé, le Terminal vous invitera à démarrer votre application Next.js à l'aide des commandes suivantes :

 cd faust-headless-demo npm run dev

Félicitations ! Vous venez de créer avec succès un projet Next.js ! Pour jeter un œil à cette application, rendez-vous sur "http://localhost:3000" dans votre navigateur :

Vous devriez maintenant voir le site de démarrage Next.js. Si vous rencontrez un message d'erreur, essayez de relancer la commande npm run dev , ce qui peut résoudre le problème.

Étape 2 : Configurer TypeScript

Faust.js utilise TypeScript, qui est un sur-ensemble typé de JavaScript qui ajoute une vérification de type au moment de la compilation. Cela vous permet d'intercepter les erreurs au moment de la compilation, plutôt que d'attendre l'exécution. Pour installer TypeScript, exécutez les commandes suivantes dans votre terminal :

 npm install --save-dev @types/react npm install typescript --save-dev

Maintenant, vous devez générer un fichier tsconfig.json . Ce fichier spécifie les options du compilateur requises pour exécuter votre projet :

 npx tsc --init

Une fois que vous avez configuré TypeScript, vous devrez convertir quelques fichiers JavaScript au format TypeScript. Accédez à votre répertoire Users local, qui doit contenir un nouveau répertoire faust-headless-demo :

Dans faust-headless-demo , ouvrez le répertoire pages . Vous pouvez maintenant renommer le fichier _app.js en _app.tsx et remplacer son contenu par ce qui suit :

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

Ensuite, renommez pages/index.js en pages/index.tsx . Votre application Next.js est maintenant correctement configurée pour TypeScript.

Étape 3 : Créer un composant React réutilisable

À ce stade, vous pouvez tester votre projet en affichant du contenu factice. Dans votre répertoire de pages locales, créez un fichier posts.tsx :

Dans ce fichier, vous allez entrer du texte. Si le contenu suivant apparaît dans votre navigateur, vous saurez que votre application Next.js est correctement configurée :

 export default function PostsPage() { return <h1>The posts page</h1>; }

Dans votre navigateur, accédez à "http://localhost:3000/posts". Vous devriez maintenant voir ce contenu factice :

Une fois que vous avez vérifié votre configuration, l'étape suivante consiste à créer un composant React de base. Vous utiliserez éventuellement ce composant pour afficher une liste de tous vos articles WordPress.

Il est recommandé d'ajouter tous vos composants React dans un répertoire dédié. Dans cet esprit, accédez à la racine de votre projet et créez un dossier de composants :

Dans ce répertoire, créez un fichier post.tsx . Un composant React peut recevoir des données du composant parent via des accessoires de composant. Dans cet exemple, vous allez transmettre le titre et le contenu de chaque publication au composant de publication.

Dans TypeScript, vous pouvez y parvenir en créant une interface pour cartographier les données que vous souhaitez transmettre. Dans votre fichier posts.tsx , ajoutez ce qui suit :

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

Vous avez maintenant un composant React réutilisable. L'étape suivante consiste à utiliser ce composant dans votre page de publications.

Étape 4 : Afficher une liste de messages

Pour commencer, ouvrez le fichier pages/posts.tsx . À ce stade, vous allez simplement fournir de fausses données, que vous afficherez sous forme de liste :

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

Vous pouvez créer une liste de publications en parcourant le tableau des publications. Cela nécessite que vous rendiez un composant Post pour chaque élément :

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

Enregistrez vos modifications et fermez ce fichier. Ensuite, rendez-vous sur "http://localhost:3000/posts":

Cet onglet devrait maintenant afficher une liste de faux messages. Une fois que vous avez connecté Faust.js au back-end WordPress, vous utiliserez ce composant React pour afficher une liste des publications réelles de votre site Web.

Étape 5 : Configurer le framework Faust.js

Vous êtes enfin prêt à configurer le framework Faust.js. Pour commencer, installez les dépendances de production et de développement en exécutant les commandes suivantes :

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

Accédez ensuite au répertoire racine de votre projet. Dans ce dossier, créez un nouveau fichier faust.config.js :

Vous utiliserez ce fichier pour connecter Faust.js à votre back-end WordPress. Vous pouvez maintenant saisir le code suivant :

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

Dans ce répertoire, vous devrez également créer un fichier .env.local . Cela contiendra toutes vos variables d'environnement :

Dans .env.local , ajoutez le code suivant. Assurez-vous de remplacer votre-site par votre propre URL :

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

Vous devrez également remplacer YOUR_PLUGIN_SECRET par le secret sans tête de votre site. Vous pouvez trouver ces informations en accédant à Paramètres > Headless dans votre tableau de bord WordPress :

Faust.js utilisera ce secret sans tête pour authentifier ses requêtes auprès de WordPress. Cela permet de prévisualiser le brouillon de contenu sur votre front-end.

Étape 6 : Configurez votre client GraphQL pour Faust.js

Faust.js utilise GQty comme client GraphQL. Pour configurer GQty, créez un fichier gqty.config.js dans le répertoire racine de votre projet :

Vous pouvez maintenant ouvrir ce fichier pour le modifier. Dans gqty.config.js , copiez et collez ce qui suit :

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

L'étape suivante consiste à créer un client GQty, que vous utiliserez pour interroger les données de votre site Web. A la racine de votre projet, créez un nouveau répertoire client . Dans ce dossier, créez un fichier index.ts contenant le code suivant :

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

Vous pouvez maintenant enregistrer vos modifications et fermer le fichier index.ts . Maintenant que vous avez toutes les pièces en place, vous êtes prêt à générer le schéma GraphQL.

Étape 7 : Exécutez le script de génération

L'étape suivante consiste à ajouter un script de génération à votre fichier package.json . Ce script générera le schéma nécessaire en fonction de la structure de votre site WordPress.

Pour ajouter ce script, accédez au dossier racine de votre projet et ouvrez le fichier package.json . Vous pouvez maintenant ajouter le script de génération au premier bloc de code :

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

Avant d'exécuter ce script, vous devez activer temporairement l'introspection publique pour votre site Web. Dans le tableau de bord WordPress, accédez à GraphQL > Paramètres . Ensuite, faites défiler jusqu'à Activer l'introspection publique et cochez la case qui l'accompagne :

Cliquez sur Enregistrer les modifications . Vous pouvez maintenant exécuter le script de génération en saisissant la commande suivante dans votre terminal :

 npm run generate

Ce script créera un fichier client/schema.generated.ts . À ce stade, vous pouvez désactiver l'introspection publique dans votre tableau de bord WordPress.

Étape 8 : Définir un composant et un crochet FaustProvider

Maintenant, vous devez encapsuler votre application Next.js à l'aide du composant <FaustProvider> intégré . Ce composant d'ordre supérieur React fournira à Faust.js le contexte dont il a besoin pour récupérer et mettre en cache les données.

Pour ce faire, ouvrez le fichier pages/_app.tsx de votre projet. Vous pouvez ensuite remplacer son contenu par ce qui suit :

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

Vous êtes maintenant prêt à interroger les données du back-end WordPress. Vous utiliserez le crochet usePosts , qui fournit une interface standard qui récupère une liste de publications à partir de l'API WordPress sans tête.

Ouvrez le répertoire pages/posts.tsx et supprimez tout le code passe- partout Lorem Lipsum . Vous pouvez ensuite implémenter le crochet usePosts :

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

Le fichier de schéma que vous avez généré exporte un type Post. Cela signifie que vous pouvez utiliser ce type pour définir les accessoires du composant Post. Pour accepter un accessoire Post, ouvrez le fichier components/post.tsx et ajoutez ce qui suit :

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

Vous pouvez spécifier si vous souhaitez recevoir le contenu rendu ou le contenu brut. Dans le code ci-dessus, vous optez pour le contenu rendu.

Étape 9 : Connectez Faust.js à votre site WordPress

La dernière étape consiste à créer un lien entre vos données et le composant Post. Cela nécessite que vous ajoutiez une seule ligne de code au fichier posts.tsx :

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

Après avoir effectué ces modifications, chargez "http://localhost:3000/posts" dans votre navigateur. Vous devriez maintenant voir une liste de tous les messages de votre site WordPress :

Si vos messages n'apparaissent pas, mettez fin au processus en cours en fermant votre terminal. Ouvrez ensuite une nouvelle fenêtre et utilisez la commande de changement de répertoire pour que le terminal pointe vers votre projet local Faust.js (par exemple : cd /Users/username/faust-headless-demo ). Vous pouvez ensuite démarrer le serveur de développement ( npm run dev ) et essayer d'actualiser la page « http://localhost:3000/posts ».

Conclusion

De nombreux développeurs WordPress sans tête choisissent d'utiliser un framework. Cependant, lorsqu'il est temps de prévisualiser votre contenu, de nombreux frameworks vous obligent à vous connecter à un site externe ou à afficher votre page de prévisualisation dans un cadre.

Faust.js vise à fournir une expérience de prévisualisation cohérente et transparente. Lorsque vous configurez ce cadre, vous pourrez afficher votre contenu à l'aide du flux de travail WordPress familier. Vous aurez également accès aux outils familiers React et Node.js.

Vous avez des questions sur le framework Faust.js ? Faites-nous savoir dans la section commentaires ci-dessous!