Como criar um site WordPress sem cabeça com Faust.js (em 9 etapas)

Se você precisa executar o WordPress sem cabeça, uma estrutura de qualidade é essencial. No entanto, mesmo com uma pequena ajuda de uma estrutura moderna, você ainda pode ter dificuldades para visualizar seu conteúdo de maneira eficaz.

É aí que entra o Faust.js. Essa nova estrutura aproveita o poder do Next.js e do React e combina isso com recursos convenientes de visualização de postagem. Com Faust.js, você pode visualizar seu conteúdo antes de clicar em Publicar , exatamente da mesma forma que em um site WordPress tradicional.

Neste artigo, vamos explorar por que você pode querer usar Faust.js para seu próximo projeto WordPress headless. Em seguida, mostraremos como configurar esse novo framework e construir um front-end simples. Vamos começar!

Por que você pode querer executar um site WordPress sem cabeça

O sistema de gerenciamento de conteúdo (CMS) típico consiste em um front-end e um back-end, e o WordPress não é exceção. No entanto, é possível executar o WordPress sem cabeça.

A 'cabeça' refere-se à camada de apresentação, enquanto o 'corpo' é onde o conteúdo é armazenado e criado. Ao remover o front-end (cabeça) do back-end (corpo), você pode executar o WordPress sem cabeça.

Com um projeto headless, você continuará usando o painel e as ferramentas familiares do WordPress. No entanto, você é livre para projetar seu próprio front-end, independente das restrições usuais do WordPress. Isso lhe dá controle total sobre como seu conteúdo é exibido.

Criar seu próprio front-end pode ser uma perspectiva empolgante, mas não é particularmente simples. Felizmente, existem ferramentas que podem realizar grande parte do trabalho pesado para você.

Muitos usuários de CMS headless optam por solicitar a ajuda de uma ferramenta como Frontity, a estrutura Gatsby ou o Next.js baseado em React. No entanto, tradicionalmente tem sido difícil visualizar postagens e páginas em um site sem cabeçalho, mesmo ao usar uma estrutura. É aí que entra o Faust.js:

Essa estrutura é construída sobre Next.js e React e se esforça para fornecer uma experiência de publicação consistente com o WordPress tradicional. Para conseguir isso, Faust.js oferece visualizações de conteúdo perfeitas.

Faust.js também usa um cliente GraphQL. Isso permite que você consulte a API WPGraphQL do WordPress sem precisar conhecer as consultas do GraphQL com antecedência.

Além disso, Faust.js fornece mecanismos integrados para autenticar seu back-end do WordPress. Isso facilita a criação de conteúdo fechado e sites de comércio eletrônico com seu CMS headless.

Como criar um site WordPress sem cabeça com Faust.js (em 9 etapas)

Agora que abordamos o que é Faust.js e alguns de seus principais benefícios, vamos ver como você pode começar a usar essa estrutura. Veja como criar um CMS headless com Faust.js, em nove etapas.

Etapa 1: prepare seu ambiente de desenvolvimento

Antes de começar, você precisará instalar o Node.js e o Node Package Manager (NPM). Você também precisará de uma instalação do WordPress, que pode ser hospedada localmente ou em um servidor web.

Você também usará alguns plugins do WordPress. Primeiro, o plugin WPGraphQL transformará o WordPress em uma API GraphQL, pronta para seu projeto consumir.

Você também precisará do WPE Headless. Este plugin fornece alguns recursos extras que ajudam a garantir que o WordPress funcione corretamente como um CMS headless. Você pode baixar a versão mais recente deste plug-in e enviá-lo para o painel do WordPress.

Para ajudar você a começar a usar a estrutura Faust.js, você usará o projeto inicial create-next-app. Isso gera um aplicativo Next.js inicializado com todas as configurações e arquivos necessários já implementados. Você pode usar isso como base para seu projeto Faust.js sem cabeça.

Você pode instalar o create-next-app usando a ferramenta npx, que é fornecida com o NPM. Em sua janela Terminal ou Prompt de Comando local, execute o seguinte:

 npx create-next-app faust-headless-demo

Isso criará um projeto de demonstração faust-headless no diretório de usuários locais do seu computador. Quando esse processo estiver concluído, o Terminal solicitará que você inicie seu aplicativo Next.js usando os seguintes comandos:

 cd faust-headless-demo npm run dev

