Как создать безголовый сайт WordPress с помощью Faust.js (за 9 шагов)

Если вам нужно запустить WordPress без головы, вам необходим качественный фреймворк. Тем не менее, даже с небольшой помощью современной платформы, вы все еще можете испытывать трудности с эффективным предварительным просмотром своего контента.

Вот где на помощь приходит Faust.js. Этот новый фреймворк использует возможности Next.js и React и сочетает их с удобными функциями предварительного просмотра сообщений. С Faust.js вы можете просмотреть свой контент, прежде чем нажать « Опубликовать », точно так же, как и на традиционном веб-сайте WordPress.

В этой статье мы рассмотрим, почему вы можете захотеть использовать Faust.js для своего следующего безголового проекта WordPress. Затем мы покажем вам, как настроить этот новый фреймворк и создать простой внешний интерфейс. Давайте начнем!

Почему вы можете захотеть запустить безголовый сайт WordPress

Типичная система управления контентом (CMS) состоит из внешнего интерфейса и внутреннего интерфейса, и WordPress не является исключением. Тем не менее, можно запустить WordPress без головы.

«Заголовок» относится к уровню представления, а «тело» — это место, где хранится и создается контент. Удалив переднюю часть (голову) из задней части (тела), вы можете запустить WordPress без головы.

С безголовым проектом вы продолжите использовать знакомую панель инструментов и инструменты WordPress. Однако вы можете создать свой собственный интерфейс, не зависящий от обычных ограничений WordPress. Это дает вам полный контроль над тем, как отображается ваш контент.

Создание собственного внешнего интерфейса может быть захватывающей перспективой, но это не особенно просто. К счастью, есть инструменты, которые могут выполнить большую часть тяжелой работы за вас.

Многие пользователи безголовых CMS предпочитают заручиться помощью таких инструментов, как Frontity, фреймворк Gatsby или Next.js на основе React. Однако традиционно было сложно предварительно просмотреть записи и страницы на безголовом сайте, даже при использовании фреймворка. Вот тут-то и появляется Faust.js:

Этот фреймворк построен на основе Next.js и React и стремится предоставить возможность публикации, совместимую с традиционным WordPress. Для этого Faust.js предлагает плавный предварительный просмотр контента.

Faust.js также использует клиент GraphQL. Это позволяет вам запрашивать WordPress WPGraphQL API без необходимости заранее знать запросы GraphQL.

Кроме того, Faust.js предоставляет встроенные механизмы для аутентификации серверной части WordPress. Это упрощает создание закрытого контента и сайтов электронной коммерции с помощью безголовой CMS.

Как создать безголовый сайт WordPress с помощью Faust.js (за 9 шагов)

Теперь, когда мы рассмотрели, что такое Faust.js и некоторые из его основных преимуществ, давайте посмотрим, как вы можете начать работу с этой инфраструктурой. Вот как создать безголовую CMS с помощью Faust.js за девять шагов.

Шаг 1. Подготовьте среду разработки

Прежде чем начать, вам необходимо установить Node.js и диспетчер пакетов Node (NPM). Вам также понадобится установка WordPress, которую вы можете разместить локально или на веб-сервере.

Вы также будете использовать несколько плагинов WordPress. Во-первых, плагин WPGraphQL превратит WordPress в GraphQL API, готовый к использованию в вашем проекте.

Вам также понадобится WPE Headless. Этот плагин предоставляет некоторые дополнительные функции, которые помогают обеспечить правильную работу WordPress в качестве безголовой CMS. Вы можете загрузить последнюю версию этого плагина, а затем загрузить ее на панель инструментов WordPress.

Чтобы помочь вам начать работу с платформой Faust.js, вы будете использовать начальный проект create-next-app. При этом будет создано загруженное приложение Next.js со всеми необходимыми конфигурациями и файлами. Затем вы можете использовать это как основу для своего безголового проекта Faust.js.

Вы можете установить приложение create-next-app с помощью инструмента npx, который входит в состав NPM. В локальном окне терминала или командной строки выполните следующее:

 npx create-next-app faust-headless-demo

Это создаст демонстрационный проект faust-headless-demo в локальном каталоге пользователей вашего компьютера. После завершения этого процесса Терминал предложит вам запустить приложение Next.js, используя следующие команды:

 cd faust-headless-demo npm run dev

Поздравляем — вы только что успешно создали проект Next.js! Чтобы взглянуть на это приложение, перейдите по адресу «http://localhost:3000» в браузере:

Теперь вы должны увидеть стартовый сайт Next.js. Если вы столкнулись с сообщением об ошибке, попробуйте повторно запустить команду npm run dev , что может решить проблему.

Шаг 2: Настройте TypeScript

Faust.js использует TypeScript, который является типизированным надмножеством JavaScript, добавляющим проверку типов во время компиляции. Это позволяет выявлять ошибки во время компиляции, а не ждать выполнения. Чтобы установить TypeScript, выполните следующие команды в терминале:

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

Теперь вам нужно сгенерировать файл tsconfig.json . В этом файле указаны параметры компилятора, необходимые для запуска вашего проекта:

 npx tsc --init

После настройки TypeScript вам потребуется преобразовать несколько файлов JavaScript в формат TypeScript. Перейдите в локальный каталог Users , который должен содержать новый каталог faust-headless-demo :

Внутри faust-headless-demo откройте каталог pages . Теперь вы можете переименовать файл _app.js в _app.tsx и заменить его содержимое следующим:

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

Затем переименуйте pages/index.js в pages/index.tsx . Ваше приложение Next.js теперь правильно настроено для TypeScript.

Шаг 3: Создайте многоразовый компонент React

На этом этапе вы можете протестировать свой проект, отобразив некоторый фиктивный контент. В локальном каталоге страниц создайте файл posts.tsx :

В этом файле вы собираетесь ввести текст. Если в вашем браузере появится следующее содержимое, вы будете знать, что ваше приложение Next.js настроено правильно:

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

В браузере перейдите по адресу «http://localhost:3000/posts». Теперь вы должны увидеть этот фиктивный контент:

После того, как вы проверили свои настройки, следующим шагом будет создание базового компонента React. В конечном итоге вы будете использовать этот компонент для отображения списка всех ваших сообщений WordPress.

Рекомендуется добавлять все ваши компоненты React в отдельный каталог. Имея это в виду, перейдите в корень вашего проекта и создайте папку компонентов :

Внутри этого каталога создайте файл post.tsx . Компонент React может получать данные от родительского компонента через свойства компонента. В этом примере вы собираетесь передать заголовок и содержимое каждого сообщения компоненту сообщения.

В TypeScript вы можете добиться этого, создав интерфейс для отображения данных, которые вы хотите передать. В файл posts.tsx добавьте следующее:

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

Теперь у вас есть многоразовый компонент React. Следующим шагом будет использование этого компонента на странице сообщений.

Шаг 4: Отобразите список сообщений

Для начала откройте файл pages/posts.tsx . На этом этапе вы просто предоставите некоторые поддельные данные, которые вы отобразите в формате списка:

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

Вы можете создать список сообщений, перебирая массив сообщений. Это требует, чтобы вы визуализировали компонент Post для каждого элемента:

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

Сохраните изменения и закройте этот файл. Затем перейдите на «http://localhost:3000/posts»:

На этой вкладке теперь должен отображаться список поддельных сообщений. После того, как вы подключили Faust.js к серверной части WordPress, вы будете использовать этот компонент React для отображения списка реальных сообщений вашего веб-сайта.

Шаг 5. Настройте платформу Faust.js.

Наконец-то вы готовы настроить фреймворк Faust.js. Для начала установите зависимости для производства и разработки, выполнив следующие команды:

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

Затем перейдите в корневой каталог вашего проекта. Внутри этой папки создайте новый файл faust.config.js :

Вы будете использовать этот файл для подключения Faust.js к серверной части WordPress. Теперь вы можете ввести следующий код:

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

Внутри этого каталога вам также необходимо создать файл .env.local . Это будет содержать все ваши переменные среды:

Внутри .env.local добавьте следующий код. Не забудьте заменить your-site на собственный URL:

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

Вам также нужно будет заменить YOUR_PLUGIN_SECRET безголовым секретом вашего сайта. Вы можете найти эту информацию, перейдя в « Настройки»> «Без головы» на панели инструментов WordPress:

