Jak stworzyć bezgłową witrynę WordPress z Faust.js (w 9 krokach)

Jeśli potrzebujesz korzystać z WordPressa bez głowy, niezbędny jest framework wysokiej jakości. Jednak nawet przy niewielkiej pomocy nowoczesnego frameworka nadal możesz mieć trudności z efektywnym podglądem treści.

I tu właśnie pojawia się Faust.js. Ten nowy framework wykorzystuje moc Next.js i React oraz łączy to z wygodnymi funkcjami podglądu postów. Dzięki Faust.js możesz przeglądać swoje treści przed naciśnięciem Publikuj , dokładnie tak samo, jak w przypadku tradycyjnej witryny WordPress.

W tym artykule dowiemy się, dlaczego możesz chcieć użyć Faust.js w swoim następnym bezgłowym projekcie WordPress. Następnie pokażemy, jak skonfigurować ten nowy framework i zbudować prosty interfejs. Zacznijmy!

Dlaczego warto uruchomić bezgłową witrynę WordPress?

Typowy system zarządzania treścią (CMS) składa się z frontonu i zaplecza, a WordPress nie jest wyjątkiem. Jednak możliwe jest uruchomienie WordPressa bez głowy.

„Głowa” odnosi się do warstwy prezentacji, podczas gdy „ciało” to miejsce przechowywania i tworzenia treści. Usuwając przód (głowicę) z tyłu (korpus), możesz uruchomić WordPress bez głowy.

Dzięki projektowi bez głowy będziesz nadal korzystać ze znanego pulpitu nawigacyjnego i narzędzi WordPress. Możesz jednak zaprojektować własny interfejs, niezależnie od zwykłych ograniczeń WordPressa. Daje to pełną kontrolę nad sposobem wyświetlania treści.

Stworzenie własnego frontendu może być ekscytującą perspektywą, ale nie jest szczególnie proste. Na szczęście istnieją narzędzia, które mogą wykonać większość ciężkich zadań za Ciebie.

Wielu bezgłowych użytkowników CMS decyduje się na skorzystanie z pomocy takiego narzędzia, jak Frontity, framework Gatsby lub Next.js oparty na React. Jednak tradycyjnie trudno było wyświetlić podgląd postów i stron w witrynie bez nagłówków, nawet przy użyciu frameworka. W tym miejscu pojawia się Faust.js:

Ta struktura jest oparta na Next.js i React i ma na celu zapewnienie środowiska publikowania zgodnego z tradycyjnym WordPressem. Aby to osiągnąć, Faust.js oferuje płynne podglądy treści.

Faust.js używa również klienta GraphQL. Umożliwia to wysyłanie zapytań do API WordPress WPGraphQL bez konieczności wcześniejszej znajomości zapytań GraphQL.

Ponadto Faust.js zapewnia wbudowane mechanizmy uwierzytelniania Twojego zaplecza WordPress. Ułatwia to tworzenie bramkowanych treści i witryn eCommerce za pomocą bezgłowego CMS.

Jak stworzyć bezgłową witrynę WordPress z Faust.js (w 9 krokach)

Teraz, gdy omówiliśmy, czym jest Faust.js i niektóre z jego głównych zalet, zobaczmy, jak zacząć korzystać z tego frameworka. Oto jak stworzyć bezgłowy CMS za pomocą Faust.js, w dziewięciu krokach.

Krok 1: Przygotuj środowisko programistyczne

Zanim zaczniesz, musisz zainstalować Node.js i Node Package Manager (NPM). Będziesz także potrzebować instalacji WordPress, którą możesz hostować lokalnie lub na serwerze WWW.

Będziesz także korzystać z kilku wtyczek WordPress. Po pierwsze, wtyczka WPGraphQL przekształci WordPress w interfejs API GraphQL, gotowy do wykorzystania przez Twój projekt.

Będziesz także potrzebował WPE Headless. Ta wtyczka zapewnia dodatkowe funkcje, które pomagają zapewnić prawidłowe działanie WordPressa jako bezgłowego CMS. Możesz pobrać najnowszą wersję tej wtyczki, a następnie przesłać ją do pulpitu WordPress.

Aby pomóc Ci rozpocząć pracę z frameworkiem Faust.js, będziesz korzystać z projektu startowego create-next-app. Spowoduje to wygenerowanie załadowanej aplikacji Next.js ze wszystkimi niezbędnymi konfiguracjami i plikami już na miejscu. Następnie możesz użyć tego jako podstawy dla swojego bezgłowego projektu Faust.js.

Możesz zainstalować create-next-app za pomocą narzędzia npx, które jest dołączone do NPM. W lokalnym oknie terminala lub wiersza polecenia uruchom następujące polecenie:

 npx create-next-app faust-headless-demo

