Turborepo로 Remix 앱 + 패키지를 실행하는 방법

remix-forms 개발은 그것을 사용하는 Remix 앱에 직접 연결되지 않았기 때문에 번거로웠습니다. 초기 반복 테스트에는 패키지를 게시하고 별도의 테스트 웹 앱에 가져오는 작업이 포함되었습니다. 빠르고 더럽고 두 사람이 작성했을 때 작동했습니다.

앞으로 개발 마찰을 줄이기 위해 모든 것을 한 곳에 두는 것이 더 낫습니다.

목표

이것은 많은 기능이 필요하지 않은 매우 간단한 사용 사례입니다.

리믹스 형식의 로컬 버전을 사용하여 사이트 개발

패키지 코드가 변경되면 사이트를 핫 리로드합니다

.

쉽게 사이트 배포

CI를 단순하게 유지하고 이미 가지고 있는 e2e 테스트를 실행합니다

.

스포일러: remix-forms에서 최종 결과를 확인하거나 sample monorepo으로 이동하여 비즈니스 로직 없이 작동하는 구성을 확인하십시오.

이 문서에서는 newNetlify Remix app 및 비어 있는TS package 을 사용합니다.

전략

세 가지 옵션을 고려했습니다.

Turborepo

Nx

NPM workspaces

NPM 작업 공간이 작동하고 다른 종속성이 필요하지 않은 것 같습니다. 그러나 웹 앱이 로컬 패키지를 로드하도록 만드는 몇 가지 문제가 있었습니다. 약간의 시행착오 끝에 우리는 외부 도구를 사용해 보기로 결정했습니다.

Turborepo는 설정이 매우 간단했으며 설치에서 작동 확인까지 세 가지 중 가장 빠릅니다.

Nx 문서는 따라하기 쉽지 않았습니다. 우리는 약 30분 동안 그것을 시도했고, "방금 효과가 있었던"것으로 가기로 결정했습니다. 다시 말하지만 우리의 사용 사례는 복잡하지 않으며 수많은 기능이 필요하지 않습니다.

Turborepo는 이 작업을 위한 도구였습니다.

파일 구조 준비

.
turbo.json
package.json
`-- packages
   +-- sample-package
`-- apps
   +-- web

먼저 새 루트 디렉터리를 만들고 패키지의 콘텐츠를 /packages에, Remix 앱을 /apps/web에 복사했습니다.

Turborepo 구성

turborepo's 가이드에 따라 몇 가지 구성 파일이 있습니다.

// ./turbo.json
{
  "$schema": "https://turborepo.org/schema.json",
  "baseBranch": "origin/main",
  "pipeline": {
    "build": {
      "dependsOn": [
        "^build"
      ],
      "outputs": [
        "dist/**"
      ]
    },
    "lint": {
      "outputs": []
    },
    "test": {
      "outputs": [],
      "dependsOn": [
        "^build"
      ]
    },
    "dev": {
      "cache": false
    }
  }
}

그리고 루트package.json:

// ./package.json
{
  "name": "sample-monorepo",
  //...
  "workspaces": [
    "packages/*",
    "apps/*"
  ],
  "devDependencies": {
    "turbo": "^1.3.1"
  },
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "test": "turbo run test",
    "test:ci": "turbo run test:ci"
  }
}

이제 로컬 샘플 패키지를 사용하도록 앱을 연결합니다.

// apps/web/package.json
{
  "name": "remix-web-app",
  //...
  "dependencies": {
    //...
    "sample-package": "*",
    //...
  }
  //...
}

이미 작동하는 것을 볼 수 있습니다 🎉

// root dir
$ npm i
$ npm run dev

패키지가 변경되면 Remix 앱을 다시 로드합니다.

그러나 Remix는 패키지가 변경될 때가 아니라 apps/web 폴더가 변경될 때만 재구축됩니다.
Remix1.6.4!의 새 제품config.watchPaths을 입력하세요.

// apps/web/remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  //...
  watchPaths: ['../../packages/sample-package'],
  //...
};

이제 우리는 루트 디렉터리에서 단일 명령npm run dev으로 모든 것을 실행하고 패키지에 대한 모든 변경 사항은 Remix 재구축을 트리거합니다 😁

짓다

루트 디렉터리에서 npm run build를 실행하면 완료됩니다.

배포

아직 패키지 게시 프로세스를 변경하지 않았습니다.

$ npm run build
$ cd apps/packages/sample-package
$ npm version <major|minor|patch>
$ npm publish

Netlify에 웹 앱을 배포하려면 apps/web/nelify.toml에 하나의 추가 구성이 필요합니다. 파일의 나머지 부분은 Remix에서 생성된 기본값입니다.

// apps/web/netlify.toml
[build]
  command = "cd ../.. && npm install && npm run build"
  ...

끝났어! 우리의 기본 작업 흐름은 훨씬 간단합니다. 저장소를 복제하고 종속성을 설치하면 모든 것이 실행될 준비가 됩니다. 더 많은 사람들이 패키지의 코드를 처리하도록 하는 것이 훨씬 쉽습니다.
PR을 기본 및 웹사이트 업데이트에 병합하세요. 추가 단계가 필요하지 않습니다.

이 구조가 할 수 있는 일의 표면을 긁는 것이므로 확실히 개선의 여지가 있습니다. 하지만 지금은 그것이 우리가 해야 할 일입니다.