建立Node.js Express專案
===
###### tags: `Node.js` `javascript`

每次要建個新專案都要先上網查一下指令，咖麻煩诶！
所以我決定把它紀錄下來:pencil:，方便未來抄作業(O

---

1. 在建置專案之前，先來安裝Express：

    $ npm install express-generator -g

如果已經有安裝過的，可以直接無視這個步驟~
等安裝好後，來去找建置專案的好位置 :package:

---

2. 在現行工作目錄中建立一個 Express 應用程式：

    $ express --view=ejs <myapp>

<myapp>是要建置專案名稱，可自行取名。
建好後可以看到資料夾內出現這些東西

    create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.ejs
   create : myapp/views/layout.ejs
   create : myapp/views/error.ejs
   create : myapp/bin
   create : myapp/bin/www

如果在下指令時遇到下面錯誤訊息內容，可以看[這篇](https://israynotarray.com/other/20200510/1067127387/)解決問題。

    express:已停用指令碼執行,所以無法載入C:/***.foerShell_profile.ps1 檔案。
    如需詳細資訊,請參閱about_Executio_oc網址為https:/8o.mi osoft.com/fwliLink51。
    位於線路:1字元:3
    C:/UsersHsiangfeng/Documents(windowsPowerShell/Microsoft.PowerShe...
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    CategoryInfo : SecurityError: (:) [], PSSecurityException
    FullyQualifiedErrorId : UnauthorizedAccess

---

3. 安裝相依項目：

    $ cd myapp
    $ npm install

這沒啥好說的......
就install把一些模組建一建，建好會看到專案中出現叫做 node_modules 的資料夾。

---

4. 前端改用pug或ejs。
前面建專案時，指令有一段"--view=ejs"，可以預設前端使用的工具，若不習慣使用.ejs，也可以在指令中改設定成pug。

以下示範如何更改以建立的專案：

將app.js檔，圖中這部分改成pug(建專案時預設是ejs)。
然後安裝pug模組：

    $ npm install --save pug

>個人開發習慣比較喜歡用ejs，各位用自己習慣的就好 :+1:

---

5. 執行專案：
建置好了當然也要能跑起來才算OK！

    $ npm start

因為bin/www那邊預設port是3000，所以瀏覽器中網址要輸入 http://localhost:3000/
會得到以下畫面：

這樣就是成功啦！:heavy_check_mark: