# 開發環境建置

###### tags: `DAPP開發筆記`

#### 使用 t3-app 集結一堆好處

npm create t3-app@latest
npm create vite@latest

包含: netxjs、tailwind、nextAuth、prisma (資料庫工具，提供好上手的資料庫串接功能)、trpc、envVariables

下一個步驟連結資料庫，這邊使用 prisma ，是個好用的資料庫工具，先申請[planetscale](https://planetscale.com) ，創建資料庫，可以在 main 資料庫新增一個 dev 資料庫，若要轉移資料庫很方便就可以轉移過去了。

接下來 `connect with` 要選擇 prisma (當然，我們是用 prisma)，將底下 `.env `的字串貼到本地 .env裡面，並且 `schema.prisma` 也是取代裡面的內容，但要注意的是，記得 uncomment `@db.Text`

之後會有以下錯誤:
> With `relationMode = "prisma"`, no foreign keys are used, so relation fields will not benefit from the index usually created by the relational .....

就要按照這裡的[指示](https://www.prisma.io/docs/concepts/components/prisma-schema/relations/relation-mode#indexes) ，增加如下的內容 `@@index([userId])`

model Post {
  id     Int  @id
  userId Int
  user   User @relation(fields: [userId], references: [id])

  @@index([userId])
}

最後再 `npx prisma db push `就可以跟資料庫連結了！

可以使用底下命令在本地開啟 prisma 圖形介面，更方便直觀操作數據。
> npx prisma studio

測試 API 可以用 vscode 的插件 **"REST Client"**，以文檔的方式測試API，超方便ㄉ呢...

---

### 參考連結
1. [參考影片](https://www.youtube.com/watch?v=jqVm5_G1ZEE&t=214s)
2. [npm 常用指令](https://seanacnet.com/npm/npm-common-commands/)