Cara Membuat Situs WordPress Tanpa Kepala Dengan Faust.js (Dalam 9 Langkah)

Jika Anda perlu menjalankan WordPress tanpa kepala, kerangka kerja berkualitas harus dimiliki. Namun, bahkan dengan sedikit bantuan dari kerangka kerja modern, Anda mungkin masih kesulitan untuk melihat pratinjau konten Anda secara efektif.

Di situlah Faust.js masuk. Kerangka kerja baru ini memanfaatkan kekuatan Next.js dan React, dan menggabungkannya dengan fitur pratinjau posting yang nyaman. Dengan Faust.js, Anda dapat melihat konten Anda sebelum menekan Publish , sama persis dengan situs web WordPress tradisional.

Dalam artikel ini, kami akan mengeksplorasi mengapa Anda mungkin ingin menggunakan Faust.js untuk proyek WordPress headless Anda berikutnya. Kemudian kami akan menunjukkan cara menyiapkan kerangka kerja baru ini dan membangun ujung depan yang sederhana. Mari kita mulai!

Mengapa Anda Mungkin Ingin Menjalankan Situs WordPress Tanpa Kepala

Sistem Manajemen Konten (CMS) tipikal terdiri dari ujung depan dan ujung belakang, dan WordPress tidak terkecuali. Namun, dimungkinkan untuk menjalankan WordPress tanpa kepala.

'Kepala' mengacu pada lapisan presentasi, sedangkan 'tubuh' adalah tempat konten disimpan dan ditulis. Dengan menghapus ujung depan (kepala) dari ujung belakang (tubuh), Anda dapat menjalankan WordPress tanpa kepala.

Dengan proyek tanpa kepala, Anda akan terus menggunakan dasbor dan alat WordPress yang sudah dikenal. Namun, Anda bebas mendesain front end Anda sendiri, terlepas dari batasan WordPress yang biasa. Ini memberi Anda kendali penuh atas bagaimana konten Anda ditampilkan.

Membuat front end Anda sendiri mungkin merupakan prospek yang menarik, tetapi tidak secara langsung. Untungnya, ada alat yang dapat melakukan banyak pekerjaan berat untuk Anda.

Banyak pengguna CMS tanpa kepala memilih untuk meminta bantuan alat seperti Frontity, kerangka kerja Gatsby, atau Next.js berbasis React. Namun, secara tradisional sulit untuk mempratinjau posting dan halaman di situs tanpa kepala, bahkan saat menggunakan kerangka kerja. Di situlah Faust.js masuk:

Kerangka kerja ini dibangun di atas Next.js dan React, dan berusaha untuk memberikan pengalaman penerbitan yang konsisten dengan WordPress tradisional. Untuk mencapai ini, Faust.js menawarkan pratinjau konten yang mulus.

Faust.js juga menggunakan klien GraphQL. Ini memungkinkan Anda untuk mengkueri WordPress WPGraphQL API tanpa harus mengetahui kueri GraphQL sebelumnya.

Selain itu, Faust.js menyediakan mekanisme bawaan untuk mengautentikasi bagian belakang WordPress Anda. Ini memudahkan untuk membangun konten yang terjaga keamanannya dan situs eCommerce dengan CMS tanpa kepala Anda.

Cara Membuat Situs WordPress Tanpa Kepala Dengan Faust.js (Dalam 9 Langkah)

Sekarang kita telah membahas apa itu Faust.js dan beberapa manfaat utamanya, mari kita lihat bagaimana Anda dapat memulai dengan kerangka kerja ini. Berikut cara membuat CMS headless dengan Faust.js, dalam sembilan langkah.

Langkah 1: Siapkan Lingkungan Pengembangan Anda

Sebelum memulai, Anda harus menginstal Node.js dan Node Package Manager (NPM). Anda juga memerlukan instalasi WordPress, yang dapat Anda host secara lokal atau di server web.

Anda juga akan menggunakan beberapa plugin WordPress. Pertama, plugin WPGraphQL akan mengubah WordPress menjadi GraphQL API, siap untuk digunakan oleh proyek Anda.

Anda juga membutuhkan WPE Headless. Plugin ini menyediakan beberapa fitur tambahan yang membantu memastikan WordPress berfungsi dengan benar sebagai CMS tanpa kepala. Anda dapat mengunduh versi terbaru dari plugin ini, lalu mengunggahnya ke dashboard WordPress Anda.

Untuk membantu Anda memulai framework Faust.js, Anda akan menggunakan project starter create-next-app. Ini menghasilkan aplikasi Next.js bootstrap dengan semua konfigurasi dan file yang diperlukan sudah ada. Anda kemudian dapat menggunakan ini sebagai dasar untuk proyek Faust.js tanpa kepala Anda.

Anda dapat menginstal create-next-app menggunakan alat npx, yang dibundel dengan NPM. Di jendela Terminal atau Command Prompt lokal Anda, jalankan yang berikut ini:

 npx create-next-app faust-headless-demo

