# 〈 NodeJS/Express/MongoDB/ReactJS 網站開發紀錄 Part.1 〉 NodeJS專案創建 & 基本設置
---
Tu32 2023/9/8
***"applying the principles of science to solving the problems of humanity"*** **- Richard Buckminster Fuller**
## 一、前言
本來在做Music Generation的模型，也已經寫好兩篇文章了(之後會發佈)，但最近因為有報名梅竹黑客松，所以先鬼轉一下寫寫網頁開發的技術。
我在兩年前有想過寫一個網頁遊戲，那段時間用NodeJS/Express/MongoDB這個Tech Stack研究了一段時間，但之後因為偏向研究ML/DL方面就沒有再碰過了，所以現在來複習+紀錄，以免比賽的時候要用到卻寫不出來。
如果時間允許我可能還會寫React Native的文章，研究Mobile App的開發，但我一向是不太喜歡寫這個的，所以大機率不會寫(也可能沒時間。
## 二、建立NodeJS專案
先到NodeJS官網下載NodeJS，打開IDE
1. **在terminal打上`npm init -y`**
跑完之後你的資料夾應該會多一個package.json，這有點類似專案的設定檔。
2. **在terminal打上`npm i express ejs`**
下載我們需要的dependencies，ejs是幫助我們整理html模板的工具
3. **在terminal打上`npm i --save-dev nodemon`**
在開發階段我們會需要nodemon，在修改程式碼的時候會自動重開伺服器
接下來打開package.json，找到scripts
```
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
```
這個讓你可以更方便的測試你的網站，比如default的`test`指令，如果你在terminal打上`npm run test`，就會echo出`"Error: no test specified" `
所以現在我們新增兩個指令：
```
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"dev": "nodemon index.js"
},
```
等等開始開發的時候就能更方便的開關我們的伺服器了。
## 3. index.js
突然發現是要寫給我自己看的，那就簡潔一些
**骨架**
```javascript
/*index.js*/
const express = require('express')
const app = express()
const expressLayouts = require('express-ejs-layouts')
app.set('view engine', 'ejs')
app.set('views', __dirname + '/views')
app.set('layout', 'layouts/layout')
app.use(expressLayouts)
app.use(express.static('public'))
app.listen(process.env.PORT || 8000)
```
順便在工作目錄加入/views、/routes、/models、/public這四個資料夾
## 4. Hooking Routers
**`/routes/main.js`**
```javascript
const express = require('express')
const router = express.Router()
router.get('/', (req, res) => {
res.send('Hello World')
})
module.exports = router
```
**`/index.js`** 加入
```javascript
const mainRouter = require('./routes/main')
app.use('/', mainRouter)
```
到localhost:8000就能看到Hello World
## 5. Adding HTML Templates
在/views創建/views/layouts/layout.ejs
記得下載ejs language support這個extension (VSCode)
**`/views/layouts/layout.ejs`** (use ! for Emmet Abbreviation)
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Vibe</title>
</head>
<body>
Header
<br>
<%- body %>
<br>
Footer
</body>
</html>
```
**`/views/main.ejs`**
```
The Vibe
```
**`/routes/main.js`**
```javascript
const express = require('express')
const router = express.Router()
router.get('/', (req, res) => {
res.render('main')
})
module.exports = router
```
到localhost:8000可以看到
```
Header
The Vibe
Footer
```
## 6. Integrate MongoDB
去[官網](https://www.mongodb.com/try/download/community)下載MongoDB，打開compass，創建vibe這個database
1. open Mongosh
2. `use vibe`
3. 隨便加入一筆資料`db.items().insertOne({name: "name"})`
4. show dbs
`npm i mongoose`
**`/index.js`**
```javascript
if (process.env.NODE_ENV !== 'production') {
const dotenv = require("dotenv")
dotenv.config()
} /*add to the beginning of your code*/
const mongoose = require('mongoose')
mongoose.connect(process.env.DATABASE_URL, {
useNewUrlParser: true
})
const db = mongoose.connection
db.on('error', error => console.log(error))
db.once('open', () => console.log('Connected to Mongoose'))
```
**`/.env`**
```
DATABASE_URL=mongodb://127.0.0.1/vibe
```
## 7. 結語
這篇比較偏小抄，也算我快速複習怎麼建置網頁骨架。下一篇應該會進入到網頁的實際功能之類的。
Sign in with Wallet
Connect another wallet