الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

ريمكس مكدس الإنجيل مع Turborepo

Remix TypeScript Monorepo مع خطوط أنابيب Turborepo أو Prisma أو PostgreSQL أو SQLite (Litefs) ، Docker Deploy to Fly.io ، PNPM ، Shadcn/UI Tailwindcss.

QuickStart (موصى به) 

pnpm create remix@latest --init-script --install --template https://github.com/PhilDL/remix-gospel-stack

؟ هذا المستودع هو آراء:

  • TypeScript فقط.
  • متوافق فقط مع PNPM Package Manager للتعامل مع مساحات عمل Monorepo.
  • يستخدم Turborepo Pipelines + ذاكرة التخزين المؤقت للبناء ، و Lint ، و typecheck ، واختبار monorepo.

(بديل) استنساخ المستودع 

git clone [email protected]:PhilDL/remix-gospel-stack.git
cd remix-gospel-stack
pnpm add -w @remix-run/dev
pnpm remix init

ماذا يوجد في المكدس

هذا المكدس عبارة عن Monorepo الموجهة نحو Remix مدعوم من مساحات عمل Turborepo و PNPM. يحتوي على تطبيق Remix جاهز للانزلاق على Fly.io عبر بناء حاوية Docker.

تستخدم هذه الحزمة pnpm كمدير حزمة للاختيار لإدارة مساحات العمل. قد يعمل مع yarn و npm إذا وضعت تعريفات مساحة العمل في ملف Package.json ولكن لا يوجد ضمان.

بنية Monorepo مدعومة بمساحات عمل Turborepo و PNPM:

  • مجلد apps الذي يحتوي على التطبيقات

    • remix-app : تطبيق Remix.Run في ESM.
    • remix-vercel : تطبيق Remix.run ، جاهز للنشر على Vercel.
    • nextjs-app : A Next.js تطبيق

  • packages الحزم يحتوي على أمثلة

    • ui : مثال على حزمة واجهة المستخدم التي تعمل بواسطة Shadcn/UI. تم تصدير بعض مكونات مثال و advcn/ui tailwind config كمكون إضافي و preset.
    • database : غلاف PRISMA جاهز للاستخدام في حزم أو تطبيقات أخرى. مجمعة مع tsup. يمكن أن تكون postgresql أو sqlite // litefs الاعتماد على ما تختاره أثناء التثبيت.
    • business : حزمة مثال باستخدام database PRISMA باعتبارها تبعية واستخدام نمط مستودع مثل مثال.
    • internal-nobuild : حزمة مثال عبارة عن TypeScript Pure بدون خطوات بناء. نقطة الدخول main للحزمة هي src/index.ts مباشرة. يعتني ريمكس بالتجميع بخطوة البناء الخاصة به (مع esBuild). تحتوي هذه الحزم أيضًا على اختبار الوحدة مع Vitest. يستخدم Remix مسارات tsconfig.json للإشارة إلى هذا المشروع وأنواعه. أوصي بهذه الأنواع من الحزم الداخلية عندما لا تخطط لنشر الحزمة.

  • config-packages :

    • حزم ESLINT مع تكوينات مسبق مختلفة.
    • تكوينات TS ، أيضا مع الإعدادات المسبقة المختلفة.
    • تكوينات Tailwind.

تم تنشيط جميع أعلام Remix المستقبلية: 

 future : {
  unstable_optimizeDeps : true ,
  v3_fetcherPersist : true ,
  v3_lazyRouteDiscovery : true ,
  v3_relativeSplatPath : true ,
  v3_throwAbortReason : true ,
  v3_singleFetch : true ,
  v3_routeConfig : true ,
} ,