Parabéns – você acabou de criar com sucesso um projeto Next.js! Para dar uma olhada neste aplicativo, vá para “http://localhost:3000” no seu navegador:

Agora você deve ver o site inicial do Next.js. Se você encontrar uma mensagem de erro, tente executar novamente o comando npm run dev , que pode resolver o problema.

Etapa 2: configurar o TypeScript

Faust.js usa TypeScript, que é um superconjunto tipado de JavaScript que adiciona verificação de tipo em tempo de compilação. Isso permite que você detecte erros em tempo de compilação, em vez de esperar até o tempo de execução. Para instalar o TypeScript, execute os seguintes comandos no seu Terminal:

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

Agora, você precisa gerar um arquivo tsconfig.json . Este arquivo especifica as opções do compilador necessárias para executar seu projeto:

 npx tsc --init

Depois de configurar o TypeScript, você precisará converter alguns arquivos JavaScript para o formato TypeScript. Navegue até o diretório Users local, que deve conter um novo diretório faust-headless-demo :

Dentro de faust-headless-demo , abra o diretório pages . Agora você pode renomear o arquivo _app.js para _app.tsx e substituir seu conteúdo pelo seguinte:

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

Em seguida, renomeie pages/index.js para pages/index.tsx . Seu aplicativo Next.js agora está configurado corretamente para TypeScript.

Etapa 3: criar um componente React reutilizável

Neste ponto, você pode testar seu projeto exibindo algum conteúdo fictício. No diretório de páginas locais, crie um arquivo posts.tsx :

Neste arquivo, você vai inserir algum texto. Se o conteúdo a seguir aparecer em seu navegador, você saberá que seu aplicativo Next.js está configurado corretamente:

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

No seu navegador, navegue até “http://localhost:3000/posts”. Agora você deve ver este conteúdo fictício:

Depois de verificar sua configuração, a próxima etapa é criar um componente React básico. Você eventualmente usará esse componente para exibir uma lista de todas as suas postagens do WordPress.

É uma prática recomendada adicionar todos os seus componentes React a um diretório dedicado. Com isso em mente, navegue até a raiz do seu projeto e crie uma pasta de componentes :

Dentro deste diretório, crie um arquivo post.tsx . Um componente React pode receber dados do componente pai por meio de props de componente. Neste exemplo, você passará o título e o conteúdo de cada postagem para o componente de postagem.

No TypeScript, você pode fazer isso criando uma interface para mapear os dados que deseja transmitir. Dentro do seu arquivo posts.tsx , adicione o seguinte:

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

Agora você tem um componente React reutilizável. O próximo passo é usar este componente em sua página de posts.

Etapa 4: exibir uma lista de postagens

Para começar, abra o arquivo pages/posts.tsx . Neste ponto, você simplesmente fornecerá alguns dados falsos, que serão exibidos em um 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>; }

Você pode criar uma lista de postagens percorrendo a matriz de postagens. Isso requer que você renderize um componente Post para cada item:

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

Salve suas alterações e feche este arquivo. Em seguida, vá para “http://localhost:3000/posts”:

Esta guia agora deve exibir uma lista de postagens falsas. Depois de conectar o Faust.js ao back-end do WordPress, você usará este componente React para exibir uma lista das postagens reais do seu site.

Etapa 5: configurar a estrutura Faust.js

Você está finalmente pronto para configurar a estrutura Faust.js. Para começar, instale as dependências de produção e desenvolvimento executando os seguintes comandos:

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

Em seguida, navegue até o diretório raiz do seu projeto. Dentro desta pasta, crie um novo arquivo faust.config.js :

Você usará este arquivo para conectar Faust.js ao seu back-end do WordPress. Agora você pode inserir o seguinte 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 desse diretório, você também precisará criar um arquivo .env.local . Isso conterá todas as suas variáveis ​​de ambiente:

Dentro de .env.local , adicione o código a seguir. Certifique-se de substituir your-site pelo seu próprio URL:

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

Você também precisará substituir YOUR_PLUGIN_SECRET pelo segredo headless do seu site. Você pode encontrar essas informações navegando até Configurações > Headless no painel do WordPress:

