前面雖然寫了十篇的介紹，但我相信看完了之後也只是有個稍微模糊的概念，究竟要從何下手呢？從這篇開始將會開始實作此部分的小專案，由於編排的問題中間也會繼續穿插一些如說明文章。那麼我們就開始吧。

建置 Web 初始專案

首先，我們所選用的是 node.js 中的 Express 框架作為骨架，來搭建我的web專案，由於希望都能使用同樣的環境進行作業，因此我這邊採用docker容器來起這項專案，希望在這步驟結束後大家都能成功的建置一個web專案的 Hello world! 囉。

Express.js

建置環境

OS: Ubuntu 20.04 on Windows
node version: v16.16.0
npm: 8.11.0

1. 首先先為專案建立一個資料夾來進行：

   mkdir Hello
   cd Hello
   

2. 接著先來建立package.json

   npm init
   

   執行後會出現以下敘述，如果沒有特別想更改的部分只要按enter到底就可以了

   This utility will walk you through creating a package.json     file.
   It only covers the most common items, and tries to guess sensible defaults.
   
   See `npm help init` for definitive documentation on these fields
   and exactly what they do.
   
   Use `npm install <pkg>` afterwards to install a package and
   save it as a dependency in the package.json file.
   
   Press ^C at any time to quit.
   package name: (hello) 
   version: (1.0.0) 
   description: 
   entry point: (index.js) 
   test command: 
   git repository: 
   keywords: 
   author: 
   license: (ISC) 
   About to write to /home/mars/testcode/Hello/package.json:
   {
     "name": "hello",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC"
   }
   Is this OK? (yes)
   

   接著在你的目錄底下即會產生package.json檔案

3. 安裝 Express

   npm install express --save
   

4. 到目前為止就算是安裝就緒了！可以來撰寫第一個小程式惹，在專案底下建立一個app.js，裡面寫入：

   const express = require('express')
   const app = express()
   const port = 3000
   
   app.get('/', (req, res) => {
     res.send('Hello World!')
   })
   
   app.listen(port, () => {
     console.log(`Example app listening on port ${port}`)
   })
   

5. 於專案目錄下執行

   node app.js
   

6. 看到下面的這個畫面時就表示成功囉
   terminal
   
   網頁頁面
   
   但是看到這裡應該覺得稀哩湖嚕的也不知道自己做了甚麼，我們後面就來好好拆解說明一下這些部分。