Come creare un sito WordPress senza testa con Faust.js (in 9 passaggi)

Se devi eseguire WordPress senza testa, un framework di qualità è un must. Tuttavia, anche con un piccolo aiuto da un framework moderno, potresti comunque avere difficoltà a visualizzare in anteprima i tuoi contenuti in modo efficace.

È qui che entra in gioco Faust.js. Questo nuovo framework sfrutta la potenza di Next.js e React e lo combina con comode funzionalità di anteprima dei post. Con Faust.js, puoi visualizzare i tuoi contenuti prima di premere Pubblica , esattamente come con un tradizionale sito Web WordPress.

In questo articolo, esploreremo perché potresti voler utilizzare Faust.js per il tuo prossimo progetto WordPress senza testa. Quindi ti mostreremo come impostare questo nuovo framework e creare un semplice front-end. Iniziamo!

Perché potresti voler eseguire un sito WordPress senza testa

Il tipico Content Management System (CMS) è costituito da un front-end e un back-end e WordPress non fa eccezione. Tuttavia, è possibile eseguire WordPress senza testa.

La "testa" si riferisce al livello di presentazione, mentre il "corpo" è il punto in cui il contenuto viene archiviato e creato. Rimuovendo il front-end (testa) dal back-end (corpo), puoi eseguire WordPress senza testa.

Con un progetto headless, continuerai a utilizzare la dashboard e gli strumenti familiari di WordPress. Tuttavia, sei libero di progettare il tuo front-end, indipendentemente dai soliti vincoli di WordPress. Questo ti dà il controllo completo su come vengono visualizzati i tuoi contenuti.

Creare il tuo front-end può essere una prospettiva eccitante, ma non è particolarmente semplice. Fortunatamente, ci sono strumenti che possono eseguire gran parte del lavoro pesante per te.

Molti utenti di CMS senza testa scelgono di avvalersi dell'aiuto di uno strumento come Frontity, il framework Gatsby o Next.js basato su React. Tuttavia, tradizionalmente è stato difficile visualizzare in anteprima post e pagine su un sito senza testa, anche quando si utilizza un framework. È qui che entra in gioco Faust.js:

Questo framework si basa su Next.js e React e si sforza di fornire un'esperienza di pubblicazione coerente con WordPress tradizionale. Per raggiungere questo obiettivo, Faust.js offre anteprime dei contenuti senza interruzioni.

Faust.js utilizza anche un client GraphQL. Ciò ti consente di interrogare l'API WPGraphQL di WordPress senza dover conoscere le query GraphQL in anticipo.

Inoltre, Faust.js fornisce meccanismi integrati per l'autenticazione del back-end di WordPress. Ciò semplifica la creazione di contenuti controllati e siti di e-commerce con il tuo CMS headless.

Come creare un sito WordPress senza testa con Faust.js (in 9 passaggi)

Ora che abbiamo spiegato cos'è Faust.js e alcuni dei suoi principali vantaggi, vediamo come puoi iniziare con questo framework. Ecco come creare un CMS headless con Faust.js, in nove passaggi.

Passaggio 1: prepara il tuo ambiente di sviluppo

Prima di iniziare, devi installare Node.js e Node Package Manager (NPM). Avrai anche bisogno di un'installazione di WordPress, che puoi ospitare localmente o su un server web.

Utilizzerai anche alcuni plugin di WordPress. Innanzitutto, il plug-in WPGraphQL trasformerà WordPress in un'API GraphQL, pronta per essere utilizzata dal tuo progetto.

Avrai anche bisogno di WPE Headless. Questo plugin fornisce alcune funzionalità extra che aiutano a garantire che WordPress funzioni correttamente come CMS headless. Puoi scaricare l'ultima versione di questo plug-in e quindi caricarla sulla dashboard di WordPress.

Per aiutarti a iniziare con il framework Faust.js, utilizzerai il progetto di avvio create-next-app. Questo genera un'applicazione Next.js avviata con tutte le configurazioni e i file necessari già in atto. Puoi quindi usarlo come base per il tuo progetto Faust.js senza testa.

Puoi installare create-next-app usando lo strumento npx, che è in bundle con NPM. Nel tuo terminale locale o nella finestra del prompt dei comandi, esegui quanto segue:

 npx create-next-app faust-headless-demo

Questo creerà un progetto demo faust-headless nella directory degli utenti locali del tuo computer. Una volta completato questo processo, il Terminale ti chiederà di avviare l'applicazione Next.js utilizzando i seguenti comandi:

 cd faust-headless-demo npm run dev