Spowoduje to utworzenie projektu faust-headless-demo w lokalnym katalogu użytkowników komputera. Po zakończeniu tego procesu Terminal poprosi o uruchomienie aplikacji Next.js za pomocą następujących poleceń:

 cd faust-headless-demo npm run dev

Gratulacje – właśnie udało Ci się stworzyć projekt Next.js! Aby rzucić okiem na tę aplikację, przejdź do „http://localhost:3000” w swojej przeglądarce:

Powinieneś teraz zobaczyć stronę startową Next.js. Jeśli pojawi się komunikat o błędzie, spróbuj ponownie uruchomić polecenie npm run dev , co może rozwiązać problem.

Krok 2: Skonfiguruj TypeScript

Faust.js używa TypeScript, który jest typowanym nadzbiorem JavaScript, który dodaje sprawdzanie typu w czasie kompilacji. Dzięki temu można wyłapać błędy w czasie kompilacji, zamiast czekać do czasu wykonania. Aby zainstalować TypeScript, uruchom następujące polecenia w terminalu:

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

Teraz musisz wygenerować plik tsconfig.json . Ten plik określa opcje kompilatora, które są wymagane do uruchomienia projektu:

 npx tsc --init

Po skonfigurowaniu TypeScript musisz przekonwertować kilka plików JavaScript na format TypeScript. Przejdź do lokalnego katalogu Użytkownicy , który powinien zawierać nowy katalog faust-headless-demo :

Wewnątrz faust-headless-demo otwórz katalog stron . Możesz teraz zmienić nazwę pliku _app.js na _app.tsx i zastąpić jego zawartość następującą:

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

Następnie zmień nazwy pages/index.js na pages/index.tsx . Twoja aplikacja Next.js jest teraz poprawnie skonfigurowana pod kątem TypeScript.

Krok 3: Utwórz komponent React wielokrotnego użytku

W tym momencie możesz przetestować swój projekt, wyświetlając fikcyjną zawartość. W katalogu stron lokalnych utwórz plik posts.tsx :

W tym pliku zamierzasz wpisać jakiś tekst. Jeśli w Twojej przeglądarce pojawi się następująca zawartość, będziesz wiedział, że Twoja aplikacja Next.js jest poprawnie skonfigurowana:

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

W przeglądarce przejdź do „http://localhost:3000/posts”. Powinieneś teraz zobaczyć tę fikcyjną zawartość:

Po zweryfikowaniu konfiguracji następnym krokiem jest utworzenie podstawowego komponentu React. W końcu użyjesz tego komponentu, aby wyświetlić listę wszystkich swoich postów WordPress.

Najlepszą praktyką jest dodanie wszystkich komponentów React do dedykowanego katalogu. Mając to na uwadze, przejdź do katalogu głównego projektu i utwórz folder komponentów :

Wewnątrz tego katalogu utwórz plik post.tsx . Komponent React może odbierać dane z komponentu nadrzędnego za pośrednictwem właściwości komponentu. W tym przykładzie przekażesz tytuł i treść każdego posta do komponentu posta.

W TypeScript możesz to osiągnąć, tworząc interfejs do mapowania danych, które chcesz przekazać. W pliku posts.tsx dodaj następujące informacje:

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

Masz teraz komponent React wielokrotnego użytku. Następnym krokiem jest użycie tego komponentu na stronie postów.

Krok 4: Wyświetl listę postów

Aby rozpocząć, otwórz plik pages/posts.tsx . W tym momencie po prostu podasz fałszywe dane, które wyświetlisz w formie listy:

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

Możesz utworzyć listę postów, przeglądając tablicę posts. Wymaga to renderowania komponentu Post dla każdego elementu:

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

Zapisz zmiany i zamknij ten plik. Następnie przejdź do „http://localhost:3000/posts”:

Ta zakładka powinna teraz wyświetlać listę fałszywych postów. Po podłączeniu Faust.js do zaplecza WordPressa użyjesz tego komponentu React, aby wyświetlić listę prawdziwych postów w Twojej witrynie.

Krok 5: Skonfiguruj Faust.js Framework

W końcu jesteś gotowy do skonfigurowania frameworka Faust.js. Aby rozpocząć, zainstaluj zależności produkcyjne i programistyczne, uruchamiając następujące polecenia:

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

Następnie przejdź do katalogu głównego projektu. Wewnątrz tego folderu utwórz nowy plik faust.config.js :

Użyjesz tego pliku, aby połączyć Faust.js z zapleczem WordPressa. Możesz teraz wpisać następujący kod:

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

Wewnątrz tego katalogu musisz także utworzyć plik .env.local . To będzie przechowywać wszystkie zmienne środowiskowe:

Wewnątrz .env.local dodaj następujący kod. Pamiętaj, aby zastąpić swoją witrynę własnym adresem URL:

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

Musisz także zastąpić YOUR_PLUGIN_SECRET bezgłowym sekretem swojej witryny. Możesz znaleźć te informacje, przechodząc do Ustawienia> Bezgłowy na pulpicie WordPress:

