یک برنامه SaaS آماده تولید ایجاد کنید

به فکر ساختن یک برنامه SaaS هستید؟ این الگوی استارت به شما کمک می کند تا با استفاده از Encore.ts و Next.js. یک برنامه آماده سازی مقیاس پذیر و تولیدی ایجاد کنید.

از Clerk برای تأیید اعتبار استفاده می کند ، برای پرداخت ها یکپارچه سازی نوار است و از Tailwind و Shadcn/UI برای یک ظاهر طراحی شده و اجزای استفاده می کند.

نسخه ی نمایشی: https://encorets-saas-starter.vercel.app

ویژگی

• صفحه فرود بازاریابی (/)
• صفحه قیمت گذاری (/قیمت گذاری) که به پرداخت راه راه متصل می شود
• صفحات داشبورد با (/داشبورد)
• مدیریت اشتراک (/داشبورد/اشتراک)

پشته فنی

شروع

Encore را نصب یا به روز کنید

نصب Encore:

• MACOS: brew install encoredev/tap/encore
• لینوکس: curl -L https://encore.dev/install.sh | bash
• WINDOWS: iwr https://encore.dev/install.ps1 | iex

یادداشت: این استارت به Encore v1.46.9+نیاز دارد ، اگر نسخه قدیمی تری نصب کرده اید ، با استفاده از بروزرسانی encore version updateبشر

ایجاد برنامه

از این الگوی یک برنامه محلی ایجاد کنید:

encore app create my-app-name --example=ts/saas-starter

سپس وابستگی های جلو را نصب کنید:

cd my-app-name/frontend
pnpm install

تنظیم منشی

اگر قبلاً چنین نکرده اید ، یک حساب منشی ایجاد کنید. سپس ، در داشبورد منشی ، یک برنامه جدید ایجاد کنید.

اطمینان حاصل کنید که برنامه برای پشتیبانی از سازمان ها پیکربندی شده است ، که می توانند در آن فعال شوند تنظیمات مدیریت سازمان صفحه

اسرار

اگر میزبان برنامه خود در Vercel هستید (به دستورالعمل های استقرار بیشتر مراجعه کنید) ، می توانید برنامه منشی خود را با پروژه Vercel خود در زیر وصل کنید ادغام در تنظیمات پروژه در Vercel.
فراموش نکنید که اجرا کنید vercel env pull پس از آن

در غیر این صورت ، به کلیدهای API صفحه برای برنامه شما “کلید قابل چاپ” و یکی از “کلیدهای مخفی” را کپی کنید. به پروژه جلوی خود ، آنها را به .env.local به عنوان

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={PUBLISHABLE_KEY}
CLERK_SECRET_KEY={SECRET_KEY}

همچنین باید متغیرهای محیط زیر را به پروژه جلوی خود اضافه کنید:

NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"

برای اضافه کردن آنها به Encore ، به کلیدهای API صفحه برای برنامه شما “کلید قابل چاپ” و یکی از “کلیدهای مخفی” را کپی کنید.

از ترمینال خود (داخل فهرست برنامه Encore خود) ، اجرا کنید:

$ encore secret set --prod ClerkSecretKey

بعد ، همین کار را برای راز توسعه انجام دهید. امن ترین راه ایجاد یک کلید مخفی دیگر است (منشی به شما امکان می دهد چندین نفر داشته باشید).
پس از راز مشتری برای توسعه ، آن را به طور مشابه با قبل تنظیم کنید:

$ encore secret set --dev ClerkSecretKey

راه اندازی راه راه

اگر قبلاً یکی از آنها را ندارید ، یک حساب راه راه ایجاد کنید. سپس حساب خود را ایجاد کنید و حتماً محصولات و برنامه های قیمت گذاری را تنظیم کنید. همچنین باید پورتال مشتری صورتحساب را پیکربندی کنید.

همچنین باید به عنوان یک نقطه پایانی Webhook در Stripe ، پس زمینه خود را اضافه کنید و URL Endpoint را تنظیم کنید https://YOUR_DOMAIN/stripe/webhookبشر

در حال حاضر ، برنامه های قیمت گذاری در Frontend/lib/plans.ts ذخیره می شوند ، اما در صورت تمایل می توانید آنها را از Stripe بخوانید یا آنها را در یک پایگاه داده ذخیره کنید.

اسرار

در داشبورد نوار ، به توسعه دهنده صفحه و ایجاد یک کلید جدید API. “کلید مخفی” را کپی کنید.

از ترمینال خود (داخل فهرست برنامه Encore خود) ، اجرا کنید:

$ encore secret set --dev StripeSecretKey

برای اینکه بتوانید درخواست های ورودی وب را تأیید کنید ، باید راز امضا را از صفحه Webhook در داشبورد نوار کپی کرده و با اجرای آن به Encore اضافه کنید:

$ encore secret set --dev StripeWebhookSigningSecret

هنگامی که می خواهید آن را برای تولید تنظیم کنید ، یک کلید مخفی جداگانه و Secret Signing Secret را برای تولید و اجرای ایجاد کنید:

$ encore secret set --prod StripeSecretKey
$ encore secret set --prod StripeWebhookSigningSecret

پرداخت های آزمایشی

برای آزمایش پرداخت های راه راه ، از جزئیات کارت تست زیر استفاده کنید:

شماره کارت: 4242 4242 4242 4242
انقضا: هر تاریخ آینده
CVC: هر شماره 3 رقمی

متغیرهای محیط Vercel

متغیرهای محیطی خاص Vercel به طور پیش فرض به صورت محلی تنظیم نشده اند ، بنابراین باید خودتان آنها را اضافه کنید. این کار را می توان در صفحه تنظیمات پروژه در Vercel انجام داد.

لطفاً متغیرهای محیط زیر را اضافه کنید برای توسعه:

VERCEL_ENV="development"
NEXT_PUBLIC_VERCEL_ENV="development"
VERCEL_GIT_PULL_REQUEST_ID=""
NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID=""

در محلی اجرا کنید

Backend Encore خود را اجرا کنید:

cd backend
encore run

یادداشت: این کار شکست خواهد خورد مگر اینکه اسرار نوار و منشی را مطابق دستورالعمل های فوق تنظیم کنید.

در یک پنجره ترمینال متفاوت ، REACT Frontend را با استفاده از Next.js اجرا کنید:

cd frontend
pnpm run dev

ایجاد مشتری درخواست

با بازسازی مشتری درخواست ، هر زمان که تغییر در یک نقطه پایانی Encore ایجاد کنید ، قرارداد بین پس زمینه و جبهه را در همگام سازی نگه دارید.

pnpm run gen # Deployed Encore staging environment
# or
pnpm run gen:local # Locally running Encore backend

اعزام

محاصره کردن

پس زمینه خود را به یک محیط صحنه در ابر توسعه رایگان Encore مستقر کنید:

git add -A .
git commit -m 'Commit message'
git push encore

سپس به داشبورد ابر بروید تا بر استقرار خود نظارت کنید و URL تولید خود را پیدا کنید.

از آنجا همچنین می توانید معیارها ، اثری را ببینید ، برنامه خود را به یک repo github متصل کنید تا به صورت خودکار در تعهدات جدید مستقر شوید و حساب AWS یا GCP خود را برای استفاده برای استقرار وصل کنید.

کار خوب ، پس زمینه SaaS شما اکنون به ابر مستقر شده است!

Next.js در Vercel

1. یک repo ایجاد کنید و پروژه را به GitHub فشار دهید.
2. یک پروژه جدید در Vercel ایجاد کنید و آن را به repo github خود نشان دهید.
3. انتخاب کردن frontend به عنوان فهرست اصلی پروژه Vercel.

پیکربندی Frontend & Cors

پس زمینه باید بداند که جبهه در آن میزبانی شده است ، تا بتوانید URL های تغییر مسیر صحیح را ارائه دهند
بازگشت از نوار. همچنین لازم است که COR ها به درستی کار کنند.

برای رسیدگی به این کار ، باید دو پرونده پیکربندی را به روز کنید.

ابتدا ، به روزرسانی کنید FRONTEND_URL ثابت در backend/config.ts برای اشاره به جایی که میزبان جلوی شما است.

ثانیاً ، اگر هنگام تماس با API Encore از جلوی خود ، وارد CORS می شوید ، ممکن است لازم باشد مشخص کنید که منشاء مجاز به دسترسی به API شما (از طریق مرورگرها) است. شما این کار را با مشخص کردن global_cors کلید در encore.app پرونده ، که ساختار زیر را دارد:

"global_cors": {
  // allow_origins_without_credentials specifies the allowed origins for requests
  // that don't include credentials. If nil it defaults to allowing all domains
  // (equivalent to ["*"]).
  "allow_origins_without_credentials": [
    ""
  ],

  // allow_origins_with_credentials specifies the allowed origins for requests
  // that include credentials. If a request is made from an Origin in this list
  // Encore responds with Access-Control-Allow-Origin: .
  //
  // The URLs in this list may include wildcards (e.g. "https://*.example.com"
  // or "https://*-myapp.example.com").
  "allow_origins_with_credentials": [
    ""
  ]
}

هر دوی این پیش فرض به “https://encorets-saas-starter.vercel.app” که برنامه آزمایشی میزبان است.

اطلاعات بیشتر در مورد پیکربندی CORS را می توان در اینجا یافت: https://encore.dev/docs/ts/develop/cors

پیچیدن

اکنون یک برنامه SaaS مقیاس پذیر و آماده تولید و در حال اجرا دارید. اکنون ادامه دهید و محصول SaaS خود را توسعه دهید!