Congratulazioni: hai appena creato con successo un progetto Next.js! Per dare un'occhiata a questa applicazione, vai su "http://localhost:3000" nel tuo browser:

Ora dovresti vedere il sito di avvio di Next.js. Se si verifica un messaggio di errore, provare a eseguire nuovamente il comando npm run dev , che potrebbe risolvere il problema.

Passaggio 2: imposta TypeScript

Faust.js utilizza TypeScript, che è un superset tipizzato di JavaScript che aggiunge il controllo del tipo in fase di compilazione. Ciò consente di rilevare gli errori in fase di compilazione, anziché attendere il runtime. Per installare TypeScript, esegui i seguenti comandi nel tuo Terminale:

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

Ora devi generare un file tsconfig.json . Questo file specifica le opzioni del compilatore necessarie per eseguire il progetto:

 npx tsc --init

Dopo aver impostato TypeScript, dovrai convertire alcuni file JavaScript nel formato TypeScript. Passa alla directory Users locale, che dovrebbe contenere una nuova directory faust-headless-demo :

All'interno di faust-headless-demo , apri la directory delle pagine . Ora puoi rinominare il file _app.js in _app.tsx e sostituirne il contenuto con il seguente:

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

Quindi, rinomina pages/index.js in pages/index.tsx . La tua app Next.js ora è configurata correttamente per TypeScript.

Passaggio 3: creare un componente React riutilizzabile

A questo punto, puoi mettere alla prova il tuo progetto visualizzando alcuni contenuti fittizi. Nella directory delle tue pagine locali, crea un file posts.tsx :

In questo file, inserirai del testo. Se il seguente contenuto viene visualizzato nel tuo browser, saprai che la tua applicazione Next.js è configurata correttamente:

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

Nel tuo browser, vai a "http://localhost:3000/posts". Ora dovresti vedere questo contenuto fittizio:

Dopo aver verificato la tua configurazione, il passaggio successivo è la creazione di un componente React di base. Alla fine utilizzerai questo componente per visualizzare un elenco di tutti i tuoi post WordPress.

È consigliabile aggiungere tutti i componenti di React a una directory dedicata. Con questo in mente, vai alla radice del tuo progetto e crea una cartella dei componenti :

All'interno di questa directory, crea un file post.tsx . Un componente React può ricevere dati dal componente genitore tramite gli oggetti di scena del componente. In questo esempio, passerai il titolo e il contenuto di ogni post al componente del post.

In TypeScript, puoi ottenere ciò creando un'interfaccia per mappare i dati che desideri passare. All'interno del tuo file posts.tsx , aggiungi quanto segue:

 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> ); }

Ora hai un componente React riutilizzabile. Il passaggio successivo consiste nell'utilizzare questo componente nella pagina dei tuoi post.

Passaggio 4: visualizza un elenco di post

Per iniziare, apri il file pages/posts.tsx . A questo punto, fornirai semplicemente alcuni dati falsi, che visualizzerai in un formato elenco:

 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>; }

Puoi creare un elenco di post scorrendo l'array dei post. Ciò richiede il rendering di un componente Post per ogni articolo:

 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> ); }

Salva le modifiche e chiudi questo file. Quindi, vai su "http://localhost:3000/posts":

Questa scheda dovrebbe ora visualizzare un elenco di post falsi. Dopo aver collegato Faust.js al back-end di WordPress, utilizzerai questo componente React per visualizzare un elenco dei post reali del tuo sito web.

Passaggio 5: configurare il Framework Faust.js

Sei finalmente pronto per configurare il framework Faust.js. Per iniziare, installa le dipendenze di produzione e sviluppo eseguendo i seguenti comandi:

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

Quindi vai alla directory principale del tuo progetto. All'interno di questa cartella, crea un nuovo file faust.config.js :

Utilizzerai questo file per connettere Faust.js al tuo back-end WordPress. Ora puoi inserire il seguente codice:

 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, });

All'interno di questa directory, dovrai anche creare un file .env.local . Questo conterrà tutte le tue variabili di ambiente:

All'interno di .env.local , aggiungi il codice seguente. Assicurati di sostituire il tuo sito con il tuo URL:

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

Dovrai anche sostituire YOUR_PLUGIN_SECRET con il segreto senza testa del tuo sito. Puoi trovare queste informazioni navigando in Impostazioni > Senza testa nella dashboard di WordPress:

Faust.js utilizzerà questo segreto senza testa per autenticare le sue richieste a WordPress. Ciò consente di visualizzare in anteprima il contenuto della bozza sul front-end.

