بناء تطبيق React غير خادم مع Vercel و FaunaDB
مقدمة
تزداد شعبية الهندسة المعمارية غير الخادم بسبب قابليتها للتوسع وفعاليتها من حيث التكلفة. ستوجهك هذه المقالة خلال بناء تطبيق React بسيط، ونشره على Vercel، وربطه بـ FaunaDB.
المتطلبات الأساسية
- تثبيت Node.js و npm
- حساب Vercel
- حساب FaunaDB
إعداد تطبيق React
أولاً، قم بإنشاء تطبيق React جديد باستخدام Create React App:
npx create-react-app my-serverless-app
cd my-serverless-app
دمج FaunaDB
قم بتثبيت برنامج تشغيل FaunaDB JavaScript:
npm install faunadb
أنشئ ملف .env
في جذر مشروعك وأضف مفتاح FaunaDB السري الخاص بك:
FAUNADB_SECRET=<مفتاح_FaunaDB_الخاص_بك>
هام: لا تقم أبدًا بتضمين ملف .env
الخاص بك في التحكم في الإصدار.
الآن، قم بإنشاء ملف باسم fauna.js
في الدليل src
لتهيئة عميل FaunaDB:
// src/fauna.js
import faunadb from 'faunadb';
const q = faunadb.query;
const client = new faunadb.Client({
secret: process.env.REACT_APP_FAUNADB_SECRET,
});
export { client, q };
ملاحظة: حتى يتمكن تطبيق React من قراءة متغيرات البيئة، يجب أن تسبقها بـ REACT_APP_
. تذكر إعادة تسمية FAUNADB_SECRET
في ملف .env
الخاص بك إلى REACT_APP_FAUNADB_SECRET
.
إنشاء مكون بسيط
لنقم بإنشاء مكون بسيط يجلب البيانات من FaunaDB. أولاً، قم بإنشاء مجموعة في FaunaDB باسم "todos". ثم أنشئ فهرسًا باسم "all_todos".
// src/components/Todo.js
import React, { useState, useEffect } from 'react';
import { client, q } from '../fauna';
function Todo() {
const [todos, setTodos] = useState([]);
useEffect(() => {
const fetchTodos = async () => {
try {
const result = await client.query(
q.Map(
q.Paginate(q.Match(q.Index("all_todos"))),
q.Lambda("X", q.Get(q.Var("X")))
)
);
setTodos(result.data.map(todo => ({ id: todo.ref.id, ...todo.data })));
} catch (error) {
console.error('Error fetching todos:', error);
}
};
fetchTodos();
}, []);
return (
<div>
<h2>مهام</h2>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}
export default Todo;
قم بتعديل App.js
الخاص بك لتضمين مكون Todo
import React from 'react';
import Todo from './components/Todo';
function App() {
return (
<div className="App">
<Todo />
</div>
);
}
export default App;
تذكر إضافة حقل text
إلى عناصر مهمتك عند إنشائها في FaunaDB حتى يتم عرض المكون أعلاه بشكل صحيح.
النشر إلى Vercel
- قم بتثبيت التعليمات البرمجية الخاصة بك في مستودع Git (على سبيل المثال، GitHub).
- أنشئ مشروع Vercel وقم بتوصيله بمستودع Git الخاص بك.
- أضف متغير البيئة
REACT_APP_FAUNADB_SECRET
إلى إعدادات مشروع Vercel الخاص بك.
ستقوم Vercel بنشر تطبيقك تلقائيًا كلما دفعت تغييرات إلى مستودع Git الخاص بك.
خاتمة
لقد نجحت في بناء ونشر تطبيق React غير خادم باستخدام Vercel و FaunaDB. يوفر هذا أساسًا متينًا لبناء تطبيقات غير خادم أكثر تعقيدًا.