ماذا بعد ؟

  • Remix App Multi-Region Fly App نشر مع Docker
  • تأتي قاعدة البيانات في نكهات تختارها في التثبيت:
    • مجموعة متعددة المناطق بعد ذلك
    • Litefs - sqlite الموزع
  • Remix App HealthCheck Endpoint for Fly Backups Regions.
  • إجراءات GitHub لنشر تطبيق Remix على دمج لبيئات الإنتاج والتدريج.
  • اختبار من شامل مع الكاتب المسرحي في تطبيق Remix
  • اختبار الوحدة مع مكتبة Vitest واختبار داخل الحزم المختلفة.
  • تنسيق الكود مع أجمل
  • أنواع ثابتة مع TypeScript

تحذير يجب إطلاق جميع الأوامر التالية من دليل جذر Monorepo

التطوير

  • تثبيت التبعيات. 

    pnpm install

    عليك أيضًا نسخ المثال. env.example: 

    cp .env.example .env
cp .env.example .env.docker

  • ابدأ حاوية Docker PostgreSql 

    pnpm run docker:db

    ملاحظة: سيتم إكمال البرنامج النصي NPM بينما يقوم Docker بإعداد الحاوية في الخلفية. تأكد من أن Docker قد انتهى وأن الحاوية تعمل قبل المتابعة.

  • توليد مخطط Prisma 

    pnpm run generate

  • قم بتشغيل ترحيل Prisma إلى قاعدة البيانات 

    pnpm run db:migrate:deploy

  • قم بتشغيل الإنشاء الأول (مع التبعيات عبر الخيار ... ) 

    pnpm run build --filter=@remix-gospel-stack/remix-app...

    سيؤدي تشغيل Simply pnpm run build إلى إنشاء كل شيء ، بما في ذلك تطبيق NextJS.

  • قم بتشغيل خادم Remix Dev 

    pnpm run dev --filter=@remix-gospel-stack/remix-app

التبديل بين postgresql و sqlite (litefs)

  • للتبديل بين postgreSQL و SQLite (LITEFS) ، يوجد مولد توربو يمكنك استخدامه من جذر المستودع. 

    pnpm turbo gen scaffold-database

    ثم اتبع المطالبات. كن حذرًا ، ترتبط ترحيل Prisma بقاعدة بيانات معينة ، لذلك سيتعين عليك حذف مجلد migrations .

    ملاحظة: سيتعين عليك تشغيل pnpm i --fix-lockfile مرة أخرى بعد التبديل إلى SQLITE (LITEFS) التي تتطلب حزمة أخرى (LITEFS-JS). من المحتمل أن تضطر أيضًا إلى تشغيل pnpm run setup مرة أخرى لإنشاء أول ترحيل.

إنشاء الحزم

الحزمة الداخلية 

turbo gen workspace --name @remix-gospel-stack/foobarbaz --type package --copy

ثم اتبع المطالبات

الاختبارات ، typechecks ، الوبر ، تثبيت الحزم ...

تحقق من ملف turbo.json لمشاهدة خطوط الأنابيب المتاحة.

  • قم بتشغيل اختبارات Cypress و Dev 
    pnpm run test:e2e:dev --filter=@remix-gospel-stack/remix-app
  • الوبر كل شيء 
    pnpm run lint
  • TypeCheck Monorepo بأكمله 
    pnpm run typecheck
  • اختبار المونوروب كله 
    pnpm run test
or
pnpm run test:dev
  • كيفية تثبيت حزمة NPM في تطبيق Remix؟ 
    pnpm add dayjs --filter @remix-gospel-stack/remix-app
  • قم بتعديل TSConfigs ، يتكوين ESLINT في مجلد config-package . أي حزمة أو تطبيق سوف يمتد بعد ذلك من هذه التكوينات.

النشر على fly.io - postgresql

تحذير يجب إطلاق جميع الأوامر التالية من دليل جذر Monorepo

قبل النشر الأول ، ستحتاج إلى القيام ببعض الأشياء:

  • أول Singup ذبابة cli 

    fly auth signup

  • قم بإنشاء تطبيقين على الطيران ، وواحد للتدريج وواحد للإنتاج: 

    fly apps create remix-gospel-stack
