remix gospel stack

Remix Gospel Stack พร้อม turborepo

รีมิกซ์ typescript monorepo พร้อมท่อ turborepo, prisma, postgreSql หรือ sqlite (litefs), docker ปรับใช้เพื่อ 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 + cache เพื่อสร้าง, ผ้าสำลี, typecheck และทดสอบ monorepo

(ทางเลือก) การโคลนนิ่งที่เก็บ

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

มีอะไรอยู่ในสแต็ก

สแต็คนี้เป็นโมเนิร์โปแบบรีมิกซ์ที่ขับเคลื่อนโดย Turborepo และ PNPM Workspaces มีแอพ Remix Ready-To-Deploy On Fly.io ผ่านการสร้างคอนเทนเนอร์ Docker

แพ็คเกจนี้ ใช้ pnpm เป็นตัวจัดการแพ็คเกจ ที่เลือกในการจัดการพื้นที่ทำงาน มันอาจใช้งานได้กับ yarn และ npm หากคุณใส่คำจำกัดความของพื้นที่ทำงานในไฟล์ package.json แต่ไม่มีการรับประกัน

สถาปัตยกรรม Monorepo ขับเคลื่อนโดย Turborepo และ PNPM Workspaces:

• โฟลเดอร์ apps ที่มีแอปพลิเคชัน

  • remix-app : แอป Remix.run ใน ESM
  • remix-vercel : แอพ Remix.run พร้อมที่จะปรับใช้บน Vercel
  • nextjs-app : แอป next.js

• โฟลเดอร์ packages ที่มีตัวอย่าง

  • ui : ตัวอย่างแพ็คเกจ react UI ที่ขับเคลื่อนโดย Shadcn/UI ส่วนประกอบตัวอย่างบางส่วนและการกำหนดค่า tailwind shadcn/ui ส่งออกเป็นปลั๊กอิน tailwind และที่ตั้งไว้ล่วงหน้า
  • database : เสื้อคลุม Prisma พร้อมที่จะใช้ในแพ็คเกจอื่น ๆ หรือแอพ รวมกับ tsup สามารถเป็น PostgreSQL หรือ SQLITE // LITEFS ขึ้นอยู่กับสิ่งที่คุณเลือกระหว่างการติดตั้ง
  • business : แพ็คเกจตัวอย่างโดยใช้ database PRISMA เป็นการพึ่งพาและใช้ รูปแบบที่เก็บ เช่นตัวอย่าง
  • internal-nobuild : แพ็คเกจตัวอย่างที่เป็นตัวพิมพ์ใหญ่ที่ไม่มีขั้นตอนการสร้าง จุดเข้า main ของแพ็คเกจคือ src/index.ts โดยตรง Remix ดูแลการรวบรวมด้วยขั้นตอนการสร้างของตัวเอง (พร้อม Esbuild) แพ็คเกจนี้ยังมีการทดสอบหน่วยด้วย Vitest Remix ใช้เส้นทาง tsconfig.json เพื่ออ้างอิงถึงโครงการและประเภทของมัน ฉันอยากจะแนะนำแพ็คเกจ ภายใน ประเภทนี้เมื่อคุณไม่ได้วางแผนที่จะเผยแพร่แพ็คเกจ

• config-packages :

  • แพ็คเกจ ESLINT พร้อมการกำหนดค่าที่ตั้งไว้ล่วงหน้าที่แตกต่างกัน
  • TS configs ยังมีค่าที่ตั้งไว้ที่แตกต่างกัน
  • tailwind configs

การเปิดใช้งานธงในอนาคตทั้งหมดเปิดใช้งาน:

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

มีอะไรอีกบ้าง?

• การปรับใช้แอพพลิเคชั่น Multi-Region Fly App ด้วย Docker
• ฐานข้อมูลมี 2 รสชาติที่คุณเลือกที่ติดตั้ง:
  • คลัสเตอร์ PostgreSQL Multi-Region Fly
  • litefs - sqlite กระจาย
