Memisahkan Drupal 8 dan Gatsby.JS: duet berkecepatan tinggi

Tim kami senang menjelajahi dan menggunakan tren panas dalam pengembangan, salah satunya adalah arsitektur Drupal yang dipisahkan. Posting kami sebelumnya dikhususkan untuk menggunakan Drupal yang dipisahkan dengan JSON.API, dan pahlawan cerita kami hari ini adalah "The Great Gatsby". Apakah itu terdengar seperti pahlawan buku yang terkenal? Tidak, Gatsby.JS adalah alat JavaScript baru dan panas, tetapi menjanjikan untuk menjadi sama-sama terkenal dan layak mendapatkan seratus buku! Dalam posting ini, kita akan membahas prinsip kerjanya dan manfaat menggunakan decoupled Drupal 8 dan Gatsby.JS. Dan, tentu saja, Anda selalu dapat mengandalkan ahli Drupal kami dalam mengimplementasikan semuanya.

Gatsby.JS: apa itu dan bagaimana cara kerjanya

Gatsby.JS didefinisikan sebagai generator situs statis, tetapi mendekati kerangka kerja front-end dalam kapasitasnya. Gatsby dibangun di atas alat front-end yang sangat panas, beberapa di antaranya adalah:

• React.JS — pustaka JavaScript yang luar biasa populer untuk membangun antarmuka yang kompleks
• GraphQL — bahasa kueri yang sangat efisien
• Webpack — bundler modul JavaScript yang hebat

Gatsby.JS dimaksudkan untuk membangun situs statis yang sangat cepat. Ini mengambil data kepada mereka dari sumber apa pun dan menghasilkan konten statis menggunakan GraphQL. Saat ini, ada 500+ plugin sumber untuk membuat koneksi antara sumber data tertentu dan Gatsby. Sumbernya termasuk YouTube, Twitter, Hubspot, Shopify, Trello, Vimeo, Google Sheets, sistem manajemen konten seperti Drupal, WordPress, dan sebagainya.

Memisahkan Drupal 8 dan Gatsby.JS: duet hebat dan manfaatnya

Salah satu kombinasi terpanas dan paling bermanfaat untuk hari ini adalah Gatsby dan Drupal 8. Menurut arsitektur Drupal yang dipisahkan atau tanpa kepala, Drupal hanya berfungsi sebagai backend, sementara Gatsby.JS menangani lapisan presentasi.

Drupal 8 dan Gatsby.JS keduanya open-source, memiliki komunitas yang besar dan aktif serta ekosistem modul atau plugin tambahan yang sangat besar. Dan Drupal 8 memiliki layanan web bawaan untuk membuat integrasi menjadi mudah.

Apa yang membuat kombinasi ini begitu bermanfaat? Kesederhanaan dan kecepatan situs statis berpadu sempurna dengan kekuatan dan fleksibilitas backend yang disediakan oleh Drupal 8 CMS. Berikut ini setidaknya beberapa fitur yang kami dapatkan pada akhirnya:

• Kecepatan yang tak tertandingi. Gatsby.JS mengambil semua halaman situs web alih-alih menanyakan basis data setiap saat sesuai permintaan, yang membuat navigasi menjadi menyenangkan dan luar biasa cepat. Gatsby adalah generator PWA (progressive web app) statis. Ini secara efisien hanya mengambil file HTML, CSS, dan JS yang penting.
• Pengaturan yang mudah. Tidak diperlukan proses penyebaran dan penyiapan yang rumit dengan Gatsby. Itu membangun situs Anda sebagai file statis yang dapat dengan cepat digunakan di mana saja.
• Fitur personalisasi yang hebat. Kombinasi Drupal-dan-Gatsby dapat menampilkan personalisasi pengguna dan kemampuan otentikasi yang luar biasa.
• Pengeditan konten yang luar biasa. Biasanya, pembuat situs statis perlu menulis konten dalam penurunan harga, yang mungkin merepotkan bagi editor konten. Tetapi masalahnya diselesaikan dengan Drupal 8 sebagai backend! Fitur pembuatan konten Drupal 8 adalah kesenangan bagi editor konten mana pun.

