headless wp starter

Postlight's Headpress WordPress + React Starter Kit adalah toolset otomatis yang akan memutar tiga hal:

1. Backend WordPress yang melayani datanya melalui WP REST API dan GraphQL.
2. Sampel Bereaksi Frontend Didukung oleh WP GraphQL API, yang mendukung posting, halaman, kategori, menu, pencarian, dan masuk pengguna.
3. Sampel lain server-sisi yang diberikan react frontend menggunakan next.js yang ditenagai oleh WP REST API.

Anda dapat membaca semua tentang hal itu dalam pengantar yang praktis ini.

Apa yang ada di dalamnya:

• Installer otomatis yang mem -bootstrap instalasi Core WordPress yang menyediakan API REST yang mapan dan stabil.
• Plugin yang memperlihatkan graphql API yang lebih baru dan dalam proses untuk WordPress.
• Plugin WordPress yang Anda butuhkan untuk mengatur jenis pos dan bidang khusus (bidang khusus canggih dan tipe pos kustom UI).
• Plugin yang mengekspos bidang khusus dan menu WordPress di WP REST API (ACF ke WP API dan menu WP-REST-API V2).
• Plugin Otentikasi JWT: JWT WP REST dan JWT WP GraphQL.
• Semua kode tema Starter WordPress dan pengaturan tanpa headless membutuhkan, termasuk Permalink yang Cukup, CORS Allow-Origin Header, dan fungsi logging yang berguna untuk debugging yang mudah.
• Mekanisme untuk mengimpor data yang mudah dari instalasi WordPress yang ada di mana saja di web menggunakan WP Migrate DB Pro dan plugin yang menyertainya (diperlukan lisensi).
• Sampel, starter Frontend React App Didukung oleh GraphQL.
• Sampel lain, Starter Frontend React App, sisi server yang diterjemahkan melalui Next.js, ditenagai oleh WP REST API.
• Wadah dan skrip Docker untuk mengelolanya, untuk dengan mudah menjalankan aplikasi React Frontend dan backend secara lokal atau menggunakannya ke penyedia hosting apa pun dengan dukungan Docker.

Mari kita mulai.

Memasang

Prasyarat: Sebelum Anda mulai, Anda perlu Docker terpasang. Di Linux, Anda mungkin perlu menginstal Docker-Compose secara terpisah.

Docker menyusun build dan memulai empat kontainer secara default: db-headless , wp-headless , frontend & frontend-graphql :

 docker-compose up -d

Tunggu beberapa menit bagi Docker untuk membangun layanan untuk pertama kalinya. Setelah pembangunan awal, startup hanya perlu beberapa detik.

Anda dapat mengikuti output Docker untuk melihat kemajuan build dan log:

 docker-compose logs -f

Atau, Anda dapat menggunakan beberapa alat Docker yang berguna seperti plugin Kitematic dan / atau VScode Docker untuk mengikuti log, memulai / menghentikan / menghapus wadah dan gambar.

Opsional: Anda dapat menjalankan frontend secara lokal sementara WordPress masih berjalan di Docker:

 docker-compose up -d wp-headless
cd frontend && yarn && yarn start

Setelah wadah berjalan, Anda dapat mengunjungi React Frontends dan Backend WordPress Admin di browser Anda.

Frontend

Starter Kit ini menyediakan dua wadah frontend:

• Wadah frontend Didukung oleh WP REST API adalah sisi server yang diberikan menggunakan Next.js, dan diekspos pada port 3000 : http: // localhost: 3000
• Wadah frontend-graphql Didukung oleh GraphQL, diekspos pada port 3001 : http: // localhost: 3001

Beginilah rupa frontend:

Anda dapat mengikuti output yarn start dengan menjalankan perintah log-compose logs diikuti dengan nama wadah. Misalnya:

 docker-compose logs -f frontend

Jika Anda perlu memulai kembali proses itu, restart wadah:

 docker-compose restart frontend

PS: Menjelajahi frontend berikutnya. JS dalam mode pengembangan relatif lambat karena fakta bahwa halaman sedang dibangun berdasarkan permintaan. Dalam lingkungan produksi, akan ada peningkatan yang signifikan dalam beban halaman.

Backend

Wadah wp-headless memperlihatkan Apache pada port host 8080 :

• Dasbor: http: // localhost: 8080/wp-admin (kredensial default postlight / postlight )
• REST API: http: // localhost: 8080/wp-json
• Graphql API: http: // localhost: 8080/graphql

