Menggunakan tapak Jamstack tanpa pelayan dengan Redwoodjs, Fauna, dan Vercel

Tutorial ini membimbing anda melalui membina aplikasi serverless jamStack menggunakan Redwoodjs, FaunAdb, dan Vercel. Kami akan memanfaatkan API GraphQL Fauna sebagai backend untuk frontwood redwoodjs, yang digunakan dengan mudah dengan penempatan satu klik Vercel.

Mengharapkan menyelam yang mendalam ke dalam konsep Jamstack dan tanpa pelayan, bersama -sama dengan pengalaman praktikal menggunakan timbunan teknologi yang kuat ini.

Membina Aplikasi Redwood Anda

Redwoodjs adalah rangka kerja untuk aplikasi tanpa pelayan, menggabungkan React (frontend), graphql (data), dan prisma (pertanyaan pangkalan data). Walaupun rangka kerja frontend lain wujud (seperti Bison), Redwoodjs menawarkan ekosistem yang matang dan mantap.

Kami akan memintas templat starter dan membina dari projek redwood asas, memeriksa setiap komponen. Pertama, pasang benang dan jalankan arahan ini:

 Benang Buat Redwood- App ./CSStricks
CD CSSTRICKS
Benang RW Dev

Frontend anda berjalan di localhost:8910 , dan backend di localhost:8911 (dengan taman permainan GraphIQL). Halaman pendaratan Redwood harus muncul di localhost:8910 . (Nota: Redwoodjs versi 0.21.0 digunakan dalam contoh ini; rujuk dokumentasi untuk versi terkini dan kesediaan pengeluaran.)

Struktur projek

Redwoodjs mengutamakan konvensyen melalui konfigurasi, menyediakan susun atur projek berstruktur:

 <code>├── api │ ├── prisma │ │ ├── schema.prisma │ │ └── seeds.js │ └── src │ ├── functions │ │ └── graphql.js │ ├── graphql │ ├── lib │ │ └── db.js │ └── services └── web ├── public │ ├── favicon.png │ ├── README.md │ └── robots.txt └── src ├── components ├── layouts ├── pages │ ├── FatalErrorPage │ │ └── FatalErrorPage.js │ └── NotFoundPage │ └── NotFoundPage.js ├── index.css ├── index.html ├── index.js └── Routes.js</code>

Projek ini dibahagikan kepada direktori web (Frontend) dan api (backend), yang diuruskan oleh ruang kerja benang. Kami akan menggantikan Prisma dengan FaunAdb, mengeluarkan direktori prisma dan kandungan db.js (tetapi menyimpan fail db.js ).

index.html

Fail index.html mengandungi node dom root (<div id="redwood-app"></div> ) di mana aplikasi React diberikan. Redwoodjs, sementara berorientasikan jamStack, kini tidak melakukan pra-penanaman seperti Next.js atau Gatsby.

index.js

index.js menjadikan komponen aplikasi utama ke dalam elemen dom redwood-app menggunakan ReactDOM.render() . Ia menggunakan RedwoodProvider untuk pengurusan konteks dan FatalErrorBoundary untuk pengendalian ralat.

Routes.js

Routes.js mentakrifkan penghalaan aplikasi menggunakan router Redwood.

Membuat halaman

Mari buat halaman menggunakan Redwood CLI:

 benang rw g halaman rumah /
Benang RW G Page Mengenai

Ini menjana fail yang diperlukan untuk HomePage dan AboutPage . Memudahkan halaman ini dengan mengeluarkan pautan navigasi yang tidak perlu.

Susun atur

Buat susun atur yang boleh diguna semula untuk navigasi:

 blog susun atur benang rw g

Ubah suai BlogLayout.js untuk memasukkan pautan navigasi ke HomePage dan AboutPage penggunaan<link> komponen. Import BlogLayout ke HomePage dan AboutPage untuk menggabungkan navigasi.

Bahasa Definisi Skema Fauna (SDL)

Buat sdl.gql dengan skema berikut:

 Taipkan pos {
  Tajuk: String!
  Badan: String!
}

Taipkan pertanyaan {
  Catatan: [pos]
}

Muat naik skema ini ke contoh FaunAdb anda. Perhatikan bahawa FaunAdb mencipta jenis perantara; Kami akan mengambil kira ini dalam skema RedwoodJS kami.

Redwoodjs SDL dan Perkhidmatan

Buat api/src/graphql/posts.sdl.js mencerminkan skema fauna, termasuk PostPage jenis perantara. Buat api/src/services/posts/posts.js Untuk menanyakan API GraphQL Fauna menggunakan graphql-request . Ingatlah untuk memasang graphql-request dan graphql dalam direktori api .

Kebenaran Fauna

Konfigurasi api/src/lib/db.js untuk memasukkan rahsia FaunADB anda dalam tajuk kebenaran menggunakan pembolehubah persekitaran.

Pembenihan FaunAdb

Gunakan shell fauna untuk menambah beberapa siaran sampel ke pangkalan data anda.

Sel

Menjana BlogPostsCell untuk mengambil dan memaparkan siaran:

 Benang RW Menjana Blogpost Sel

Ubah suai BlogPostsCell.js untuk menanyakan posts dan menjadikan tajuk dan badan setiap jawatan. Import BlogPostsCell ke HomePage .

Penyebaran Vercel

Sambungkan projek anda ke Vercel. Ubah suai netlify.toml (jika ada) untuk menetapkan apiProxyPath ke "/api". Tambah rahsia FaunAdb anda kepada pembolehubah persekitaran Vercel. Perintah membina Vercel berfungsi dengan lancar dengan redwoodjs.

Permohonan anda kini selesai! Demo langsung dan repositori GitHub tersedia (pautan akan dimasukkan di sini).

Atas ialah kandungan terperinci Menggunakan tapak Jamstack tanpa pelayan dengan Redwoodjs, Fauna, dan Vercel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!