Cómo crear un sitio de WordPress sin cabeza con Faust.js (en 9 pasos)

Si necesita ejecutar WordPress sin cabeza, un marco de calidad es imprescindible. Sin embargo, incluso con un poco de ayuda de un marco moderno, aún puede tener dificultades para obtener una vista previa de su contenido de manera efectiva.

Ahí es donde entra Faust.js. Este nuevo marco aprovecha el poder de Next.js y React, y lo combina con funciones convenientes de vista previa posterior. Con Faust.js, puede ver su contenido antes de presionar Publicar , exactamente igual que con un sitio web tradicional de WordPress.

En este artículo, exploraremos por qué podría querer usar Faust.js para su próximo proyecto de WordPress sin cabeza. Luego, le mostraremos cómo configurar este nuevo marco y crear una interfaz simple. ¡Empecemos!

Por qué es posible que desee ejecutar un sitio de WordPress sin cabeza

El sistema de gestión de contenido (CMS) típico consta de un front-end y un back-end, y WordPress no es una excepción. Sin embargo, es posible ejecutar WordPress sin cabeza.

La 'cabeza' se refiere a la capa de presentación, mientras que el 'cuerpo' es donde se almacena y crea el contenido. Al quitar la parte delantera (cabeza) de la parte trasera (cuerpo), puede ejecutar WordPress sin cabeza.

Con un proyecto sin cabeza, continuará utilizando el panel y las herramientas familiares de WordPress. Sin embargo, eres libre de diseñar tu propia interfaz, independientemente de las restricciones habituales de WordPress. Esto le da un control completo sobre cómo se muestra su contenido.

Crear su propia interfaz puede ser una perspectiva emocionante, pero no es particularmente sencilla. Afortunadamente, existen herramientas que pueden realizar gran parte del trabajo pesado por usted.

Muchos usuarios de CMS sin cabeza optan por solicitar la ayuda de una herramienta como Frontity, el marco Gatsby o Next.js basado en React. Sin embargo, tradicionalmente ha sido difícil obtener una vista previa de publicaciones y páginas en un sitio sin cabeza, incluso cuando se usa un marco. Ahí es donde entra Faust.js:

Este marco se basa en Next.js y React, y se esfuerza por brindar una experiencia de publicación que sea consistente con WordPress tradicional. Para lograr esto, Faust.js ofrece vistas previas de contenido perfectas.

Faust.js también usa un cliente GraphQL. Esto le permite consultar la API de WordPress WPGraphQL sin tener que conocer las consultas de GraphQL con anticipación.

Además, Faust.js proporciona mecanismos integrados para autenticar su back-end de WordPress. Esto facilita la creación de contenido privado y sitios de comercio electrónico con su CMS autónomo.

Cómo crear un sitio de WordPress sin cabeza con Faust.js (en 9 pasos)

Ahora que hemos cubierto qué es Faust.js y algunos de sus principales beneficios, veamos cómo puede comenzar con este marco. Aquí se explica cómo crear un CMS sin encabezado con Faust.js, en nueve pasos.

Paso 1: prepare su entorno de desarrollo

Antes de comenzar, deberá instalar Node.js y Node Package Manager (NPM). También necesitará una instalación de WordPress, que puede alojar localmente o en un servidor web.

También usará algunos complementos de WordPress. En primer lugar, el complemento WPGraphQL transformará WordPress en una API GraphQL, lista para que la consuma su proyecto.

También necesitará WPE Headless. Este complemento proporciona algunas funciones adicionales que ayudan a garantizar que WordPress funcione correctamente como un CMS sin encabezado. Puede descargar la última versión de este complemento y luego cargarlo en su panel de WordPress.

Para ayudarlo a comenzar con el marco Faust.js, usará el proyecto de inicio create-next-app. Esto genera una aplicación Next.js con arranque con todas las configuraciones y archivos necesarios ya establecidos. Luego puede usar esto como base para su proyecto Faust.js sin cabeza.

Puede instalar create-next-app con la herramienta npx, que se incluye con NPM. En su terminal local o en la ventana del símbolo del sistema, ejecute lo siguiente:

 npx create-next-app faust-headless-demo

Esto creará un proyecto de demostración de faust-headless en el directorio de usuarios locales de su computadora. Una vez que se complete este proceso, la Terminal le pedirá que inicie su aplicación Next.js usando los siguientes comandos:

 cd faust-headless-demo npm run dev

