yarn workspace로 NestJS+React로 구성된 단일 보고서 작성

문장 요약

다음과 같이 구성된 단일 보고서 작성

백엔드라는 워크스페이스를 제작하여 NestJS

가져오기

fronted라는 워크스페이스를 제작하고React

가져오기

전제 조건

node.js 설치 완료

yarn 설치 완료

이른바 yarn workspace

yarn이 갖추고 있는 단일 보고 구조에 사용되는 기구

한 창고에서 여러 개의 npm 패키지를 개발할 수 있다

이른바 단보고

제품에 필요한 모든 코드를 단일 보관소에 보관

예를 들어 백엔드와 프런트엔드에서 창고를 분리하지 않고 같은 창고로 만든다

※ 메인 라인과 맞지 않기 때문에, 여기서는 좋은 점과 나쁜 점은 언급하지 않습니다.

채널 패키지json 만들기

프로젝트 경로에 다음 내용 만들기
package.json

{
  "private": true,
  "workspaces": ["backend", "frontend"]
}

백엔드 워크스페이스 제작

이어서 backend 디렉터리를 만들고 이 디렉터리에 사용할 package.json를 설정합니다
./backend/package.json

{
  "private": true,
  "name": "backend",
  "version": "0.0.1"
}

fronted workspace 제작

전장과 같은 요령으로 FE용 워크스페이스를 만들겠습니다.
./frontend/package.json

{
  "private": true,
  "name": "frontend",
  "version": "0.0.1"
}

이 때 디렉터리는 다음과 같이 구성됩니다

$ tree ./
.
├── backend
│   └── package.json
├── frontend
│   └── package.json
└── package.json

2 directories, 3 files

프로젝트 경로에서 yarn를 실행하면 node_modules를 만들고 작업 플랫폼에 기호 링크를 만듭니다.

$ tree ./
./
├── backend
│   └── package.json
├── frontend
│   └── package.json
├── node_modules
│   ├── backend -> ../backend
│   └── frontend -> ../frontend
├── package.json
└── yarn.lock

5 directories, 4 files

NestJS 설치

$ yarn global add @nestjs/cli
$ rm backend/package.json  # コンフリクトしてコマンド実行するので一旦消す
$ nest new backend

이렇게 실행yarn workspace backend start하면 서버가 시작되고 방문http://localhost:3000/하면 "Hello World 33"(단, 이것은 이 문장을 제작할 때 NestJS의 기정행위이다)

React 설치

$ rm frontend/package.json  # コンフリクトしてコマンド実行するので一旦消す
$ yarn create react-app frontend --template typescript

도 yarn workspace front start를 실행하면 서버가 시작하여React의 초기 화면에 접근할 수 있습니다.

전체 프로젝트에서 형식을 공유해 보십시오

-W 추가 옵션 설치

$ yarn add -D -W prettier

전체 프로젝트에서 수행 가능

$ yarn run prettier backend/src/index.tsx
$ yarn run prettier frontend/src/index.tsx
$ cd backend
$ yarn run prettier src/main.ts