• REMIX APP HealthCheck Endpoint สำหรับการสำรองข้อมูลการสำรองข้อมูล
• การกระทำของ GitHub สำหรับการปรับใช้แอปรีมิกซ์เมื่อรวมกับสภาพแวดล้อมการผลิตและการจัดเตรียม
• การทดสอบแบบ end-to-end กับ Playwright ในแอพ Remix
• การทดสอบหน่วยด้วย Vitest และ Library การทดสอบภายในแพ็คเกจที่แตกต่างกัน
• การจัดรูปแบบรหัสด้วยสวยกว่า
• ชนิดคงที่ด้วย typeScript

คำเตือน คำสั่งต่อไปนี้ทั้งหมดควรเปิดตัวจาก ไดเรกทอรีราก monorepo

การพัฒนา

• ติดตั้งการพึ่งพา

  pnpm install

  คุณต้องคัดลอกตัวอย่าง. env.example:

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

• เริ่มคอนเทนเนอร์ PostgreSQL Docker

  pnpm run docker:db

  หมายเหตุ: สคริปต์ NPM จะเสร็จสมบูรณ์ในขณะที่ Docker ตั้งค่าคอนเทนเนอร์ในพื้นหลัง ตรวจสอบให้แน่ใจว่านักเทียบท่าเสร็จสิ้นและคอนเทนเนอร์ของคุณกำลังทำงานก่อนดำเนินการ

• สร้าง Schema Prisma

  pnpm run generate

• เรียกใช้การโยกย้าย PRISMA ไปยังฐานข้อมูล

  pnpm run db:migrate:deploy

• เรียกใช้การสร้างแรก (พร้อมการพึ่งพาผ่านตัวเลือก ...

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

  การเรียกใช้ pnpm run build เพียงแค่สร้างทุกอย่างรวมถึงแอพ NextJS

• รันเซิร์ฟเวอร์ Remix Dev

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

สลับระหว่าง postgreSQL และ sqlite (litefs)

• ในการสลับระหว่าง PostgreSQL และ SQLITE (LITEF) มีเครื่องกำเนิดเทอร์โบที่คุณสามารถใช้ได้จากรูทของที่เก็บ

  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 เพื่อดูท่อส่งที่มีอยู่

• เรียกใช้การทดสอบไซเปรสและ dev

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

• ผ้าสำลีทุกอย่าง

  pnpm run lint

• typecheck monorepo ทั้งหมด

  pnpm run typecheck

• ทดสอบ monorepo ทั้งหมด

  pnpm run test
  or
  pnpm run test:dev

• จะติดตั้งแพ็คเกจ NPM ในแอพ Remix ได้อย่างไร?

  pnpm add dayjs --filter @remix-gospel-stack/remix-app

• ปรับแต่ง tsconfigs, eslint configs ในโฟลเดอร์ config-package แพ็คเกจหรือแอพใด ๆ จะขยายจากการกำหนดค่าเหล่านี้

การปรับใช้ On Fly.io - PostgreSQL

คำเตือน คำสั่งต่อไปนี้ทั้งหมดควรเปิดตัวจาก ไดเรกทอรีราก monorepo

ก่อนการปรับใช้ครั้งแรกของคุณคุณจะต้องทำบางสิ่ง:

• Singup Fly Fly CLI

  fly auth signup

• สร้างแอพสองแอพที่ Fly หนึ่งสำหรับการจัดเตรียมและอีกอันสำหรับการผลิต:

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

  หมายเหตุ: เมื่อคุณสร้างแอปสำเร็จให้ตรวจสอบไฟล์ fly.toml ได้สำเร็จเพื่อให้แน่ใจว่าคีย์ app คือชื่อของแอพที่คุณสร้าง สแต็กนี้จะผนวกคำต่อท้ายที่ไม่ซ้ำกันโดยอัตโนมัติที่ Init ซึ่งอาจไม่ตรงกับแอพที่คุณสร้างขึ้นเมื่อ Fly คุณอาจเห็นข้อผิดพลาด 404 ข้อในการกระทำของคุณ GitHub บันทึก CI หากคุณมีความไม่ตรงกันนี้

• เริ่มต้น Git

  git init

• สร้างที่เก็บ GitHub ใหม่แล้วเพิ่มเป็นรีโมทสำหรับโครงการของคุณ อย่าผลักแอพของคุณ!

  git remote add origin < ORIGIN_URL >

• เพิ่ม FLY_API_TOKEN ลงใน repo github ของคุณ ในการทำเช่นนี้ให้ไปที่การตั้งค่าผู้ใช้ของคุณเมื่อและสร้างโทเค็นใหม่จากนั้นเพิ่มลงในความลับ repo ของคุณด้วยชื่อ 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 Secret สำหรับคุณ

การปรับใช้ on fly.io - sqlite litefs

คำเตือน คำสั่งต่อไปนี้ทั้งหมดควรเปิดตัวจาก ไดเรกทอรีราก monorepo

ก่อนการปรับใช้ครั้งแรกของคุณคุณจะต้องทำบางสิ่ง:

• Singup Fly Fly CLI

  fly auth signup

• สร้างแอพสองแอพที่ Fly หนึ่งสำหรับการจัดเตรียมและอีกอันสำหรับการผลิต:

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

  หมายเหตุ: เมื่อคุณสร้างแอปสำเร็จให้ตรวจสอบไฟล์ fly.toml ได้สำเร็จเพื่อให้แน่ใจว่าคีย์ app คือชื่อของแอพที่คุณสร้าง สแต็กนี้จะผนวกคำต่อท้ายที่ไม่ซ้ำกันโดยอัตโนมัติที่ Init ซึ่งอาจไม่ตรงกับแอพที่คุณสร้างขึ้นเมื่อ Fly คุณอาจเห็นข้อผิดพลาด 404 ข้อในการกระทำของคุณ GitHub บันทึก CI หากคุณมีความไม่ตรงกันนี้

• เริ่มต้น Git

  git init

• สร้างที่เก็บ GitHub ใหม่แล้วเพิ่มเป็นรีโมทสำหรับโครงการของคุณ อย่าผลักแอพของคุณ!

  git remote add origin < ORIGIN_URL >

• เพิ่ม FLY_API_TOKEN ลงใน repo github ของคุณ ในการทำเช่นนี้ให้ไปที่การตั้งค่าผู้ใช้ของคุณเมื่อและสร้างโทเค็นใหม่จากนั้นเพิ่มลงในความลับ repo ของคุณด้วยชื่อ FLY_API_TOKEN

สร้างปริมาณถาวรสำหรับฐานข้อมูล SQLite สำหรับทั้งสภาพแวดล้อมการจัดเตรียมและการผลิตของคุณ เรียกใช้สิ่งต่อไปนี้ (อย่าลังเลที่จะเปลี่ยนขนาด GB ตามความต้องการของคุณและภูมิภาคที่คุณเลือก (https://fly.io/docs/reference/regions/) หากคุณเปลี่ยนภูมิภาคให้แน่ใจว่าคุณเปลี่ยน primary_region ใน fly.toml เช่นกัน):

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

เริ่มเขียนโค้ด!

ตอนนี้ทุกอย่างถูกตั้งค่าแล้วคุณสามารถกระทำและผลักดันการเปลี่ยนแปลงของคุณไปยัง repo ของคุณ ทุกที่มุ่งมั่นในสาขา main ของคุณจะกระตุ้นให้มีการปรับใช้กับสภาพแวดล้อมการผลิตของคุณและทุกที่มุ่งมั่นในสาขา dev ของคุณจะกระตุ้นให้มีการปรับใช้กับสภาพแวดล้อมการแสดงละครของคุณ

หากคุณพบปัญหาใด ๆ ในการปรับใช้เพื่อบินตรวจสอบให้แน่ใจว่าคุณได้ทำตามขั้นตอนทั้งหมดด้านบนและหากคุณมีให้โพสต์รายละเอียดมากมายเกี่ยวกับการปรับใช้ของคุณ (รวมถึงชื่อแอปของคุณ) ไปยังชุมชนสนับสนุนการบิน โดยปกติแล้วพวกเขาจะตอบสนองได้ค่อนข้างมากและหวังว่าจะสามารถช่วยแก้ไขปัญหาและคำถามการปรับใช้ของคุณได้

การปรับใช้หลายภูมิภาค

เมื่อคุณมีเว็บไซต์และฐานข้อมูลของคุณทำงานในภูมิภาคเดียวคุณสามารถเพิ่มภูมิภาคเพิ่มเติมได้โดยทำตามการปรับขนาดของ Fly และ Multi-Region PostgreSQL

ตรวจสอบให้แน่ใจว่าตั้งค่าตัวแปรสภาพแวดล้อม PRIMARY_REGION สำหรับแอปของคุณ คุณสามารถใช้ [env] config ใน The fly.toml เพื่อตั้งค่าเป็นภูมิภาคที่คุณต้องการใช้เป็นภูมิภาคหลักสำหรับทั้งแอปและฐานข้อมูลของคุณ

ทดสอบแอปของคุณในภูมิภาคอื่น ๆ

ติดตั้งส่วนขยายของเบราว์เซอร์ Modheader (หรือสิ่งที่คล้ายกัน) และใช้เพื่อโหลดแอปของคุณด้วยส่วนหัวที่ตั้ง fly-prefer-region ที่ตั้งไว้ในชื่อภูมิภาคที่คุณต้องการทดสอบ

คุณสามารถตรวจสอบส่วนหัว x-fly-region ในการตอบสนองเพื่อทราบว่าคำขอของคุณได้รับการจัดการโดยภูมิภาคใด

การกระทำของ GitHub

เราใช้การกระทำของ GitHub สำหรับการรวมและการปรับใช้อย่างต่อเนื่อง สิ่งใดก็ตามที่เข้าสู่สาขา main จะถูกนำไปใช้กับการผลิตหลังจากเรียกใช้การทดสอบ/สร้าง/ฯลฯ อะไรก็ตามในสาขา dev จะถูกนำไปใช้ในการจัดเตรียม

สร้างภาพนักเทียบท่าด้วยตนเองเพื่อปรับใช้ด้วย fly.io

• สร้างเครือข่ายนักเทียบท่า

   docker network create app_network
  

• สร้างภาพนักเทียบท่า

  pnpm docker:build:remix-app

• เรียกใช้อิมเมจนักเทียบท่า

  pnpm docker:run:remix-app

• (ตัวเลือก) หากคุณต้องการปรับใช้เพื่อ fly.io ด้วยตนเอง:

  DOCKER_DEFAULT_PLATFORM=linux/amd64 flyctl deploy --config ./apps/remix-app/fly.toml --dockerfile ./apps/remix-app/Dockerfile

ลิงค์ turborepo ที่มีประโยชน์

เรียนรู้เพิ่มเติมเกี่ยวกับพลังของ turborepo:

• ท่อส่งน้ำ
• การแคช
• การแคชระยะไกล (เบต้า)
• งานที่กำหนดขอบเขต
• ตัวเลือกการกำหนดค่า
• การใช้งาน CLI

ขอบคุณ

• การตั้งค่า ESM ได้รับแรงบันดาลใจอย่างมากจาก Epic-Stack โดย @KentCDodds
• ขอบคุณ @shadcn สำหรับไลบรารีส่วนประกอบที่น่าทึ่ง
• การรวม UI และแนวทางปฏิบัติที่ดีบางอย่างได้รับการยืมอย่างไร้ยางอายจาก @juliusmarminge Project Acme-Corp Monorepo

สนับสนุน

หากคุณพบว่าเทมเพลตมีประโยชน์โปรดพิจารณาให้ดาว ขอบคุณ!

คำเตือน

ฉันไม่เคยเป็นผู้เชี่ยวชาญเกี่ยวกับ Monorepo, Docker หรือ CI การตั้งค่าที่เสนอที่นี่เป็นหนึ่งในหลาย ๆ อย่างและอาจได้รับการปรับปรุง 10x แต่ฉันกำลังเรียนรู้ด้วยตัวเองตลอดทางดังนั้นหากคุณเห็นการปรับปรุงที่เป็นไปได้โปรดส่ง PR ฉันจะขอบคุณมันอย่างมาก!