Ini akan membuat proyek demo faust-headless di direktori pengguna lokal komputer Anda. Setelah proses ini selesai, Terminal akan meminta Anda untuk memulai aplikasi Next.js menggunakan perintah berikut:

 cd faust-headless-demo npm run dev

Selamat – Anda baru saja berhasil membuat proyek Next.js! Untuk melihat aplikasi ini, buka “http://localhost:3000” di browser Anda:

Anda sekarang akan melihat situs starter Next.js. Jika Anda menemukan pesan kesalahan, coba jalankan kembali perintah npm run dev , yang dapat menyelesaikan masalah.

Langkah 2: Siapkan TypeScript

Faust.js menggunakan TypeScript, yang merupakan superset yang diketik dari JavaScript yang menambahkan pemeriksaan tipe waktu kompilasi. Ini memungkinkan Anda untuk menangkap kesalahan pada waktu kompilasi, daripada menunggu sampai runtime. Untuk menginstal TypeScript, jalankan perintah berikut di Terminal Anda:

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

Sekarang, Anda perlu membuat file tsconfig.json . File ini menentukan opsi kompiler yang diperlukan untuk menjalankan proyek Anda:

 npx tsc --init

Setelah Anda menyiapkan TypeScript, Anda harus mengonversi beberapa file JavaScript ke format TypeScript. Navigasikan ke direktori Pengguna lokal Anda, yang seharusnya berisi direktori demo faust-headless baru:

Di dalam faust-headless-demo , buka direktori pages . Anda sekarang dapat mengganti nama file _app.js menjadi _app.tsx , dan mengganti isinya dengan yang berikut:

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

Selanjutnya, ganti nama pages/index.js menjadi pages/index.tsx . Aplikasi Next.js Anda sekarang dikonfigurasi dengan benar untuk TypeScript.

Langkah 3: Buat Komponen React yang Dapat Digunakan Kembali

Pada titik ini, Anda dapat menguji proyek Anda dengan menampilkan beberapa konten tiruan. Di direktori halaman lokal Anda, buat file posts.tsx :

Dalam file ini, Anda akan memasukkan beberapa teks. Jika konten berikut muncul di browser Anda, Anda akan tahu bahwa aplikasi Next.js Anda dikonfigurasi dengan benar:

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

Di browser Anda, navigasikan ke "http://localhost:3000/posts". Anda sekarang akan melihat konten dummy ini:

Setelah Anda memverifikasi pengaturan Anda, langkah selanjutnya adalah membuat komponen React dasar. Anda akhirnya akan menggunakan komponen ini untuk menampilkan daftar semua posting WordPress Anda.

Ini adalah praktik terbaik untuk menambahkan semua komponen Bereaksi Anda ke direktori khusus. Dengan mengingat hal ini, navigasikan ke root proyek Anda dan buat folder komponen :

Di dalam direktori ini, buat file post.tsx . Komponen React dapat menerima data dari komponen induk melalui props komponen. Dalam contoh ini, Anda akan meneruskan setiap judul dan konten posting ke komponen posting.

Di TypeScript, Anda dapat mencapai ini dengan membuat antarmuka untuk memetakan data yang ingin Anda sampaikan. Di dalam file posts.tsx Anda, tambahkan yang berikut ini:

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

Anda sekarang memiliki komponen React yang dapat digunakan kembali. Langkah selanjutnya adalah menggunakan komponen ini di halaman posting Anda.

Langkah 4: Menampilkan Daftar Posting

Untuk memulai, buka file pages/posts.tsx . Pada titik ini, Anda hanya akan memberikan beberapa data palsu, yang akan Anda tampilkan dalam format daftar:

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

Anda dapat membuat daftar posting dengan mengulang array posting. Ini mengharuskan Anda untuk merender komponen Post untuk setiap 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> ); }

Simpan perubahan Anda, dan tutup file ini. Kemudian, buka "http://localhost:3000/posts":

Tab ini sekarang akan menampilkan daftar posting palsu. Setelah Anda menghubungkan Faust.js ke back end WordPress, Anda akan menggunakan komponen React ini untuk menampilkan daftar posting kehidupan nyata situs web Anda.

Langkah 5: Konfigurasikan Kerangka Faust.js

Anda akhirnya siap untuk menyiapkan kerangka kerja Faust.js. Untuk memulai, instal dependensi produksi dan pengembangan dengan menjalankan perintah berikut:

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

Kemudian navigasikan ke direktori root proyek Anda. Di dalam folder ini, buat file faust.config.js baru:

Anda akan menggunakan file ini untuk menghubungkan Faust.js ke back end WordPress Anda. Anda sekarang dapat memasukkan kode berikut:

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

Di dalam direktori ini, Anda juga perlu membuat file .env.local . Ini akan menampung semua variabel lingkungan Anda:

Di dalam .env.local , tambahkan kode berikut. Pastikan untuk mengganti situs Anda dengan URL Anda sendiri:

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

Anda juga harus mengganti YOUR_PLUGIN_SECRET dengan rahasia tanpa kepala situs Anda. Anda dapat menemukan informasi ini dengan menavigasi ke Pengaturan> Tanpa Kepala di dasbor WordPress Anda:

Faust.js akan menggunakan rahasia tanpa kepala ini untuk mengautentikasi permintaannya ke WordPress. Ini memungkinkan untuk melihat pratinjau konten draf di ujung depan Anda.

Langkah 6: Konfigurasikan Klien GraphQL Anda untuk Faust.js

Faust.js menggunakan GQty sebagai klien GraphQL-nya. Untuk mengonfigurasi GQty, buat file gqty.config.js di direktori root proyek Anda:

Anda sekarang dapat membuka file ini untuk diedit. Di dalam gqty.config.js , salin dan tempel berikut ini:

 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;

Langkah selanjutnya adalah membuat klien GQty, yang akan Anda gunakan untuk mengkueri data situs web Anda. Di root proyek Anda, buat direktori klien baru. Di dalam folder ini, buat file index.ts yang berisi kode berikut:

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

Anda sekarang dapat menyimpan perubahan Anda, dan menutup file index.ts . Sekarang setelah Anda memiliki semua bagian, Anda siap untuk membuat skema GraphQL.

Langkah 7: Jalankan Script Hasilkan

Langkah selanjutnya adalah menambahkan skrip generate ke file package.json Anda. Skrip ini akan menghasilkan skema yang diperlukan berdasarkan struktur situs WordPress Anda.

Untuk menambahkan skrip ini, navigasikan ke folder root proyek Anda dan buka file package.json . Anda sekarang dapat menambahkan skrip hasilkan ke blok kode pertama:

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

Sebelum menjalankan skrip ini, Anda harus mengaktifkan Introspeksi Publik untuk sementara untuk situs web Anda. Di dasbor WordPress, navigasikan ke GraphQL > Settings . Kemudian gulir ke Aktifkan Introspeksi Publik dan pilih kotak centang yang menyertainya:

Klik Simpan Perubahan . Anda sekarang dapat menjalankan skrip hasilkan dengan memasukkan perintah berikut ke Terminal Anda:

 npm run generate

Script ini akan membuat file client/schema.generated.ts . Pada titik ini, Anda dapat menonaktifkan Introspeksi Publik di dalam dasbor WordPress Anda.

Langkah 8: Tentukan Komponen dan Kait FaustProvider

Sekarang, Anda perlu membungkus aplikasi Next.js Anda menggunakan komponen <FaustProvider> bawaan . Komponen React Higher-Order ini akan menyediakan Faust.js dengan konteks yang dibutuhkan untuk mengambil dan menyimpan data.

Untuk mencapai ini, buka file pages/_app.tsx proyek Anda. Anda kemudian dapat mengganti isinya dengan yang berikut ini:

 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;

Anda sekarang siap untuk menanyakan data dari bagian belakang WordPress. Anda akan menggunakan kait usePosts , yang menyediakan antarmuka standar yang mengambil daftar posting dari API WordPress tanpa kepala.

Buka direktori pages/posts.tsx dan hapus semua kode boilerplate Lorem Lipsum . Anda kemudian dapat mengimplementasikan kait 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> ); }

File skema yang Anda buat mengekspor jenis Postingan. Ini berarti Anda dapat menggunakan tipe ini untuk menentukan props komponen Post. Untuk menerima prop Post, buka file components/post.tsx dan tambahkan yang berikut ini:

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

Anda dapat menentukan apakah Anda ingin menerima konten yang dirender atau konten mentah. Dalam kode di atas, Anda memilih konten yang dirender.

Langkah 9: Hubungkan Faust.js ke Situs WordPress Anda

Langkah terakhir adalah membuat link antara data Anda dan komponen Post. Ini mengharuskan Anda untuk menambahkan satu baris kode ke file posts.tsx :

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

Setelah melakukan perubahan ini, muat “http://localhost:3000/posts” di browser Anda. Anda sekarang akan melihat daftar semua posting dari situs WordPress Anda:

Jika posting Anda tidak muncul, hentikan proses yang sedang berjalan dengan menutup Terminal Anda. Kemudian buka jendela baru dan gunakan perintah ubah direktori sehingga Terminal mengarah ke proyek Faust.js lokal Anda (misalnya: cd /Users/username/faust-headless-demo ). Anda kemudian dapat memulai server pengembangan ( npm run dev ), dan coba segarkan halaman “http://localhost:3000/posts”.

Kesimpulan

Banyak pengembang WordPress tanpa kepala memilih untuk menggunakan kerangka kerja. Namun, ketika saatnya untuk melihat pratinjau konten Anda, banyak kerangka kerja memaksa Anda untuk masuk ke situs eksternal atau melihat halaman pratinjau Anda di dalam bingkai.

Faust.js berupaya memberikan pengalaman pratinjau yang konsisten dan mulus. Saat Anda menyiapkan kerangka kerja ini, Anda akan dapat melihat konten Anda menggunakan alur kerja WordPress yang sudah dikenal. Anda juga akan mendapatkan akses ke kumpulan alat React dan Node.js yang sudah dikenal.

Apakah Anda memiliki pertanyaan tentang kerangka kerja Faust.js? Beri tahu kami di bagian komentar di bawah!