---
# System prepended metadata

title: Deploy react-app with Netlify
tags: [JavaScript, KryptoCamp, 學習筆記]

---

###### tags: `學習筆記` `KryptoCamp` `JavaScript`
# Deploy react-app with Netlify
[Netlify](https://www.netlify.com/)


### 創建 react app

```
npm install -g create-react-app
```

### 創建git repo 與 推上遠端

1. 從github create 新的 repository 

2. 推上遠端

```
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:rayainman/123.git
git push -u origin main
```

### 安裝 Netlify Cli 與 部署

```
npm install netlify-cli -g
netlify deploy
```

1. 在這邊會開啟netlify網站驗證去連結帳戶
2. 選擇創建一個新的site
![](https://i.imgur.com/TMYVHB3.png)
3. 選擇網站名稱(也可以不選)
![](https://i.imgur.com/HYlTxPt.png)
4. 選擇發布目錄
設成 ./build
5. 發布成功可以進行測試
![](https://i.imgur.com/HyDBDJt.png)
6. 將測試成功的修改部分提交
```
git add . 
git commit -m "netfify"
git push
```
7. 若是測試網發布成功，可以選擇正式發布
```
netlify deploy --prod
```

![](https://i.imgur.com/1gjDoBb.png)

### 部署

## reference

[Page Not Found Error on Netlify Reactjs React Router solved](https://dev.to/rajeshroyal/page-not-found-error-on-netlify-reactjs-react-router-solved-43oa)

[How to deploy a React app with Netlify and set up continuous deployment via Github](https://levelup.gitconnected.com/how-to-deploy-a-react-app-with-netlify-set-up-continuous-deployment-via-github-53859dcdaf40)

