vite & react
0. 노드js 설치 확인
node -v 입력해서 버전 확인
node -v
v20.14.0
v20.14.0
1. 프로젝트 생성
cd c:/coding/react_workspace
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
만약 Need to install the following packages:
create-vite@6.5.0
Ok to proceed? (y) 라고 나오면 vite가 설치되지 않았기 때문이다.
y를 입력하면 된다.
2. 개발서버 실행
npm run dev
개발서버가 실행된다. ex) http://localhost:5173/3. 정적파일로 빌드
npm run build
dist 폴더에 html, js 파일을 생성한다.
dist/
├─ index.html
├─ vite.svg
├─ assets/
├─ index-9_sxcfan.js
├─ index-D8b4DHJx.css
└─ react-CHdo91hT.svg
├─ index.html
├─ vite.svg
├─ assets/
├─ index-9_sxcfan.js
├─ index-D8b4DHJx.css
└─ react-CHdo91hT.svg
4. 로컬서버 실행 (빌드결과 확인)
npm install -g serve (최초에 serve가 설치되지 않은 경우에만 실행하면 됨)
cd c:/coding/react_workspace/my-react-app
serve dist
cd c:/coding/react_workspace/my-react-app
serve dist