Wadah ini mencakup beberapa alat pengembangan:

 docker exec wp-headless composer --help
docker exec wp-headless phpcbf --help
docker exec wp-headless phpcs --help
docker exec wp-headless phpunit --help
docker exec wp-headless wp --info

Log Apache/PHP tersedia melalui docker-compose logs -f wp-headless .

Database

db-headless Container mengekspos mysql pada port host 3307 :

 mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless

Anda juga dapat menjalankan shell mysql di wadah:

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless

Instal ulang/impor

Untuk menginstal ulang WordPress dari awal, jalankan:

 docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress

Untuk mengimpor data dari mysqldump dengan mysql , jalankan:

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless < example.sql
docker exec wp-headless wp search-replace https://example.com http://localhost:8080

Impor data dari instalasi WordPress lain

Anda dapat menggunakan plugin yang disebut WP Migrate DB Pro untuk terhubung ke instalasi WordPress lain dan mengimpor data darinya. (Lisensi Pro akan diperlukan.)

Untuk melakukannya, set pertama MIGRATEDB_LICENSE & MIGRATEDB_FROM di .env dan buat ulang wadah untuk memberlakukan perubahan.

 docker-compose up -d

Kemudian jalankan skrip impor:

 docker exec wp-headless migratedb_import

Jika Anda memerlukan fungsionalitas yang lebih canggih, periksa perintah WP-CLI yang tersedia:

 docker exec wp-headless wp help migratedb

Perpanjang sisanya dan apis graphql

Pada titik ini Anda dapat mulai menyiapkan bidang khusus di admin WordPress, dan jika perlu, membuat titik akhir API REST khusus di tema starter WordPress postlight headpress.

Kode tema utama terletak di wordpress/wp-content/themes/postlight-headless-wp .

Anda juga dapat memodifikasi dan memperluas API GraphQL, contoh membuat jenis khusus dan mendaftarkan resolver terletak di: wordpress/wp-content/themes/postlight-headless-wp/inc/graphql .

Otentikasi Istirahat & GraphQL JWT

Untuk memberi pengguna WordPress kemampuan untuk masuk melalui aplikasi Frontend, gunakan sesuatu seperti Generator Garam WordPress untuk menghasilkan rahasia untuk JWT, lalu tentukan di wp-config.php

Untuk sisanya API:

 define('JWT_AUTH_SECRET_KEY', 'your-secret-here');

Untuk API GraphQL:

 define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');

Pastikan untuk membaca dokumentasi JWT REST dan JWT GraphQL untuk info lebih lanjut.

Berbaris

Ingatlah untuk memasukkan kode Anda saat Anda pergi.

Untuk Modifikasi Tema WordPress Lint, Anda dapat menggunakan php_codesniffer seperti ini:

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .

Anda juga dapat mencoba untuk autofix kesalahan PHPCS:

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .

Untuk meletakkan dan memformat aplikasi JavaScript, file konfigurasi yang lebih cantik dan ESLINT disertakan.

Hosting

Sebagian besar host WordPress juga tidak meng -host aplikasi simpul, jadi ketika tiba saatnya untuk ditayangkan, Anda perlu menemukan layanan hosting untuk frontend.

Itu sebabnya kami telah mengemas aplikasi Frontend dalam wadah Docker, yang dapat digunakan ke penyedia hosting dengan dukungan Docker seperti Amazon Web Services atau Google Cloud Platform. Untuk alternatif yang cepat dan lebih mudah, lihat sekarang.

Memecahkan masalah kesalahan umum

Breaking Change Alert - Docker

Jika Anda memiliki proyek yang sudah diatur dan kemudian diperbarui ke komit baru dari 99b4d7b , Anda harus melalui proses instalasi lagi karena proyek dimigrasikan ke Docker. Anda juga perlu memigrasikan data MySQL ke wadah DB MySQL yang baru.

Caching Docker

Dalam beberapa kasus, Anda perlu menghapus gambar wp-headless (tidak hanya wadah) dan membangunnya kembali.

Kesalahan CORS

Jika Anda telah menggunakan instalasi WordPress Anda dan memiliki masalah CORS, pastikan untuk memperbarui /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php dengan URL asal frontend Anda.

Lihat hal lain yang ingin Anda tambahkan di sini? Silakan kirim permintaan tarik!

---

? Proyek Labs dari teman -teman Anda di postlight. Happy Coding!