fly apps create remix-gospel-stack-staging

    ملاحظة: بمجرد إنشاء تطبيق ما ، تحقق من ملف fly.toml للتأكد من أن مفتاح app هو اسم تطبيق الإنتاج الذي أنشأته. تُلحق هذه المكدس تلقائيًا لاحقة فريدة من نوعها في init والتي قد لا تتطابق مع التطبيقات التي أنشأتها أثناء الطيران. من المحتمل أن ترى 404 من الأخطاء في أجهزة GitHub الخاصة بك سجلات CI إذا كان لديك هذا عدم التوافق.

  • تهيئة git. 

    git init

  • قم بإنشاء مستودع GitHub جديد ، ثم أضفه كجهاز تحكم عن بُعد لمشروعك. لا تدفع تطبيقك بعد! 

    git remote add origin < ORIGIN_URL >

  • أضف FLY_API_TOKEN إلى github repo. للقيام بذلك ، انتقل إلى إعدادات المستخدم الخاصة بك على FLY وإنشاء رمز جديد ، ثم أضفه إلى أسرار الريبو الخاصة بك مع اسم FLY_API_TOKEN .

  • قم بإنشاء قاعدة بيانات لكل من بيئات التدريج والإنتاج:

إنشاء قاعدة البيانات: 

fly postgres create --name remix-gospel-stack-db
fly postgres attach --app remix-gospel-stack remix-gospel-stack-db

fly postgres create --name remix-gospel-stack-staging-db
fly postgres attach --app remix-gospel-stack-staging remix-gospel-stack-staging-db

ملاحظة: ستحصل على نفس التحذير لنفس السبب عند إرفاق قاعدة بيانات التدريج التي قمت بها في خطوة fly set secret . لا شكر على واجب. يتابع!

سوف تهتم Fly بتعيين سر DATABASE_URL لك.

النشر على fly.io - sqlite litefs

تحذير يجب إطلاق جميع الأوامر التالية من دليل جذر Monorepo

قبل النشر الأول ، ستحتاج إلى القيام ببعض الأشياء:

  • أول Singup ذبابة cli 

    fly auth signup

  • قم بإنشاء تطبيقين على الطيران ، وواحد للتدريج وواحد للإنتاج: 

    fly apps create remix-gospel-stack
fly apps create remix-gospel-stack-staging

    ملاحظة: بمجرد إنشاء تطبيق ما ، تحقق من ملف fly.toml للتأكد من أن مفتاح app هو اسم تطبيق الإنتاج الذي أنشأته. تُلحق هذه المكدس تلقائيًا لاحقة فريدة من نوعها في init والتي قد لا تتطابق مع التطبيقات التي أنشأتها أثناء الطيران. من المحتمل أن ترى 404 من الأخطاء في أجهزة GitHub الخاصة بك سجلات CI إذا كان لديك هذا عدم التوافق.

  • تهيئة git. 

    git init

  • قم بإنشاء مستودع GitHub جديد ، ثم أضفه كجهاز تحكم عن بُعد لمشروعك. لا تدفع تطبيقك بعد! 

    git remote add origin < ORIGIN_URL >

  • أضف FLY_API_TOKEN إلى github repo. للقيام بذلك ، انتقل إلى إعدادات المستخدم الخاصة بك على FLY وإنشاء رمز جديد ، ثم أضفه إلى أسرار الريبو الخاصة بك مع اسم FLY_API_TOKEN .

