Web Java Spring boot and React 환경에서 nx 실행하는 방법. (nx build, nx start, nx se…
페이지 정보
본문
안녕하세요. 엔지엠소프트웨어입니다. 기존에 Java Spring boot로 Backend를 구성하고, Frontend는 React+Nodejs+typescript로 개발하고 있었는데요. npm start로 간단하게 테스트하다가 이번에 nx를 사용하기로 했습니다. frontend에서 nx build를 사용하려면 nx package를 설치해야 합니다.
> cd frontend
> npm install
> npm i -g nx
> nx searve
nx.json에 아래와 같은 설정들을 추가 해줍니다.
{
"$schema": "./node_modules/nx/schemas/nx-schema.json",
"npmScope": "ngmsoftware",
"affected": {
"defaultBase": "master"
},
"tasksRunnerOptions": {
"default": {
"runner": "@nrwl/nx-cloud",
"options": {
"cacheableOperations": ["build", "lint", "test", "e2e"],
"accessToken": "YjA0MmRmOGItMGRmZC00OGFmLTljYWUtMDBlZDg0N8RmNGI5fHJlYWQtd3JpdGU="
}
}
},
"targetDefaults": {
"build": {
"dependsOn": ["^build"],
"inputs": ["production", "^production"]
},
"e2e": {
"inputs": ["default", "^production"]
},
"lint": {
"inputs": [
"default",
"{workspaceRoot}/.eslintrc.json",
"{workspaceRoot}/.eslintignore"
]
},
"test": {
"inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
}
},
"namedInputs": {
"default": ["{projectRoot}/**/*", "sharedGlobals"],
"production": [
"default",
"!{projectRoot}/.eslintrc.json",
"!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
"!{projectRoot}/tsconfig.spec.json",
"!{projectRoot}/jest.config.[jt]s"
],
"sharedGlobals": ["{workspaceRoot}/babel.config.json"]
},
"generators": {
"@nrwl/react": {
"application": {
"style": "css",
"linter": "eslint",
"bundler": "webpack",
"babel": true
},
"component": {
"style": "css"
},
"library": {
"style": "css",
"linter": "eslint",
"unitTestRunner": "jest"
}
}
}
}
jest는 junit, nunit과 같은 자바스크립트 테스트 프레임워크입니다. jest.config.ts 기본 설정입니다.
import { getJestProjects } from '@nrwl/jest';
export default {
projects: getJestProjects(),
};
jest.preset.ts 기본 설정입니다.
const nxPreset = require('@nrwl/jest/preset').default;
module.exports = { ...nxPreset };
마지막으로 package.json에 npm start 또는 npm build시 실행될 스크립트를 추가 해줍니다.
{
"name": "macro",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "nx serve ngmsoftware",
"build": "nx build ngmsoftware",
"test": "nx test"
},
...
...
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
추천0 비추천0
- 이전글React Build - 보안 오류: (:) [], PSSecurityException (UnauthorizedAccess) 23.04.03
- 다음글리눅스 CentOS에서 Postgres 접속 후 쿼리하는 방법. 23.04.01
댓글목록
등록된 댓글이 없습니다.