remix gospel stack

Remix Gospel Stack dengan Turborepo

Remix TypeScript Monorepo dengan pipa Turborepo, Prisma, PostgreSQL atau SQLite (LITEFS), Docker Deploy to Fly.io, PNPM, Shadcn/UI Tailwindcss.

QuickStart (disarankan)

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

? Repositori ini pendapat:

• Hanya naskah .
• Hanya kompatibel dengan manajer paket PNPM untuk menangani ruang kerja monorepo.
• Menggunakan Turborepo Pipelines + Cache untuk membangun, berbaris, Typecheck, dan menguji monorepo.

(Alternatif) mengkloning repositori

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

Apa yang ada di tumpukan

Tumpukan ini adalah monorepo berorientasi remix yang ditenagai oleh ruang kerja Turborepo dan PNPM. Berisi aplikasi Remix yang siap digunakan di fly.io melalui pembangunan wadah Docker.

Paket ini menggunakan pnpm sebagai manajer paket pilihan untuk mengelola ruang kerja. Ini mungkin berfungsi dengan yarn dan npm jika Anda memasukkan definisi ruang kerja di file package.json tetapi tidak ada jaminan.

Arsitektur Monorepo Didukung oleh Turborepo dan PNPM Workspaces:

• folder apps yang berisi aplikasi

  • remix-app : Aplikasi Remix.run di ESM.
  • remix-vercel : Aplikasi Remix.run, siap digunakan di Vercel.
  • nextjs-app : A Next.js App

• Folder packages yang berisi contoh

  • ui : Contoh paket reaksi UI ditenagai oleh shadcn/ui. Beberapa contoh komponen dan konfigurasi tailwind shadcn/ui diekspor sebagai plugin dan preset tailwind.
  • database : Pembungkus prisma yang siap digunakan dalam paket lain, atau aplikasi. Dibundel dengan tsup. Dapat menjadi postgresql atau sqlite // litefs tergantung pada apa yang Anda pilih selama instalasi.
  • business : Paket contoh menggunakan database prisma sebagai ketergantungan dan menggunakan pola repositori seperti contoh.
  • internal-nobuild : Paket contoh yang merupakan naskah murni tanpa langkah build. Titik entri main ke paket secara langsung src/index.ts . Remix mengurus kompilasi dengan langkah build -nya sendiri (dengan Esbuild). Paket ini juga berisi tes unit dengan Vitest. Remix menggunakan jalur tsconfig.json untuk mengacu pada proyek itu dan jenisnya. Saya akan merekomendasikan jenis paket internal ini ketika Anda tidak berencana untuk menerbitkan paket.

• config-packages :

  • Paket Eslint dengan konfigurasi preset yang berbeda.
  • Konfigurasi TS, juga dengan preset yang berbeda.
  • Konfigurasi Tailwind.

Semua bendera Remix Future diaktifkan:

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

Apa lagi?

• Aplikasi Remix Penyebaran Aplikasi Lalat Multi-Region dengan Docker
• Database hadir dalam 2 rasa yang Anda pilih saat menginstal:
  • Multi-Region Fly PostgreSQL Cluster
  • LITEFS - SQLite terdistribusi
• Remix App Healthcheck Endpoint untuk Fallback Wilayah Cadangan Terbang
• Tindakan GitHub untuk Menyebarkan Aplikasi Remix tentang Gabungan ke Lingkungan Produksi dan Pementasan.
• Pengujian ujung ke ujung dengan penulis naskah di aplikasi remix
• Pengujian unit dengan perpustakaan Vitest dan pengujian di dalam paket yang berbeda.
• Pemformatan kode dengan lebih cantik
• Tipe statis dengan naskah

PERINGATAN Semua perintah berikut harus diluncurkan dari Direktori Root Monorepo

Pengembangan

• Instal dependensi.

  pnpm install

  Anda juga harus menyalin contoh .env.example:

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

• Mulai wadah Docker PostgreSQL

  pnpm run docker:db

  Catatan: Skrip NPM akan selesai sementara Docker mengatur wadah di latar belakang. Pastikan Docker telah selesai dan wadah Anda berjalan sebelum melanjutkan.

• Menghasilkan skema prisma

  pnpm run generate

• Jalankan migrasi prisma ke database

  pnpm run db:migrate:deploy