Salah satu contoh penggunaan decoupled Drupal 8 dan Gatsby.JS adalah situs demo Umami Food Magazine. Situs ini dibangun di atas distribusi Drupal tanpa kepala Contenta CMS dengan Gatsby.JS.

Jika ini terlihat cukup menggugah selera, hubungi tim Drupal kami sekarang untuk menggabungkan Drupal 8 yang dipisahkan dengan Gatsby.JS untuk Anda! Atau lanjutkan membaca tentang beberapa detail implementasi.

Beberapa spesifikasi penggunaan Drupal 8 dan Gatsby.JS

Dalam penyiapan terpisah, situs Drupal 8 dan Gatsby perlu dipersiapkan untuk bekerja sama. Mereka akan terhubung melalui plugin sumber Gatsby khusus untuk Drupal yang mengambil data, termasuk gambar, dari situs web Drupal 8 dengan JSON API terpasang.

Jadi perlu untuk menginstal dan mengaktifkan JSON API dan JSON API ekstra yang berkontribusi modul Drupal, serta mengaktifkan modul Serialisasi inti di situs web Drupal kami.

Tujuan kami berikutnya adalah Konfigurasi — Layanan Web — JSON API Overwrites .

Di Pengaturan , kita perlu memastikan awalan jalur untuk JSON API adalah /jsonapi . Inilah yang perlu diketahui oleh situs Gatsby.

Di Orang — Peran — Izin, kami memberikan akses ke daftar sumber daya JSON API kepada pengguna dengan semua peran, termasuk anonim.

Situs Drupal kami siap untuk integrasi Gatsby, dan kami sekarang perlu menyiapkan situs Gatsby kami. Ini dimulai dengan menginstal CLI Gatsby:

npm install --global gatsby-cli

Kemudian kami mengikuti semua langkah pembuatan situs di dokumentasi "Memulai". Gatsby juga menawarkan permulaan yang telah dikonfigurasi sebelumnya untuk pembuatan situs.

Kemudian kita jalankan Gatsby dengan perintah, setelah itu situs Gatsby akan tersedia di localhost:8000:

gatsby berkembang

Plugin sumber yang disebutkan di atas untuk Drupal kemudian perlu diinstal di situs Gatsby. Selanjutnya, kita tambahkan potongan kode dari dokumentasi plugin ke file gatsby-config.js. URL harus diubah menjadi salah satu situs Drupal kami.

plugin: [
{
penyelesaian: `gatsby-source-drupal`,
pilihan: {
baseUrl: `https://our-site-name.com/`,
apiBase: `api`, // opsional, default ke `jsonapi`
},
},
]

Kami kemudian mengonfigurasi situs Gatsby kami untuk mengambil konten yang kami butuhkan dari Drupal. Kita perlu membuat halaman yang sesuai di /src/pages di situs Gatsby dan menambahkan kode untuk React import ke file JS.

Dan kami mengonfigurasi GraphQL di localhost:8000/___graphql untuk menanyakan situs Drupal persis seperti yang kami inginkan.

Semuanya diakhiri dengan perintah terakhir untuk mempublikasikan situs Gatsby kami dengan data Drupal:

gatsby membangun

Ini hanyalah deskripsi yang sangat singkat untuk membuat Drupal 8 bekerja dengan Gatsby. Tenaga ahli kami siap melakukan setup secara tepat sesuai dengan keinginan Anda.

Nikmati kombinasi dari Drupal 8 dan Gatsby.JS yang dipisahkan!

Jika Anda tertarik untuk menggunakan Drupal 8 dan Gatsby.JS yang dipisahkan, baik pada proyek yang sudah ada atau yang baru, hubungi pengembang Drupal kami. Tim Drupal 8 kami memiliki pengalaman hebat dalam integrasi pihak ketiga. Kami akan memberi tahu Anda pengaturan terbaik yang dipisahkan dan, tentu saja, menerapkannya dengan lancar. Mari nikmati teknologi terbaru dan terhebat!