إعداد يدوي
أسرع طريقة لإنشاء موقع Saasfly جديد هي استخدام create saasfly كما هو موضح في دليل التثبيت.
متطلبات النظام
بالمناسبة، نوصي باستخدام NVM (Node Version Manager) لتشغيل إصدارات مختلفة من Node.js.
1. التثبيت اليدوي
لإنشاء تطبيق Saasfly جديد يدويًا، تحتاج فقط إلى اتباع بضع خطوات:
مستودع الشوكة والاستنساخ من GitHub
يرجى فتح https://github.com/saasfly/saasfly، وتفرع هذا المستودع.
الشوكة هي نسخة من المستودع. تتيح لك الشوكة تجربة التغييرات بحرية دون التأثير على المشروع الأصلي.
استنسخ المستودع المتشعب (يرجى استبدال <your_username> باسم حسابك على GitHub):
git clone https://github.com/<your_username>/saasfly.gitستشاهد عملية الاستنساخ:
remote: Enumerating objects: 402, done.remote: Counting objects: 100% (402/402), done.remote: Compressing objects: 100% (298/298), done.remote: Total 402 (delta 77), reused 386 (delta 65), pack-reused 0Receiving objects: 100% (402/402), 963.18 KiB | 130.00 KiB/s, done.Resolving deltas: 100% (77/77), done.تثبيت التبعيات
للحصول على تجربة أفضل، يرجى استخدام Bun (كيفية تثبيت Bun)، بدلاً من npm أو yarn.
استخدام bun لتثبيت التبعيات:
bun iقد يستغرق الأمر عدة دقائق، وبعد ذلك سترى:
+ @saasfly/api@workspace:packages/api+ @saasfly/auth@workspace:packages/auth+ @saasfly/common@workspace:packages/common+ @saasfly/db@workspace:packages/db+ @saasfly/eslint-config@workspace:tooling/eslint-config+ @saasfly/nextjs@workspace:apps/nextjs+ @saasfly/prettier-config@workspace:tooling/prettier-config+ @saasfly/stripe@workspace:packages/stripe+ @saasfly/tailwind-config@workspace:tooling/tailwind-config+ @saasfly/typescript-config@workspace:tooling/typescript-config+ @saasfly/ui@workspace:packages/ui+ @turbo/[email protected] (v1.12.4 available)+ [email protected] (v1.12.4 available)
1296 packages installed [1133.89s]إنشاء أنواع Prisma
يرجى التأكد من وجودك في مجلد saasfly، ثم استخدام bun لتوليد أنواع Prisma:
cd packages/db/bun db:generateانتاج:
✔ Generated Kysely types(1.7.1) to./ prisma in 1.32s2. ابدأ Saasfly
ينبغي عليك القيام بالقوائم أدناه لتشغيل الخادم.
إعداد متغيرات البيئة
قم بالدخول إلى مجلد saasfly، ثم قم بنسخ الملف .env.example، ثم قم بإعادة تسميته إلى .env.local، ثم أدخل المتغيرات الخاصة بك.
cd saasflycp .env.example .env.localتأكد من أن لديك قاعدة بيانات Postgres (إذا لم يكن لديك Postgres، فانقر هنا) وقمت بإنشاء قاعدة بيانات جديدة.
يجب أن يكون POSTGRES_URL موجودًا في ملف .env.local الخاص بك:
# مثال على التنسيق# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"
POSTGRES_URL="postgres://postgres:[email protected]:5432/saasfly"بعد ذلك، استخدم bun لإنشاء جداول قاعدة البيانات:
bun db:pushانتاج:
🚀 Your database is now in sync with your Prisma schema. Done in 151ms
┌─────────────────────────────────────────────────────────┐│ Update available 5.9.1 -> 5.10.2 ││ Run the following to update ││ npm i --save-dev prisma@latest ││ npm i @prisma/client@latest │└─────────────────────────────────────────────────────────┘إذا حدث خطأ ما، يمكنك التحدث إلينا على Discord، وسنكون سعداء بالإجابة على أي شيء يتعلق بـ Saasfly.
قم بتشغيل البناء أولاً
نظرًا لأن بعض المكونات الأساسية تتطلب وقت التجميع، فيجب عليك run build أولًا.
bun run buildتشغيل خادم التطوير
استخدم bun run لبدء تشغيل خادم الويب الخاص بك:
bun run dev:web@saasfly/nextjs:dev: cache bypass, force executing ad8bea47f156e113@saasfly/nextjs:dev: $ bun with-env next dev@saasfly/nextjs:dev: $ dotenv -e ../../.env.local -- next dev@saasfly/nextjs:dev: ▲ Next.js 14.1.0@saasfly/nextjs:dev: - Local: http://localhost:3000@saasfly/nextjs:dev:@saasfly/nextjs:dev: automatically enabled Fast Refresh for 1 custom loader@saasfly/nextjs:dev: ✓ Ready in 12.1sإذا سارت الأمور على ما يرام، فيجب أن يقوم Saasfly الآن بخدمة مشروعك على http://localhost:3000 ، ويمكنك رؤية النتيجة:
مبروك! يمكنك الآن البدء في كتابة التعليمات البرمجية لبناء برنامج SaaS الخاص بك.
إذا كنت جديدًا على Saasfly، فراجع مستندات هيكل المشروع للحصول على نظرة عامة على جميع الملفات والمجلدات المحتملة في تطبيقك.
تشغيل مع Stripe
يرجى قراءة المقال Stripe. ثم استخدم bun dev لتشغيل Stripe:
bun dev