• Jalankan bangunan pertama (dengan dependensi melalui ... opsi)

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

  Menjalankan Simply pnpm run build akan membangun semuanya, termasuk aplikasi NextJS.

• Jalankan server remix dev

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

Beralih antara PostgreSQL dan SQLite (LITEFS)

• Untuk beralih antara PostgreSQL dan SQLite (LITEFS), ada generator turbo yang dapat Anda gunakan dari akar repositori.

  pnpm turbo gen scaffold-database

  Kemudian ikuti petunjuknya. Hati -hati, migrasi prisma terkait dengan database tertentu, jadi Anda harus menghapus folder migrations .

  Catatan: Anda harus menjalankan pnpm i --fix-lockfile lagi setelah beralih ke SQLite (LITEFS) yang membutuhkan paket lain (Litefs-Js). Anda mungkin juga harus menjalankan pnpm run setup lagi untuk menghasilkan migrasi pertama.

Buat paket

Paket internal

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

Kemudian ikuti petunjuknya

Tes, typecheck, serat, instal paket ...

Periksa file turbo.json untuk melihat pipa yang tersedia.

• Jalankan tes Cypress dan dev

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

• Serat segalanya

  pnpm run lint

• Typecheck seluruh monorepo

  pnpm run typecheck

• Uji seluruh monorepo

  pnpm run test
  or
  pnpm run test:dev

• Bagaimana cara menginstal paket NPM di aplikasi Remix?

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

• Tweak TSConfigs, ESLint Configs di folder config-package . Paket atau aplikasi apa pun kemudian akan diperpanjang dari konfigurasi ini.

Penempatan di fly.io - PostgreSQL

PERINGATAN Semua perintah berikut harus diluncurkan dari Direktori Root Monorepo

Sebelum penempatan pertama Anda, Anda harus melakukan beberapa hal:

• Singup Pertama The Fly Cli

  fly auth signup

• Buat dua aplikasi dengan cepat, satu untuk pementasan dan satu untuk produksi:

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

  Catatan: Setelah Anda berhasil membuat aplikasi, periksa ulang file fly.toml untuk memastikan bahwa kunci app adalah nama aplikasi produksi yang Anda buat. Tumpukan ini secara otomatis menambahkan akhiran unik di Init yang mungkin tidak cocok dengan aplikasi yang Anda buat dengan cepat. Anda mungkin akan melihat 404 kesalahan dalam tindakan GitHub Anda log jika Anda memiliki ketidakcocokan ini.

• Inisialisasi git.

  git init

• Buat repositori GitHub baru, dan kemudian tambahkan sebagai remote untuk proyek Anda. Jangan dorong aplikasi Anda!

  git remote add origin < ORIGIN_URL >

• Tambahkan FLY_API_TOKEN ke repo github Anda. Untuk melakukan ini, buka pengaturan pengguna Anda dengan cepat dan buat token baru, lalu tambahkan ke rahasia repo Anda dengan nama FLY_API_TOKEN .

• Buat database untuk lingkungan pementasan dan produksi Anda:

Pembuatan Basis Data:

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

Catatan: Anda akan mendapatkan peringatan yang sama untuk alasan yang sama ketika melampirkan database pementasan yang Anda lakukan di langkah fly set secret di atas. Jangan khawatir. Melanjutkan!

Terbang akan mengurus mengatur rahasia DATABASE_URL untuk Anda.

Penempatan di fly.io - SQLite litefs

PERINGATAN Semua perintah berikut harus diluncurkan dari Direktori Root Monorepo

Sebelum penempatan pertama Anda, Anda harus melakukan beberapa hal:

• Singup Pertama The Fly Cli

  fly auth signup

• Buat dua aplikasi dengan cepat, satu untuk pementasan dan satu untuk produksi:

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

  Catatan: Setelah Anda berhasil membuat aplikasi, periksa ulang file fly.toml untuk memastikan bahwa kunci app adalah nama aplikasi produksi yang Anda buat. Tumpukan ini secara otomatis menambahkan akhiran unik di Init yang mungkin tidak cocok dengan aplikasi yang Anda buat dengan cepat. Anda mungkin akan melihat 404 kesalahan dalam tindakan GitHub Anda log jika Anda memiliki ketidakcocokan ini.

• Inisialisasi git.

  git init

• Buat repositori GitHub baru, dan kemudian tambahkan sebagai remote untuk proyek Anda. Jangan dorong aplikasi Anda!

  git remote add origin < ORIGIN_URL >