قم بإنشاء وحدة تخزين ثابت لقاعدة بيانات SQLite لكل من بيئات التدريج والإنتاج. قم بتشغيل ما يلي (لا تتردد في تغيير حجم GB بناءً على احتياجاتك والمنطقة التي تختارها (https://fly.io/docs/reference/regions/). 

fly volumes create data --region cdg --size 1 --app remix-gospel-stack
fly volumes create data --region cdg --size 1 --app remix-gospel-stack-staging

ثم قم بتوصيل وحدات التخزين بالتطبيقات: 

fly consul attach --app remix-gospel-stack
fly consul attach --app remix-gospel-stack-staging

ابدأ الترميز!

الآن بعد أن تم إعداد كل شيء ، يمكنك الالتزام ودفع التغييرات الخاصة بك إلى الريبو الخاص بك. كل الالتزام بفرعك main سيؤدي إلى انتشار في بيئة الإنتاج الخاصة بك ، وسيؤدي كل التزام بفرع dev الخاص بك إلى انتشار بيئة التدريج الخاصة بك.

إذا واجهت أي مشكلات تنشر للطيران ، فتأكد من اتباع جميع الخطوات المذكورة أعلاه ، وإذا كان لديك ، فقم بنشر العديد من التفاصيل حول نشرك (بما في ذلك اسم التطبيق الخاص بك) إلى مجتمع دعم Fly. عادة ما تكون مستجيبة إلى حد ما هناك ونأمل أن تساعد في حل أي من مشكلات النشر والأسئلة الخاصة بك.

تنشر المنطقة المتعددة

بمجرد تشغيل موقعك وقاعدة البيانات في منطقة واحدة ، يمكنك إضافة المزيد من المناطق عن طريق اتباع مستندات التحجيم في Fly ومستندات PostgresQL متعددة المناطق.

تأكد من تعيين متغير بيئة PRIMARY_REGION لتطبيقك. يمكنك استخدام التكوين [env] في fly.toml لتعيين ذلك إلى المنطقة التي تريد استخدامها كمنطقة أساسية لكل من التطبيق وقاعدة البيانات.

اختبار تطبيقك في مناطق أخرى

قم بتثبيت امتداد متصفح Modheader (أو شيء مشابه) واستخدمه لتحميل تطبيقك مع ضبط fly-prefer-region الرأس على اسم المنطقة التي ترغب في اختبارها.

يمكنك التحقق من رأس x-fly-region على الاستجابة لمعرفة المنطقة التي تم التعامل مع طلبك.

أفعال جيثب

نستخدم إجراءات github للتكامل المستمر والنشر. سيتم نشر أي شيء يدخل الفرع main في الإنتاج بعد إجراء الاختبارات/البناء/الخ. سيتم نشر أي شيء في فرع dev في التدريج.

قم ببناء صورة Docker يدويًا للنشر مع Fly.io

  • إنشاء شبكة Docker 
     docker network create app_network
  • بناء صورة Docker 
    pnpm docker:build:remix-app
  • قم بتشغيل صورة Docker 
    pnpm docker:run:remix-app
  • (OptionNal) إذا كنت ترغب في نشر يدويًا على Fly.io: 
    DOCKER_DEFAULT_PLATFORM=linux/amd64 flyctl deploy --config ./apps/remix-app/fly.toml --dockerfile ./apps/remix-app/Dockerfile

روابط Turborepo مفيدة

تعرف على المزيد حول قوة Turborepo:

  • خطوط الأنابيب
  • التخزين المؤقت
  • التخزين المؤقت عن بعد (بيتا)
  • مهام النطاق
  • خيارات التكوين
  • استخدام CLI

شكرًا

  • إعداد ESM مستوحى بشدة من الملحمة من قبل KentCdodds
  • بفضل shadcn لمكتبة المكونات المذهلة.
  • تم استعارة تكامل واجهة المستخدم وبعض الممارسات الجيدة بلا خجل من @JuliusMarminge Project Acme-Corp Monorepo

يدعم

إذا وجدت القالب مفيدًا ، فيرجى التفكير في إعطائه نجمة. يشكركم!

تنصل

أنا لست خبيرًا في Monorepo أو Docker أو CI. يعد الإعداد المقترح هنا واحدًا من بين العديد من الأشياء ، وربما يمكن تحسينها 10x ، لكنني أتعلم بنفسي على طول الطريق ، لذلك إذا رأيت أي تحسين محتمل ، فيرجى تقديم العلاقات العامة. سوف أقدر ذلك كثيرا!

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل