vercel

وعليكم السلام.

تستطيعين نشر تطبيق Express.js على vercel، ولكن عليك ادراج الملفات داخل ال api كما يتم في next js عندا نريد أن نستخدها كواجهة برمجية خلفية للتطبيق.

قومي بانشاء ملف index.js لادراج كود express داخل مجلد ال api كالمثال الاتي:

const app = require('express')();
const { v4 } = require('uuid');

app.get('/api', (req, res) => {
  const path = `/api/item/${v4()}`;
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate');
  res.end(`Hello! Go to item: <a href="${path}">${path}</a>`);
});

app.get('/api/item/:slug', (req, res) => {
  const { slug } = req.params;
  res.end(`Item: ${slug}`);
});

module.exports = app;

يمكنك قراءة تفاصيل أكثر من موقع شركة vercel ذاتها هنا.

كما يمكنك الرفع على vps والتحكم بال backend كما تريدين وربطه مع ال frontend.

أي أنه يتم تشغيل الواجهة الأمامية على port وربطه مع الواجهة الخلفية على port اخر، ولكن vercel تختصر كل هذا بالطريقة التي ذكرتها.

بالتوفيق.

بتاريخ 2 ساعة قال محمد سعد شحرور:

وعليكم السلام.

تستطيعين نشر تطبيق Express.js على vercel، ولكن عليك ادراج الملفات داخل ال api كما يتم في next js عندا نريد أن نستخدها كواجهة برمجية خلفية للتطبيق.

قومي بانشاء ملف index.js لادراج كود express داخل مجلد ال api كالمثال الاتي:

const app = require('express')();
const { v4 } = require('uuid');

app.get('/api', (req, res) => {
  const path = `/api/item/${v4()}`;
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate');
  res.end(`Hello! Go to item: <a href="${path}">${path}</a>`);
});

app.get('/api/item/:slug', (req, res) => {
  const { slug } = req.params;
  res.end(`Item: ${slug}`);
});

module.exports = app;

يمكنك قراءة تفاصيل أكثر من موقع شركة vercel ذاتها هنا.

كما يمكنك الرفع على vps والتحكم بال backend كما تريدين وربطه مع ال frontend.

أي أنه يتم تشغيل الواجهة الأمامية على port وربطه مع الواجهة الخلفية على port اخر، ولكن vercel تختصر كل هذا بالطريقة التي ذكرتها.

بالتوفيق.

هل اقوم فقط بانشاء ملف index.js وكتابة هذا الكود فيه؟ وكيف يتم الربط مع frontend موجود أيضاً على vercel؟

بتاريخ 8 ساعة قال شيماء راشد:

هل اقوم فقط بانشاء ملف index.js وكتابة هذا الكود فيه؟ وكيف يتم الربط مع frontend موجود أيضاً على vercel؟

يوجد عدة خطوات لفعل ذلك، أولها هو نسخ الكود الذي أدرجته داخل مجلد api منفصل عن ال api الخاص ب next js الذي هو داخل مجلد ال app. (أعتذر عن الخطأ البسيط السابق)

ثانيا يجب انشاء ملف vercel.json لتوجيه الطلبات الى الباك ايند الخاص ب express.

التعديل على ال scripts في ملف ال package.json لاضافة امر vercel-build.

أنصح وبشدة متابعة هذا الفيديو القصير لتستطيعي ربط next مع express.

بالتوفيق.

بتاريخ 4 ساعة قال محمد سعد شحرور:

يوجد عدة خطوات لفعل ذلك، أولها هو نسخ الكود الذي أدرجته داخل مجلد api منفصل عن ال api الخاص ب next js الذي هو داخل مجلد ال app. (أعتذر عن الخطأ البسيط السابق)

ثانيا يجب انشاء ملف vercel.json لتوجيه الطلبات الى الباك ايند الخاص ب express.

التعديل على ال scripts في ملف ال package.json لاضافة امر vercel-build.

أنصح وبشدة متابعة هذا الفيديو القصير لتستطيعي ربط next مع express.

بالتوفيق.

مشروعي ليس next

هو reactjs & expressjs

بتاريخ On 27‏/12‏/2023 at 07:31 قال شيماء راشد:

مشروعي ليس next

هو reactjs & expressjs

الطريقتين متشابهين الى حد ما، ولكن مع ذلك فان بنية المشروع الذي يحوي على express كواجهة خلفية، و react كواجهة أمامية يمكنك رؤيته هنا بشكل مبسط وسهل.

كما يمكنك رؤية مجلد ال api الذي ذكرته والملفات التي بداخله مثل package.json و package-lock.json الضرورية للرفع على vercel.

بالتوفيق.