• Tambahkan FLY_API_TOKEN ke repo github Anda. Untuk melakukan ini, buka pengaturan pengguna Anda dengan cepat dan buat token baru, lalu tambahkan ke rahasia repo Anda dengan nama FLY_API_TOKEN .

Buat volume persisten untuk database SQLite untuk lingkungan pementasan dan produksi Anda. Jalankan yang berikut (jangan ragu untuk mengubah ukuran GB berdasarkan kebutuhan Anda dan wilayah pilihan Anda (https://fly.io/docs/reference/region/). Jika Anda mengubah wilayah tersebut, pastikan Anda mengubah primer_region di fly.toml juga):

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

Kemudian pasang volume ke aplikasi:

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

Mulai Coding!

Sekarang semuanya sudah diatur, Anda dapat melakukan dan mendorong perubahan Anda ke repo Anda. Setiap komit ke cabang main Anda akan memicu penyebaran ke lingkungan produksi Anda, dan setiap komit ke cabang dev Anda akan memicu penyebaran ke lingkungan pementasan Anda.

Jika Anda mengalami masalah apa pun yang digunakan untuk terbang, pastikan Anda telah mengikuti semua langkah di atas dan jika sudah, maka posting sebanyak mungkin detail tentang penyebaran Anda (termasuk nama aplikasi Anda) ke komunitas dukungan terbang. Mereka biasanya cukup responsif di sana dan mudah -mudahan dapat membantu menyelesaikan masalah dan pertanyaan penyebaran Anda.

Penyebaran multi-wilayah

Setelah situs dan database Anda berjalan di satu wilayah, Anda dapat menambahkan lebih banyak wilayah dengan mengikuti dokumen PostgreSQL SCALING DAN MULTI-REGRESQL.

Pastikan untuk mengatur variabel lingkungan PRIMARY_REGION untuk aplikasi Anda. Anda dapat menggunakan konfigurasi [env] di fly.toml untuk mengaturnya ke wilayah yang ingin Anda gunakan sebagai wilayah utama untuk aplikasi dan database Anda.

Menguji aplikasi Anda di daerah lain

Pasang ekstensi Modheader Browser (atau yang serupa) dan gunakan untuk memuat aplikasi Anda dengan header fly-prefer-region yang diatur ke nama wilayah yang ingin Anda uji.

Anda dapat memeriksa header x-fly-region pada tanggapan untuk mengetahui daerah mana permintaan Anda ditangani.

Tindakan GitHub

Kami menggunakan tindakan GitHub untuk integrasi dan penyebaran berkelanjutan. Apa pun yang masuk ke cabang main akan digunakan untuk produksi setelah menjalankan tes/build/dll. Apa pun di cabang dev akan dikerahkan ke pementasan.

Bangun gambar Docker secara manual untuk digunakan dengan fly.io

• Buat Jaringan Docker

   docker network create app_network
  

• Bangun gambar Docker

  pnpm docker:build:remix-app

• Jalankan gambar Docker

  pnpm docker:run:remix-app

• (Optionnal) Jika Anda ingin digunakan secara manual untuk terbang.io:

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

Tautan Turborepo yang Berguna

Pelajari lebih lanjut tentang kekuatan Turborepo:

• Saluran pipa
• Caching
• Caching jarak jauh (beta)
• Tugas -tugas yang dilingkupi
• Opsi Konfigurasi
• Penggunaan CLI

Terima kasih

• Pengaturan ESM sangat terinspirasi oleh Epic-Stack oleh @KentCDodds
• Terima kasih untuk @Shadcn untuk perpustakaan komponen yang luar biasa.
• Integrasi UI dan beberapa praktik yang baik dipinjam tanpa malu-malu dari @juliusmarminge proyek ACME-CORP Monorepo

Mendukung

Jika Anda menemukan template berguna, silakan pertimbangkan untuk memberikannya bintang. Terima kasih!

Penafian

Saya sama sekali bukan ahli di Monorepo, Docker atau CI. Pengaturan yang diusulkan di sini adalah salah satu dari banyak dan mungkin dapat ditingkatkan 10x, tetapi saya belajar sendiri di sepanjang jalan, jadi jika Anda melihat kemungkinan peningkatan, silakan kirim PR. Saya akan sangat menghargainya!