Faust.js użyje tego bezgłowego sekretu do uwierzytelniania swoich żądań w WordPress. Umożliwia to podgląd zawartości roboczej w interfejsie użytkownika.

Krok 6: Skonfiguruj swojego klienta GraphQL dla Faust.js

Faust.js używa GQty jako swojego klienta GraphQL. Aby skonfigurować GQty, utwórz plik gqty.config.js w katalogu głównym projektu:

Możesz teraz otworzyć ten plik do edycji. Wewnątrz gqty.config.js skopiuj i wklej:

 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;

Następnym krokiem jest utworzenie klienta GQty, którego będziesz używać do wysyłania zapytań o dane Twojej witryny. W katalogu głównym projektu utwórz nowy katalog klienta . Wewnątrz tego folderu utwórz plik index.ts zawierający następujący kod:

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

Możesz teraz zapisać zmiany i zamknąć plik index.ts . Teraz, gdy masz już wszystkie elementy, jesteś gotowy do wygenerowania schematu GraphQL.

Krok 7: Uruchom skrypt generowania

Następnym krokiem jest dodanie skryptu generowania do pliku package.json . Ten skrypt wygeneruje niezbędny schemat na podstawie struktury Twojej witryny WordPress.

Aby dodać ten skrypt, przejdź do folderu głównego projektu i otwórz plik package.json . Możesz teraz dodać skrypt generowania do pierwszego bloku kodu:

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

Przed uruchomieniem tego skryptu musisz tymczasowo włączyć publiczną introspekcję dla swojej witryny. W panelu WordPress przejdź do GraphQL > Ustawienia . Następnie przewiń do opcji Włącz introspekcję publiczną i zaznacz towarzyszące jej pole wyboru:

Kliknij Zapisz zmiany . Możesz teraz uruchomić skrypt generowania , wprowadzając do terminala następujące polecenie:

 npm run generate

Ten skrypt utworzy plik client/schema.generated.ts . W tym momencie możesz wyłączyć publiczną introspekcję na swoim pulpicie WordPress.

Krok 8: Zdefiniuj komponent FaustProvider i hook

Teraz musisz zawinąć swoją aplikację Next.js za pomocą wbudowanego komponentu <FaustProvider> . Ten komponent React wyższego rzędu zapewni Faust.js kontekst potrzebny do pobierania i buforowania danych.

Aby to osiągnąć, otwórz plik pages/_app.tsx projektu. Następnie możesz zastąpić jego zawartość następującą:

 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;

Jesteś teraz gotowy do wysyłania zapytań o dane z zaplecza WordPress. Będziesz używać haka usePosts , który zapewnia standardowy interfejs, który pobiera listę postów z bezgłowego API WordPress.

Otwórz katalog pages/posts.tsx i usuń cały kod szablonu Lorem Lipsum . Następnie możesz zaimplementować hak 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> ); }

Wygenerowany plik schematu eksportuje typ Post. Oznacza to, że możesz użyć tego typu do zdefiniowania właściwości komponentu Post. Aby zaakceptować prop prop, otwórz plik components/post.tsx i dodaj następujące elementy:

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

Możesz określić, czy chcesz otrzymywać treść renderowaną, czy surową. W powyższym kodzie decydujesz się na renderowanie treści.

Krok 9: Połącz Faust.js ze swoją witryną WordPress

Ostatnim krokiem jest utworzenie łącza między Twoimi danymi a komponentem Post. Wymaga to dodania jednej linii kodu do pliku posts.tsx :

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

Po wprowadzeniu tych zmian załaduj „http://localhost:3000/posts” w przeglądarce. Powinieneś teraz zobaczyć listę wszystkich postów z Twojej witryny WordPress:

Jeśli Twoje posty się nie pojawiają, zakończ działający proces, zamykając terminal. Następnie otwórz nowe okno i użyj polecenia zmiany katalogu, aby Terminal wskazywał lokalny projekt Faust.js (na przykład: cd /Users/username/faust-headless-demo ). Następnie możesz uruchomić serwer deweloperski ( npm run dev ) i spróbować odświeżyć stronę „http://localhost:3000/posts”.

Wniosek

Wielu bezgłowych programistów WordPressa decyduje się na użycie frameworka. Jednak gdy nadchodzi czas na podgląd zawartości, wiele struktur zmusza do zalogowania się do zewnętrznej witryny lub wyświetlenia strony podglądu w ramce.

Faust.js ma na celu zapewnienie spójnego, bezproblemowego podglądu. Po skonfigurowaniu tej struktury będziesz mógł przeglądać swoje treści przy użyciu znanego przepływu pracy WordPress. Otrzymasz również dostęp do znanych zestawów narzędzi React i Node.js.

Masz pytania dotyczące frameworka Faust.js? Daj nam znać w sekcji komentarzy poniżej!