iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
Modern Web

由前向後,從前端邁向全端系列 第 19

19.【從前端到全端,Nextjs+Nestjs】在 NX 中創建 Nest.js 後端

  • 分享至 

  • xImage
  •  

文章重點

  • 安裝 Nest.js 相關依賴
  • 配置 Prettier 以適應 Decorator
  • 啟動並測試 Nest.js 伺服器

本文

Nest.js 是一個高效、可擴展的Node.js後端框架,並運用大量的設計模式與架構規範,搭配TypeScript,來提供開發者嚴謹、有組織的開發環境。並且之後我們要在後端使用GraphQL來傳遞資料回我們的Next.js。

為了在 NX 專案中創建 Nest.js 後端,首先需要安裝相應的依賴。執行以下命令來添加必要的 Nest.js 依賴:

pnpm add -D @nx/nest

接下來進行Nest設置,執行命令創建Nestjs

pnpm exec nx g @nx/nest:app iron-ecommerce-server --frontendProject iron-ecommerce-next

https://ithelp.ithome.com.tw/upload/images/20231004/20108931lcL1C8rR5a.png

由於 Nest.js 廣泛使用了 Decorator,並且可能出現錯誤,所以我們需要對 Prettier 進行一些配置解決問題,修改importOrderParserPlugins

// .prettierrc

{
	"endOfLine": "lf",
	"printWidth": 120,
	"useTabs": true,
	"semi": true,
	"singleQuote": false,
	"trailingComma": "none",
	"plugins": ["@trivago/prettier-plugin-sort-imports"],
	"importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^[a-z]"],
	"importOrderParserPlugins": ["typescript", "decorators-legacy"],
	"importOrderSeparation": true
}

完成配置後,使用 Ctrl+Shift+P 開啟命令面板,並執行 restart TS server

接下來,讓我們嘗試啟動 Nest.js 伺服器並進行測試。執行以下命令來啟動伺服器

pnpm exec nx run iron-ecommerce-server:serve 

伺服器啟動後,打開瀏覽器並導航到 http://localhost:3000/api。我們應該能看到以下輸出

{
    "message": "Hello API"
}

總結

通過本文,我們成功在 NX 工作空間中創建了一個 Nest.js 後端應用程序。我們安裝了必要的依賴,然後修改設定Prettier以適應Nest.js中的 Decorator,最後我們啟動了伺服器並進行了簡單的測試。


上一篇
18.【從前端到全端,Nextjs+Nestjs】加入測試(二)
下一篇
20.【從前端到全端,Nextjs+Nestjs】在Nx中設置NestJS GraphQL server
系列文
由前向後,從前端邁向全端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言