https://github.com/chinsun9/hello-react
react spa example
https://github.com/chinsun9/hello-react
example react spa
Last synced: 2 months ago
JSON representation
react spa example
- Host: GitHub
- URL: https://github.com/chinsun9/hello-react
- Owner: chinsun9
- Created: 2021-07-30T04:31:14.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-30T05:26:33.000Z (almost 4 years ago)
- Last Synced: 2025-01-30T08:43:08.765Z (4 months ago)
- Topics: example, react, spa
- Language: HTML
- Homepage: https://chinsun9.github.io/hello-react/
- Size: 437 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# hello react
react spa 만들고 github pages에 올리고 자랑하기
## gh-pages 설치
```sh
yarn add -D gh-pages
```
## package.json 수정
```jsonc package.json
{
// ...
"scripts": {
// ...
"deploy": "gh-pages -d build"
},
// ...
"homepage": "https://chinsun9.github.io/hello-react/"
}
```
- `deploy` 스크립트 추가, `homepage` 필드를 추가한다
- 이때 `homepage`필드의 값은
- `https://{username}.github.io/{repo}/`로 한다
## Router에 basename 추가
```jsx index.js
ReactDOM.render(
,
document.getElementById("root")
);
```
- 최상위 Router에 `basename={process.env.PUBLIC_URL}`을 추가한다
## 404.html 추가
- https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html
- `public/404.html`을 만들고 위 내용을 추가한다
- 이때 다른점은 `pathSegmentsToKeep` 값을 1로 한다
## index.html 수정
- https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html
- `public/index.html` head 부분에 위 `` 에 해당하는 스크립트 부분을 추가한다
## build
```
yarn build
```
## deploy
```
yarn deploy
```
- gh-pages 브랜치가 생성되어 있고,
- 깃허브 페이지 기능이 활성화되어있는 것을 확인할 수 있을 것이다
## 참고
- https://github.com/rafgraph/spa-github-pages