Passaggio 6: configurare il client GraphQL per Faust.js

Faust.js utilizza GQty come client GraphQL. Per configurare GQty, crea un file gqty.config.js nella directory principale del tuo progetto:

Ora puoi aprire questo file per la modifica. All'interno di gqty.config.js , copia e incolla quanto segue:

 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;

Il passaggio successivo è la creazione di un client GQty, che utilizzerai per interrogare i dati del tuo sito web. Nella radice del tuo progetto, crea una nuova directory client . All'interno di questa cartella, crea un file index.ts contenente il seguente codice:

 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';

Ora puoi salvare le modifiche e chiudere il file index.ts . Ora che hai tutti i pezzi a posto, sei pronto per generare lo schema GraphQL.

Passaggio 7: eseguire lo script Genera

Il passaggio successivo consiste nell'aggiungere uno script di generazione al file package.json . Questo script genererà lo schema necessario in base alla struttura del tuo sito WordPress.

Per aggiungere questo script, vai alla cartella principale del tuo progetto e apri il file package.json . Ora puoi aggiungere lo script di generazione al primo blocco di codice:

 { "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" },

Prima di eseguire questo script, dovrai abilitare temporaneamente l'introspezione pubblica per il tuo sito web. Nella dashboard di WordPress, vai su GraphQL > Impostazioni . Quindi scorri fino a Abilita introspezione pubblica e seleziona la relativa casella di controllo:

Fare clic su Salva modifiche . Ora puoi eseguire lo script di generazione immettendo il seguente comando nel tuo Terminale:

 npm run generate

Questo script creerà un file client/schema.generated.ts . A questo punto, puoi disabilitare l'introspezione pubblica all'interno della dashboard di WordPress.

Passaggio 8: definire un componente e un gancio FaustProvider

Ora devi eseguire il wrapping della tua applicazione Next.js utilizzando il componente <FaustProvider> integrato . Questo componente React Higher-Order fornirà a Faust.js il contesto necessario per recuperare e memorizzare nella cache i dati.

Per ottenere ciò, apri il file pages/_app.tsx del tuo progetto. È quindi possibile sostituirne il contenuto con quanto segue:

 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;

Ora sei pronto per interrogare i dati dal back-end di WordPress. Utilizzerai l'hook usePosts , che fornisce un'interfaccia standard che recupera un elenco di post dall'API di WordPress senza testa.

Apri la directory pages/posts.tsx ed elimina tutto il codice standard di Lorem Lipsum . È quindi possibile implementare l'hook 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> ); }

Il file di schema che hai generato esporta un tipo Post. Ciò significa che puoi utilizzare questo tipo per definire gli oggetti di scena del componente Post. Per accettare un post prop, apri il file components/post.tsx e aggiungi quanto segue:

 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> ); }

È possibile specificare se si desidera ricevere il contenuto renderizzato o il contenuto non elaborato. Nel codice sopra, stai optando per il contenuto renderizzato.

Passaggio 9: collega Faust.js al tuo sito Web WordPress

Il passaggio finale è la creazione di un collegamento tra i tuoi dati e il componente Post. Ciò richiede di aggiungere una singola riga di codice al file posts.tsx :

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

Dopo aver apportato queste modifiche, carica "http://localhost:3000/posts" nel tuo browser. Ora dovresti vedere un elenco di tutti i post dal tuo sito Web WordPress:

Se i tuoi post non vengono visualizzati, termina il processo in esecuzione chiudendo il Terminale. Quindi apri una nuova finestra e usa il comando cambia directory in modo che il Terminale punti al tuo progetto Faust.js locale (ad esempio: cd /Users/username/faust-headless-demo ). È quindi possibile avviare il server di sviluppo ( npm run dev ) e provare ad aggiornare la pagina "http://localhost:3000/posts".

Conclusione

Molti sviluppatori WordPress senza testa scelgono di utilizzare un framework. Tuttavia, quando è il momento di visualizzare in anteprima i tuoi contenuti, molti framework ti obbligano ad accedere a un sito esterno o a visualizzare la tua pagina di anteprima all'interno di un frame.

Faust.js si propone di fornire un'esperienza di anteprima coerente e senza interruzioni. Quando imposti questo framework, sarai in grado di visualizzare i tuoi contenuti utilizzando il familiare flusso di lavoro di WordPress. Avrai anche accesso ai familiari set di strumenti React e Node.js.

Hai domande sul framework Faust.js? Fatecelo sapere nella sezione commenti qui sotto!