Vite, Cloudflare, Remix, PNPM ve Turborepo ile Monorepo Nasıl Oluşturulur (Derleme Adımı Yok)

giriiş Remix'i Vite ve Cloudflare Workers-Pages ile minimum yapılandırmayla kullanmanın bir yoluna ihtiyacım vardı. Diğer depoları da gördüm, örneğin: , İncil yığını , Girish21 . Himorişige Ancak bazı sınırlamaları vardı: Önceden derlemek istemedim, çünkü daha fazla yapılandırma dosyasıyla depoları zehirlemek istemedim. Cloudflare Workers/Pages'ın farklı bir hedefi var. Postgres gibi paketler Remix'e aktarıldığında düğüm bağımlılıklarını bozarak çekeceğinden, tsup ile hedeflemek zorlaştı. Ayrıca farklı hedefleri (Remix-Cloudflare, Node/Bun) tüketmenin bir yoluna ihtiyacım vardı Yine de onlara teşekkür ediyorum, çünkü bu başarının önünü açtılar! Alt taraftaki tuzaklar bölümünü mutlaka okuyun! Beni Sosyal Medyada Takip Edin! Üretimdeki %1'lik hataları yakalamak için kamuya açık bir otomatik test platformu kuruyorum. İlerlememi şu şekilde paylaşıyorum: X/Twitter @javiasilis LinkedIn @javiasilis GitHub Deposu ulaşabilirsiniz. Uygulamanın tamamına buradan Adım adım Gereksinimler DüğümJS PNPM Docker (İsteğe bağlı - Yerel veritabanı örneği için) Bu sizi yeni bir mono-depoda gezdirse de, var olan bir mono-depoyu tek bir mono-depoya dönüştürmek de tamamen geçerlidir. Bu aynı zamanda mono repo konusunda da bilgi sahibi olduğunuzu varsayar. Not: “at root” monorepository’nizin başlangıç yolunu ifade eder. Bu proje için, ve dizinlerinin dışında olacaktır. libs packages Turborepo'yu yükleyin Turborepo, projenizin betiklerini ve çıktılarını yönetmek için paket yöneticinizin çalışma alanlarının üstünde çalışır (hatta çıktınızı önbelleğe alabilir). Şimdiye kadar, Rush'ın (denemediğim ve sevmediğim) dışında çalışabilen tek mono-repo aracıdır. NX'te Remix'in Vite desteği yok (bu yazının yazıldığı tarih itibarıyla - 28 Ağustos 2024). https://turbo.build/ pnpm dlx create-turbo@latest 1. PNPM Çalışma Alanlarını Yapılandırın Bağımlılıkları yönetmek için PNPM'nin çalışma alanı yeteneklerini kullanacağız. Monorepo dizininizde oluşturun. pnpm-workspace.yaml İçine şunu ekleyin: packages: - "apps/*" - "libs/*" Bu pnpm'e tüm depoların ve içinde yer alacağını söyleyecektir. veya kullanmanın (başka bir yerde görmüş olabileceğiniz gibi) bir önemi olmadığını unutmayın. apps libs libs packages 2. Projenin Kök Dizininde Boş Bir package.json Oluşturun: pnpm init { "name": "@repo/main", "version": "1.0.0", "scripts": {}, "keywords": [], "author": "", "license": "ISC" } Bu bize bunun uygulamanın ana girişi olduğunu söyler. Belirli bir kuralı takip etmeniz veya önekini kullanmanız gerekmez. İnsanlar bunu yerel/uzak paketlerden ayırt etmek veya bir organizasyonda gruplandırmayı kolaylaştırmak için kullanırlar. name:@repo/main @ 3. Projenin Kök Dizininde Dosyasını Oluşturun: turbo.json { "$schema": "https://turbo.build/schema.json", "tasks": { "build": {}, "dev": { "cache": false, "persistent": true }, "start": { "dependsOn": ["^build"], "persistent": true }, "preview": { "cache": false, "persistent": true }, "db:migrate": {} } } turbo.json dosyası turbo deposuna komutlarımızı nasıl yorumlayacağını söyler. anahtarının içinde bulunan her şey all package.json'da bulunanlarla eşleşecektir. tasks Dört komut tanımladığımızı unutmayın. Bunlar her deponun package.json dosyasının script bölümündekilerle eşleşir. Ancak, tüm package.json dosyaları bu komutları uygulamak zorunda değildir. Örn: komutu tarafından tetiklenecek ve package.json içinde bulunan tüm paketleri çalıştıracaktır. Eğer bunu turbo'ya dahil etmezseniz, çalıştırılmayacaktır. dev turbo dev dev 4. Projenin Kökünde bir klasörü oluşturun apps mkdir apps 5. klasöründe bir Remix Uygulaması oluşturun (veya mevcut olanı taşıyın) apps npx create-remix --template edmundhung/remix-worker-template istediğinde hayır deyin. Install any dependencies with npm 6. package.json dosyasının (veya kendi adınız) olarak değiştirin. name @repo/my-remix-cloudflare-app { - "name": "my-remix-cloudflare-app", + "name": "@repo/my-remix-cloudflare-app", "version": "1.0.0", "keywords": [], "author": "", "license": "ISC" } 7. Bağımlılıkları ve devDependencies'i Root'un kopyalayın apps/ /package.json package.json Örn: /paket.json { "name": "@repo/main", "version": "1.0.0", "scripts": {}, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@markdoc/markdoc": "^0.4.0", "@remix-run/cloudflare": "^2.8.1", "@remix-run/cloudflare-pages": "^2.8.1", "@remix-run/react": "^2.8.1", "isbot": "^3.6.5", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@cloudflare/workers-types": "^4.20240222.0", "@octokit/types": "^12.6.0", "@playwright/test": "^1.42.1", "@remix-run/dev": "^2.8.1", "@remix-run/eslint-config": "^2.8.1", "@tailwindcss/typography": "^0.5.10", "@types/react": "^18.2.64", "@types/react-dom": "^18.2.21", "autoprefixer": "^10.4.18", "concurrently": "^8.2.2", "cross-env": "^7.0.3", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "husky": "^9.0.11", "lint-staged": "^15.2.2", "msw": "^2.2.3", "postcss": "^8.4.35", "prettier": "^3.2.5", "prettier-plugin-tailwindcss": "^0.5.12", "rimraf": "^5.0.5", "tailwindcss": "^3.4.1", "typescript": "^5.4.2", "vite": "^5.1.5", "vite-tsconfig-paths": "^4.3.1", "wrangler": "^3.32.0" } } 8. Turbo'yu kök seviyesine devDependency olarak ekleyin (Bu, Remix'in tüm paketlerini yükleyecektir). Turbo'nun package.json'ın devDependencies'inde olduğunu doğrulayın. Listelenmemişse, aşağıdaki komutu çalıştırın: pnpm add turbo -D -w bayrağı pnpm'e bunu çalışma alanı köküne kurmasını söyler. -w 9. Root package.json'a aşağıdaki girdileri ekleyin komutunu ekleyin dev scripts seçeneğe ekleyin packageManager { "name": "@repo/main", "version": "1.0.0", "scripts": { "dev": "turbo dev" }, "keywords": [], "author": "", "license": "ISC", "packageManager": "pnpm@9.1.0", "dependencies": { // omitted for brevity }, "devDependencies": { // omitted for brevity } } 10. komutunu çalıştırarak her şeyin çalıştığını doğrulayın pnpm dev pnpm dev 11. Projenin Kökünde bir Libs Klasörü Oluşturun. config, db ve utils ekleyin: mkdir -p libs/config libs/db libs/utils 12. Paketlerin her biri için ekleyin. src/index.ts touch libs/config/src/index.ts libs/db/src/index.ts libs/utils/src/index.ts Tüm paketleri dışarı aktarmak için index.ts dosyası kullanılacaktır. Her şeyi kompakt hale getirmek için klasörü giriş noktamız olarak kullanacağız. Bu bir kuraldır ve buna uymamayı seçebilirsiniz. 13. Boş bir package.json dosyası oluşturun ve dosyasına aşağıdakileri ekleyin: libs/config/package.json { "name": "@repo/config", "version": "1.0.0", "type": "module", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } } 14. Aynısını için de yapın: libs/db/package.json { "name": "@repo/db", "version": "1.0.0", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } } 15. Ve : libs/utils/package.json { "name": "@repo/utils", "version": "1.0.0", "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } } } "Exports" alanını belirtiyoruz. Bu, diğer depolara paketi nereden içe aktaracaklarını söyler. "Ad" alanını belirtiyoruz. Bu, paketi yüklemek ve diğer depolara yönlendirmek için kullanılır. 16. (DB) - Drizzle ve Postgres'i ekleyin Notlar: ORM'lerden nefret etmeye başlıyorum. 6 farklı ORM öğrenmek için 10 yıldan fazla zaman harcadım ve bunlar aktarılamayan bilgiler. Yeni teknolojiler çıktığında sorunlar yaşıyorsunuz. Prisma, Cloudflare çalışanlarını anında desteklemiyor. LLM sayesinde karmaşık SQL sorguları yazmak her zamankinden daha kolay. SQL öğrenmek evrensel bir dildir ve büyük olasılıkla değişmeyecektir. pnpm add drizzle-orm drizle-kit --filter=@repo/db Postgres'i çalışma alanı düzeyinde yükleyin. . Pitfall bölümüne bakın pnma add postgres -w Notlar: bayrağı pnpm'e paketi db deposuna eklemesini söyler. --filter=@repo/db 17. Dotenv'i Workspace Deposuna ekleyin pnpm add dotenv -w Notlar bayrağı pnpm'e bunu root'un package.json dosyasına kurmasını söyler -w 18. Yapılandırma Projesini Tüm Projelere Ekleyin. pnpm add @repo/config -r --filter=!@repo/config : Notlar bayrağı pnpm'e paketi tüm depolarına eklemesini söyler. -r bayrağı pnpm'e yapılandırma deposunu hariç tutmasını söyler. --filter=! Paket adından önceki işaretine dikkat edin ! 19. (İsteğe bağlı) Yukarıdaki Komutlar Çalışmıyor mu? .npmrc kullanın Eğer pnpm paketleri depodan çekiyorsa, projenin kökünde bir dosyası oluşturabiliriz. .npmrc .npmrc link-workspace-packages= true prefer-workspace-packages=true Bu, pnpm'e öncelikle çalışma alanı paketlerini kullanmasını söyleyecektir. .nprmc dosyasını oluşturmama yardımcı olan Reddit'ten teşekkürler ZoWnx'e 20. Libs/Config İçinde Paylaşılan Yapılandırın tsconfig.json Pnpm çalışma alanlarının gücünü kullanarak, projeler arasında paylaşılabilen yapılandırma dosyaları oluşturabilirsiniz. Kütüphanelerimiz için kullanacağımız temel tsconfig.lib.json'ı oluşturacağız. içerisinde dosyasını oluşturun: libs/config tsconfig.lib.json touch "libs/config/tsconfig.base.lib.json" Daha sonra şunu ekleyin: tsconfig.base.lib.json { "$schema": "https://json.schemastore.org/tsconfig", "compilerOptions": { "lib": ["ES2022"], "module": "ESNext", "moduleResolution": "Bundler", "resolveJsonModule": true, "target": "ES2022", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "allowImportingTsExtensions": true, "allowJs": true, "noUncheckedIndexedAccess": true, "noEmit": true, "incremental": true, "composite": false, "declaration": true, "declarationMap": true, "inlineSources": false, "isolatedModules": true, "noUnusedLocals": false, "noUnusedParameters": false, "preserveWatchOutput": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "sourceMap": true, } } 21. db Bağlantısını db Deposuna ekleyin. // libs/db/drizzle.config.ts (Yes, this one is at root of the db package, outside the src folder) // We don't want to export this file as this is ran at setup. import "dotenv/config"; // make sure to install dotenv package import { defineConfig } from "drizzle-kit"; export default defineConfig({ dialect: "postgresql", out: "./src/generated", schema: "./src/drizzle/schema.ts", dbCredentials: { url: process.env.DATABASE_URL!, }, // Print all statements verbose: true, // Always ask for confirmation strict: true, }); Şema dosyası: // libs/db/src/drizzle/schema.ts export const User = pgTable("User", { userId: char("userId", { length: 26 }).primaryKey().notNull(), subId: char("subId", { length: 36 }).notNull(), // We are not making this unique to support merging accounts in later // iterations email: text("email"), loginProvider: loginProviderEnum("loginProvider").array().notNull(), createdAt: timestamp("createdAt", { precision: 3, mode: "date" }).notNull(), updatedAt: timestamp("updatedAt", { precision: 3, mode: "date" }).notNull(), }); Müşteri dosyası: // libs/db/src/drizzle-client.ts import { drizzle, PostgresJsDatabase } from "drizzle-orm/postgres-js"; import postgres from "postgres"; import * as schema from "./schema"; export type DrizzleClient = PostgresJsDatabase ; let drizzleClient: DrizzleClient | undefined; type GetClientInput = { databaseUrl: string; env: string; mode?: "cloudflare" | "node"; }; declare var window: typeof globalThis; declare var self: typeof globalThis; export function getDrizzleClient(input: GetClientInput) { const { mode, env } = input; if (mode === "cloudflare") { return generateClient(input); } const globalObject = typeof globalThis !== "undefined" ? globalThis : typeof global !== "undefined" ? global : typeof window !== "undefined" ? window : self; if (env === "production") { drizzleClient = generateClient(input); } else if (globalObject) { if (!(globalObject as any).__db__) { (globalObject as any).__db__ = generateClient(input); } drizzleClient = (globalObject as any).__db__; } else { drizzleClient = generateClient(input); } return drizzleClient; } type GenerateClientInput = { databaseUrl: string; env: string; }; function generateClient(input: GenerateClientInput) { const { databaseUrl, env } = input; const isLoggingEnabled = env === "development"; // prepare: false for serverless try { const client = postgres(databaseUrl, { prepare: false }); const db = drizzle(client, { schema, logger: isLoggingEnabled }); return db; } catch (e) { console.log("ERROR", e); return undefined!; } } Göç dosyası: // libs/db/src/drizzle/migrate.ts import { config } from "dotenv"; import { migrate } from "drizzle-orm/postgres-js/migrator"; import postgres from "postgres"; import { drizzle } from "drizzle-orm/postgres-js"; import "dotenv/config"; import path from "path"; config({ path: "../../../../apps/my-remix-cloudflare-app/.dev.vars" }); const ssl = process.env.ENVIRONMENT === "development" ? undefined : "require"; const databaseUrl = drizzle( postgres(`${process.env.DATABASE_URL}`, { ssl, max: 1 }) ); // Somehow the current starting path is /libs/db // Remember to have the DB running before running this script const migration = path.resolve("./src/generated"); const main = async () => { try { await migrate(databaseUrl, { migrationsFolder: migration, }); console.log("Migration complete"); } catch (error) { console.log(error); } process.exit(0); }; main(); Bu, göçlerden sonra yürütülmelidir Ve istemciyi ve şemayı dosyasına aktarın. Diğerleri belirli zamanlarda çalıştırılır. src/index.ts // libs/db/src/index.ts export * from "./drizzle/drizzle-client"; export * from "./drizzle/schema " dosyanıza komutunu ve geçiş komutunu çalıştıracak kodu ekleyin: package.json drizzle-kit generate { "name": "@repo/db", "version": "1.0.0", "main": "./src/index.ts", "module": "./src/index.ts", "types": "./src/index.ts", "scripts": { "db:generate": "drizzle-kit generate", "db:migrate": "dotenv tsx ./drizzle/migrate", }, "exports": { ".": { "import": "./src/index.ts", "default": "./src/index.ts" } }, "dependencies": { "@repo/configs": "workspace:^", "drizzle-kit": "^0.24.1", "drizzle-orm": "^0.33.0", }, "devDependencies": { "@types/node": "^22.5.0" } } 22. ve için Paylaşılan kullanın libs/db libs/utils tsconfig.json ve için bir tsconfig.json oluşturun libs/db libs/utils touch "libs/db/tsconfig.json" "libs/utils/tsconfig.json" Sonra her birine şunu ekleyin: { "extends": "@repo/configs/tsconfig.base.lib.json", "include": ["./src"], } tsconfig.base.lib.json dosyamıza referans vermek için kullanılan yol olduğunu görün. @repo/configs Yolumuzu temizler. 23. TSX'i yükleyin TypeScript Execute (TSX), ts-node'a bir kütüphane alternatifidir. Bunu, drizzle'ın geçişlerini yürütmek için kullanacağız. pnpm add tsx -D --filter=@repo/db 24. dizinine boş bir .env ekleyin libs/db touch "libs/db/.env" Aşağıdaki içerikleri ekleyin: DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres" NODE_ENV="development" MODE="node" 25. Deposunu Remix Projemize Ekleyin libs/db Projenin kökünden şunu çalıştırın: pnpm add @repo/db --filter=@repo/my-remix-cloudflare-app Eğer bu işe yaramazsa, dosyasının package.json dosyasına gidin ve bağımlılığı manuel olarak ekleyin. apps/my-remix-cloudflare-app { "name": "@repo/my-remix-cloudflare-app", "version": "1.0.0", "dependencies": { "@repo/db": "workspace:*" } } Sürüm alanında i not edin. Bu, pnpm'e çalışma alanındaki paketin herhangi bir sürümünü kullanmasını söyler. workspace:* Eğer muhtemelen gibi bir şey göreceksiniz. Yerel paket sürümlerini artırmadığınız sürece sorun olmamalı. pnpm add, workspace:^ Eğer bunu manuel olarak eklediyseniz, projenin kökünden çalıştırın. pnpm install @repo/db'yi projemizde tüketebilmeliyiz. 26. Yardımcı Programlarımıza Bazı Paylaşımlı Kodlar Ekleyin: Bu kodu dosyasına ekleyin: libs/utils/src/index.ts // libs/utils/src/index.ts export function hellowWorld() { return "Hello World!"; } 27. Libs/Utils'ı Remix Uygulamamıza yükleyin: pnpm add @repo/db --filter=@repo/my-remix-cloudflare-app 28. (İsteğe bağlı) Bir Docker Konteynerinden Postgres Başlatma Çalışan bir Postgres örneğiniz yoksa, docker-compose kullanarak bir tane başlatabiliriz. Docker'ı bildiğinizi varsayıyorum. Projenin kökünde dosyasını oluşturun. docker-compose.yml # Auto-generated docker-compose.yml file. version: '3.8' # Define services. services: postgres: image: postgres:latest restart: always environment: - POSTGRES_USER=postgres - POSTGRES_PASSWORD=postgres - POSTGRES_DB=postgres ports: - "5432:5432" volumes: - ./postgres-data:/var/lib/postgresql/data pgadmin: # To connect PG Admin, navigate to http://localhost:8500 use: # host.docker.internal # postgres # (username) postgres # (password) postgres image: dpage/pgadmin4 ports: - "8500:80" environment: PGADMIN_DEFAULT_EMAIL: admin@a.com PGADMIN_DEFAULT_PASSWORD: admin Daha sonra şunu çalıştırabilirsiniz: docker-compose up -d bayrağı docker-compose'a bağımsız çalışmasını söyler, böylece terminalinize tekrar erişebilirsiniz. -d 29. DB Şemasını Oluşturun Şimdi libs/db deposuna gidin ve çalıştırın. db:generate cd `./libs/db` && pnpm db:generate için bir takma ad olduğunu unutmayın db:generate drizzle-kit generate Uygun .env'ye sahip olduğunuzu doğrulayın. Ayrıca, bu, bir Postgres örneğinizin çalıştığını varsayar. 30. Göçleri çalıştırın. Veritabanımızdaki tüm tabloları desteklemek için göçleri çalıştırmamız gerekiyor. libs/db deposuna gidin (orada değilseniz) ve çalıştırın. db:generate cd `./libs/db` && pnpm db:migrate için bir takma ad olduğunu unutmayın db:migrate dotenv tsx ./drizzle/migrate Uygun .env'ye sahip olduğunuzu doğrulayın. Ayrıca, bu, bir Postgres örneğinizin çalıştığını varsayar. 31. Remix Uygulamanıza Bir DB Çağrısı Ekleyin. // apps/my-remix-cloudflare-app/app/routes/_index.tsx import type { LoaderFunctionArgs } from '@remix-run/cloudflare'; import { json, useLoaderData } from '@remix-run/react'; import { getDrizzleClient } from '@repo/db'; import { Markdown } from '~/components'; import { getFileContentWithCache } from '~/services/github.server'; import { parse } from '~/services/markdoc.server'; export async function loader({ context }: LoaderFunctionArgs) { const client = await getDrizzleClient({ databaseUrl: context.env.DATABASE_URL, env: 'development', mode: 'cloudflare', }); if (client) { const res = await client.query.User.findFirst(); console.log('res', res); } const content = await getFileContentWithCache(context, 'README.md'); return json( { content: parse(content), // user: firstUser, }, { headers: { 'Cache-Control': 'public, max-age=3600', }, }, ); } export default function Index() { const { content } = useLoaderData (); return ; } Burada en iyi uygulamaları takip etmediğimizi unutmayın. Yükleyiciniz içerisinde doğrudan herhangi bir DB çağrısı yapmamanızı, bunun yerine onları çağıran bir soyutlama oluşturmanızı öneririm. Cloudflare, ortam değişkenlerini ayarlama konusunda zorludur. Bunlar istekle iletilir 32. .dev.vars dosyanıza aşağıdakileri ekleyin: uygulamalar/benim-remix-cloudflare-uygulamam/.dev.vars DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres" 33. Remix Projesini Yürütün! Postgres örneğini başlatın (hazır değilse) docker-compose up -d Projeyi başlatın pnpm turbo dev Gelişmiş Kullanım Örneği - Cloudflare Workers'daki GetLoadContext'te CQRS. Projelerimde uygulamaya çalışıyorum, Bu, bu eğitimin kapsamı dışındadır. CQRS desenini 2. Bununla birlikte, yükleme bağlamı içerisinde, tüm Remix Uygulamamı iş mantığımdan ayıracak bir aracı (ve bir çerez flaş mesajı) enjekte etme eğilimindeyim. Bu şuna benzer bir şey: export const getLoadContext: GetLoadContext = async ({ context, request }) => { const isEnvEmpty = Object.keys(context.cloudflare.env).length === 0; const env = isEnvEmpty ? process.env : context.cloudflare.env; const sessionFlashSecret = env.SESSION_FLASH_SECRET; const flashStorage = createCookieSessionStorage({ cookie: { name: "__flash", httpOnly: true, maxAge: 60, path: "/", sameSite: "lax", secrets: [sessionFlashSecret], secure: true, }, }); return { ...context, cloudflare: { ...context.cloudflare, env, }, dispatch: (await dispatchWithContext({ env: env as unknown as Record , request, })) as Dispatch, flashStorage, }; }; Dağıtım kodunun atlandığını unutmayın. TypeScript geliştirme deneyiminizi 10 katına çıkarma hakkında daha fazla bilgiyi makalemde bulabilirsiniz. buradaki Kodumu değiştirmeden Remix'i kaldırabilir veya başka bir tüketici kullanabilirim. Ancak…. Turborepo kullanarak monorepo yapısında çalıştığınızda ek bir zorluk daha ortaya çıkar. Örneğin, load-context içindeki bir paketten bir TypeScript dosyası içe aktarırsanız, Vite'ın uzantılı dosyanın bilinmediğine dair bir hata döndüreceğini ve onu nasıl işleyeceğini bilemeyeceğini varsayalım. @repo/db .ts Bunun nedeni, yükleme bağlamı + çalışma alanlarının sitenin ana içe aktarma grafiğinin dışında olması ve TypeScript dosyalarının oyunun dışında kalmasıdır. İşin püf noktası kullanmak ve Vite'ı çağırmadan yüklemektir, bu işe yarayacaktır. Bu önemlidir çünkü aşağıdaki sınırlamaları aşar: tsx önce Cloudflare Paket Bağımlılıkları. Cloudflare Paket Bağımlılıkları ve Ön Yapı Öncelikle kaçınmaya çalıştığım adım buydu, çünkü bu, paketlerin her biri için bir derleme adımı eklemem gerektiği anlamına geliyordu ve bu da daha fazla yapılandırma anlamına geliyordu. Neyse ki bu Cloudflare Pages için işe yaramadı. Postgres gibi belirli kütüphaneler çalışma zamanını algılayacak ve gerekli paketi çekecektir. Bir çözüm yolu var: tsx'i kullanarak tüm TypeScript dosyalarını yükleyebilir ve çalıştırmadan önce derleyebiliriz. Bunun önceden oluşturulmuş bir adım olduğunu iddia edebilirsiniz, ancak hala remiksin depo düzeyinde olduğu için bu yaklaşımda önemli bir sorun görmüyorum. Bunu çözmek için tsx'i bağımlılık olarak ekliyoruz: pnpm add tsx -D --filter=@repo/my-remix-cloudflare-app Daha sonra dosyamızı düzenleyip, remix scriptlerimizin her birine tsx sürecini eklememiz gerekiyor: package.json { "name": "@repo/my-remix-cloudflare-app", "version": "1.0.0", "scripts": { // Other scripts omitted "build": "NODE_OPTIONS=\"--import tsx/esm\" remix vite:build", "dev": "NODE_OPTIONS=\"--import tsx/esm\" remix vite:dev", "start": "NODE_OPTIONS=\"--import tsx/esm\" wrangler pages dev ./build/client" } } Ekstralar Dosyası Oluşturma .npmrc Yerel paketlerinizi komut satırıyla eklerken sorun yaşıyorsanız, projenin kök dizininde dosyası oluşturabilirsiniz. .npmrc .npmrc link-workspace-packages= true prefer-workspace-packages=true Bu, pnpm'e öncelikle çalışma alanı paketlerini kullanmasını söyleyecektir. .nprmc dosyasını oluşturmama yardımcı olan Reddit'ten teşekkürler ZoWnx'e Tuzaklar - Dosyalarınızda ve isimlendirmesine dikkat edin. Ayrı bir kütüphanede olsa bile. Remix, bir istemci veya sunucu dosyası olup olmadığını belirlemek için bunları kullanır. Proje depo başına derlenmediğinden içe aktarma hatası verecektir! .client .server Postgres gibi çoklu platform paketleriyle ilgili sorunlar yaşıyorsanız, bunu çalışma alanı düzeyinde yüklemek daha iyidir. Uygun içe aktarımı algılayacaktır. @repo/db deposuna doğrudan yüklemek, Remix'e içe aktarırken bozulacaktır. İşte bu kadar arkadaşlar!!! GitHub Deposu ulaşabilirsiniz. Uygulamanın tamamına buradan Beni Sosyal Medyada Takip Edin! Üretimdeki %1'lik hataları yakalamak için kamuya açık bir otomatik test mühendisi kuruyorum. İlerlememi şu şekilde paylaşıyorum: X/Twitter @javiasilis LinkedIn @javiasilis