iT邦幫忙

2025 iThome 鐵人賽

DAY 2
0
Modern Web

使用 React + Node.js + MongoDB 打造電商網站系列 第 2

Day2 環境建置完成,準備就緒

  • 分享至 

  • xImage
  •  

今天是鐵人賽 Day2,主要目標是完成開發環境的建置,為後續前後端開發做好準備。作為第一次做完整專案的新手小白,這一天的任務非常重要,讓我能順利進入開發階段。
今天完成的工作如下:
1️⃣ 安裝 Node.js 與 Git
Node.js 安裝完成後,可以在命令列成功執行:
node index.js
測試結果順利印出 Hello Ironman! 🎉
Git 安裝完成,並初始化專案資料夾,使版本控制與後續備份更加方便https://ithelp.ithome.com.tw/upload/images/20250916/20178893UiwY3ZVh84.pnghttps://ithelp.ithome.com.tw/upload/images/20250916/20178893kTVNk8zeTx.png

2️⃣ 建立專案資料夾結構
在專案資料夾 ironman 下建立了 backend 與 frontend 兩個資料夾
後端放 Node.js + Express + MongoDB 程式,前端放 React + Tailwind CSS 程式
這樣可以把前後端程式清楚分開,管理上更方便
https://ithelp.ithome.com.tw/upload/images/20250916/20178893i0O5zQILey.png

3️⃣ 建立 .gitignore
避免把 node_modules/ 和 .env 推送到 GitHub
保護敏感資訊並減少不必要的檔案上傳

4️⃣ 第一次 Git commit 並推到 GitHub
將目前的資料夾結構、測試程式與 .gitignore 加入 Git
成功推到 GitHub,確保專案有雲端備份,也可以隨時回溯版本

5️⃣ 準備 MongoDB Atlas(雲端資料庫)
註冊帳號並建立免費 Cluster
建立資料庫使用者與密碼,設定 IP 白名單
取得 MongoDB 連線字串,為後續後端開發做準備
https://ithelp.ithome.com.tw/upload/images/20250916/20178893BxCcIPzka4.png

💡 Day2 收穫

  • 完成專案開發環境建置
  • 熟悉 Node.js、Git 與 PowerShell 的基本操作
  • 專案已經有完整資料夾結構與 GitHub 備份
  • 免費雲端資料庫已經建立完成,隨時可進行連接

上一篇
Day1 從0開始,打造自己的電商平台
下一篇
Day3 正式開始後端的第一步
系列文
使用 React + Node.js + MongoDB 打造電商網站5
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言