¡Felicitaciones, acaba de crear con éxito un proyecto Next.js! Para echar un vistazo a esta aplicación, diríjase a "http://localhost:3000" en su navegador:

Ahora debería ver el sitio de inicio de Next.js. Si encuentra un mensaje de error, intente volver a ejecutar el comando npm run dev , que puede resolver el problema.

Paso 2: configurar TypeScript

Faust.js usa TypeScript, que es un superconjunto tipado de JavaScript que agrega verificación de tipos en tiempo de compilación. Esto le permite detectar errores en tiempo de compilación, en lugar de esperar hasta el tiempo de ejecución. Para instalar TypeScript, ejecute los siguientes comandos en su Terminal:

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

Ahora, debe generar un archivo tsconfig.json . Este archivo especifica las opciones del compilador que se requieren para ejecutar su proyecto:

 npx tsc --init

Una vez que haya configurado TypeScript, deberá convertir algunos archivos JavaScript al formato TypeScript. Navegue a su directorio de Usuarios local, que debe contener un nuevo directorio faust-headless-demo :

Dentro de faust-headless-demo , abra el directorio de páginas . Ahora puede cambiar el nombre del archivo _app.js a _app.tsx y reemplazar su contenido con lo siguiente:

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

A continuación, cambie el nombre de pages/index.js a pages/index.tsx . Su aplicación Next.js ahora está configurada correctamente para TypeScript.

Paso 3: cree un componente React reutilizable

En este punto, puede poner a prueba su proyecto mostrando algún contenido ficticio. En su directorio de páginas locales, cree un archivo posts.tsx :

En este archivo, vas a ingresar algo de texto. Si aparece el siguiente contenido en su navegador, sabrá que su aplicación Next.js está configurada correctamente:

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

En su navegador, vaya a "http://localhost:3000/posts". Ahora debería ver este contenido ficticio:

Una vez que haya verificado su configuración, el siguiente paso es crear un componente React básico. Eventualmente usará este componente para mostrar una lista de todas sus publicaciones de WordPress.

Es una buena práctica agregar todos sus componentes de React a un directorio dedicado. Con esto en mente, navegue hasta la raíz de su proyecto y cree una carpeta de componentes :

Dentro de este directorio, cree un archivo post.tsx . Un componente de React puede recibir datos del componente principal a través de accesorios de componente. En este ejemplo, pasará el título y el contenido de cada publicación al componente de publicación.

En TypeScript, puede lograr esto creando una interfaz para mapear los datos que desea pasar. Dentro de su archivo posts.tsx , agregue lo siguiente:

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

Ahora tiene un componente React reutilizable. El siguiente paso es usar este componente en su página de publicaciones.

Paso 4: mostrar una lista de publicaciones

Para comenzar, abra el archivo pages/posts.tsx . En este punto, simplemente proporcionará algunos datos falsos, que mostrará en un formato de lista:

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

Puede crear una lista de publicaciones recorriendo la matriz de publicaciones. Esto requiere que renderices un componente Publicar para cada elemento:

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

Guarde sus cambios y cierre este archivo. Luego, dirígete a "http://localhost:3000/posts":

Esta pestaña ahora debería mostrar una lista de publicaciones falsas. Una vez que haya conectado Faust.js al back-end de WordPress, utilizará este componente React para mostrar una lista de las publicaciones de la vida real de su sitio web.

Paso 5: configurar el marco Faust.js

Finalmente está listo para configurar el marco Faust.js. Para comenzar, instale las dependencias de producción y desarrollo ejecutando los siguientes comandos:

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

Luego navegue al directorio raíz de su proyecto. Dentro de esta carpeta, cree un nuevo archivo faust.config.js :

Utilizará este archivo para conectar Faust.js a su back-end de WordPress. Ahora puede ingresar el siguiente código:

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

Dentro de este directorio, también deberá crear un archivo .env.local . Esto contendrá todas sus variables de entorno:

Dentro de .env.local , agregue el siguiente código. Asegúrese de reemplazar su sitio con su propia URL:

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

También deberá reemplazar YOUR_PLUGIN_SECRET con el secreto sin cabeza de su sitio. Puede encontrar esta información navegando a Configuración> Sin cabeza en su panel de WordPress:

Faust.js utilizará este secreto sin cabeza para autenticar sus solicitudes a WordPress. Esto hace posible obtener una vista previa del contenido del borrador en su interfaz.

Paso 6: configure su cliente GraphQL para Faust.js

Faust.js usa GQty como su cliente GraphQL. Para configurar GQty, cree un archivo gqty.config.js en el directorio raíz de su proyecto:

Ahora puede abrir este archivo para editarlo. Dentro de gqty.config.js , copie y pegue lo siguiente:

 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;

El siguiente paso es crear un cliente GQty, que utilizará para consultar los datos de su sitio web. En la raíz de su proyecto, cree un nuevo directorio de clientes . Dentro de esta carpeta, cree un archivo index.ts que contenga el siguiente código:

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

Ahora puede guardar sus cambios y cerrar el archivo index.ts . Ahora que tiene todas las piezas en su lugar, está listo para generar el esquema de GraphQL.

Paso 7: Ejecute el script de generación

El siguiente paso es agregar un script de generación a su archivo package.json . Este script generará el esquema necesario basado en la estructura de su sitio de WordPress.

Para agregar este script, vaya a la carpeta raíz de su proyecto y abra el archivo package.json . Ahora puede agregar el script de generación al primer bloque de código:

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

Antes de ejecutar este script, deberá habilitar temporalmente la introspección pública para su sitio web. En el panel de control de WordPress, vaya a GraphQL > Configuración . Luego, desplácese hasta Habilitar introspección pública y seleccione la casilla de verificación que lo acompaña:

Haga clic en Guardar cambios . Ahora puede ejecutar el script de generación ingresando el siguiente comando en su Terminal:

 npm run generate

Este script creará un archivo client/schema.generated.ts . En este punto, puede deshabilitar la introspección pública dentro de su panel de control de WordPress.

Paso 8: Definir un Componente FaustProvider y Hook

Ahora, debe envolver su aplicación Next.js usando el componente <FaustProvider> integrado . Este componente de orden superior de React proporcionará a Faust.js el contexto que necesita para obtener y almacenar datos.

Para lograr esto, abra el archivo pages/_app.tsx de su proyecto. A continuación, puede reemplazar su contenido con lo siguiente:

 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;

Ahora está listo para consultar datos desde el back-end de WordPress. Usará el enlace usePosts , que proporciona una interfaz estándar que recupera una lista de publicaciones de la API de WordPress sin encabezado.

Abra el directorio pages/posts.tsx y elimine todo el código repetitivo de Lorem Lipsum . A continuación, puede implementar el enlace 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> ); }

El archivo de esquema que generó exporta un tipo de publicación. Esto significa que puede usar este tipo para definir los accesorios del componente Post. Para aceptar una prop de publicación, abra el archivo components/post.tsx y agregue lo siguiente:

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

Puede especificar si desea recibir el contenido renderizado o el contenido sin procesar. En el código anterior, está optando por contenido renderizado.

Paso 9: conecte Faust.js a su sitio web de WordPress

El paso final es crear un vínculo entre sus datos y el componente Publicar. Esto requiere que agregue una sola línea de código al archivo posts.tsx :

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

Después de realizar estos cambios, cargue "http://localhost:3000/posts" en su navegador. Ahora debería ver una lista de todas las publicaciones de su sitio web de WordPress:

Si sus publicaciones no aparecen, finalice el proceso en ejecución cerrando su Terminal. Luego abra una nueva ventana y use el comando de cambio de directorio para que la Terminal apunte a su proyecto Faust.js local (por ejemplo: cd /Users/username/faust-headless-demo ). A continuación, puede iniciar el servidor de desarrollo ( npm run dev ) e intentar actualizar la página "http://localhost:3000/posts".

Conclusión

Muchos desarrolladores de WordPress sin cabeza optan por usar un marco. Sin embargo, cuando llega el momento de obtener una vista previa de su contenido, muchos marcos lo obligan a iniciar sesión en un sitio externo o ver su página de vista previa dentro de un marco.

Faust.js se propone proporcionar una experiencia de vista previa consistente y sin problemas. Cuando configure este marco, podrá ver su contenido utilizando el flujo de trabajo familiar de WordPress. También obtendrá acceso a los conjuntos de herramientas familiares de React y Node.js.

¿Tiene alguna pregunta sobre el marco Faust.js? ¡Háganos saber en la sección de comentarios!