Faust.js usará esse segredo headless para autenticar suas solicitações no WordPress. Isso torna possível visualizar o conteúdo de rascunho em seu front-end.

Etapa 6: configurar seu cliente GraphQL para Faust.js

Faust.js usa GQty como seu cliente GraphQL. Para configurar o GQty, crie um arquivo gqty.config.js no diretório raiz do seu projeto:

Agora você pode abrir este arquivo para edição. Dentro de gqty.config.js , copie e cole o seguinte:

 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;

A próxima etapa é criar um cliente GQty, que você usará para consultar os dados do seu site. Na raiz do seu projeto, crie um novo diretório de cliente . Dentro desta pasta, crie um arquivo index.ts contendo o seguinte 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';

Agora você pode salvar suas alterações e fechar o arquivo index.ts . Agora que você tem todas as peças no lugar, está pronto para gerar o esquema GraphQL.

Etapa 7: execute o script de geração

A próxima etapa é adicionar um script de geração ao arquivo package.json . Este script irá gerar o esquema necessário com base na estrutura do seu site WordPress.

Para adicionar este script, navegue até a pasta raiz do seu projeto e abra o arquivo package.json . Agora você pode adicionar o script de geração ao primeiro bloco 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 executar este script, você precisará habilitar temporariamente a introspecção pública para seu site. No painel do WordPress, navegue até GraphQL > Configurações . Em seguida, role até Ativar introspecção pública e marque a caixa de seleção correspondente:

Clique em Salvar alterações . Agora você pode executar o script de geração digitando o seguinte comando em seu Terminal:

 npm run generate

Este script criará um arquivo client/schema.generated.ts . Neste ponto, você pode desabilitar a Introspecção Pública em seu painel do WordPress.

Etapa 8: definir um componente e gancho FaustProvider

Agora, você precisa encapsular seu aplicativo Next.js usando o componente <FaustProvider> integrado. Este componente de ordem superior do React fornecerá ao Faust.js o contexto necessário para buscar e armazenar dados em cache.

Para conseguir isso, abra o arquivo pages/_app.tsx do seu projeto. Você pode então substituir seu conteúdo pelo seguinte:

 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;

Agora você está pronto para consultar dados do back-end do WordPress. Você usará o gancho usePosts , que fornece uma interface padrão que recupera uma lista de postagens da API do WordPress headless.

Abra o diretório pages/posts.tsx e exclua todo o código clichê Lorem Lipsum . Você pode então implementar o gancho 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> ); }

O arquivo de esquema que você gerou exporta um tipo de postagem. Isso significa que você pode usar esse tipo para definir as props do componente Post. Para aceitar um prop Post, abra o arquivo components/post.tsx e adicione o seguinte:

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

Você pode especificar se deseja receber o conteúdo renderizado ou o conteúdo bruto. No código acima, você está optando pelo conteúdo renderizado.

Passo 9: Conecte Faust.js ao seu site WordPress

A etapa final é criar um link entre seus dados e o componente Post. Isso requer que você adicione uma única linha de código ao arquivo posts.tsx :

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

Depois de fazer essas alterações, carregue “http://localhost:3000/posts” em seu navegador. Agora você deve ver uma lista de todas as postagens do seu site WordPress:

Se suas postagens não aparecerem, encerre o processo em execução fechando seu Terminal. Em seguida, abra uma nova janela e use o comando change directory para que o Terminal aponte para seu projeto Faust.js local (por exemplo: cd /Users/username/faust-headless-demo ). Você pode então iniciar o servidor de desenvolvimento ( npm run dev ) e tentar atualizar a página “http://localhost:3000/posts”.

Conclusão

Muitos desenvolvedores sem cabeça do WordPress optam por usar um framework. No entanto, quando é hora de visualizar seu conteúdo, muitas estruturas forçam você a fazer login em um site externo ou visualizar sua página de visualização dentro de um quadro.

O Faust.js se propõe a fornecer uma experiência de visualização consistente e perfeita. Ao configurar essa estrutura, você poderá visualizar seu conteúdo usando o fluxo de trabalho familiar do WordPress. Você também terá acesso aos conhecidos conjuntos de ferramentas React e Node.js.

Você tem alguma dúvida sobre o framework Faust.js? Deixe-nos saber na seção de comentários abaixo!