Faust.js будет использовать этот безголовый секрет для аутентификации своих запросов к WordPress. Это позволяет предварительно просмотреть черновик содержимого на вашем внешнем интерфейсе.

Шаг 6. Настройте клиент GraphQL для Faust.js

Faust.js использует GQty в качестве клиента GraphQL. Чтобы настроить GQty, создайте файл gqty.config.js в корневом каталоге вашего проекта:

Теперь вы можете открыть этот файл для редактирования. Внутри gqty.config.js скопируйте и вставьте следующее:

 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;

Следующим шагом будет создание клиента GQty, который вы будете использовать для запроса данных вашего веб-сайта. В корне вашего проекта создайте новый каталог клиента . Внутри этой папки создайте файл index.ts , содержащий следующий код:

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

Теперь вы можете сохранить изменения и закрыть файл index.ts . Теперь, когда у вас есть все необходимое, вы готовы создать схему GraphQL.

Шаг 7: Запустите скрипт генерации

Следующим шагом будет добавление скрипта генерации в ваш файл package.json . Этот скрипт сгенерирует необходимую схему на основе структуры вашего сайта WordPress.

Чтобы добавить этот скрипт, перейдите в корневую папку вашего проекта и откройте файл package.json . Теперь вы можете добавить скрипт генерации в первый блок кода:

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

Перед запуском этого скрипта вам необходимо временно включить публичный самоанализ для вашего веб-сайта. В панели управления WordPress перейдите в GraphQL > Settings . Затем прокрутите до пункта «Включить публичный самоанализ» и установите соответствующий флажок:

Нажмите «Сохранить изменения ». Теперь вы можете запустить скрипт генерации , введя следующую команду в терминал:

 npm run generate

Этот скрипт создаст файл client/schema.generated.ts . На этом этапе вы можете отключить Public Introspection на панели управления WordPress.

Шаг 8: Определите компонент FaustProvider и хук

Теперь вам нужно обернуть приложение Next.js с помощью встроенного компонента <FaustProvider> . Этот компонент высшего порядка React предоставит Faust.js контекст, необходимый для извлечения и кэширования данных.

Для этого откройте файл pages/_app.tsx вашего проекта. Затем вы можете заменить его содержимое следующим:

 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;

Теперь вы готовы запрашивать данные из серверной части WordPress. Вы будете использовать хук usePosts , который предоставляет стандартный интерфейс, который извлекает список сообщений из безголового API WordPress.

Откройте каталог pages/posts.tsx и удалите весь шаблонный код Lorem Lipsum . Затем вы можете реализовать хук 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> ); }

Сгенерированный файл схемы экспортирует тип Post. Это означает, что вы можете использовать этот тип для определения свойств компонента Post. Чтобы принять реквизит Post, откройте файл component/post.tsx и добавьте следующее:

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

Вы можете указать, хотите ли вы получать визуализированный контент или необработанный контент. В приведенном выше коде вы выбираете отображаемый контент.

Шаг 9: Подключите Faust.js к вашему сайту WordPress

Последний шаг — создание связи между вашими данными и компонентом Post. Для этого вам нужно добавить одну строку кода в файл posts.tsx :

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

После внесения этих изменений загрузите в браузере «http://localhost:3000/posts». Теперь вы должны увидеть список всех сообщений с вашего сайта WordPress:

Если ваши сообщения не отображаются, прервите запущенный процесс, закрыв Терминал. Затем откройте новое окно и используйте команду изменения каталога, чтобы Терминал указывал на ваш локальный проект Faust.js (например: cd /Users/username/faust-headless-demo ). Затем вы можете запустить сервер разработки ( npm run dev ) и попробовать обновить страницу «http://localhost:3000/posts».

Вывод

Многие безголовые разработчики WordPress предпочитают использовать фреймворк. Однако, когда пришло время просмотреть ваш контент, многие фреймворки заставляют вас заходить на внешний сайт или просматривать страницу предварительного просмотра внутри фрейма.

Faust.js предназначен для обеспечения последовательного и удобного предварительного просмотра. Когда вы настроите эту платформу, вы сможете просматривать свой контент, используя знакомый рабочий процесс WordPress. Вы также получите доступ к знакомым наборам инструментов React и Node.js.

У вас есть вопросы о фреймворке Faust.js? Дайте нам знать в комментариях ниже!