feat(add): node http

seognil · May 26, 2020 · 9867003 · 9867003
1 parent b9cd7ee
commit 9867003
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 2 deletions.
diff --git a/node/http-server/package.json b/node/http-server/package.json
@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "nodemon src/index.js"
+  },
+  "devDependencies": {
+    "@types/node": "^14.0.5",
+    "@types/nodemon": "^1.19.0",
+    "nodemon": "^2.0.4"
+  }
+}
diff --git a/node/http-server/public/404.html b/node/http-server/public/404.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style/style.css" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>404 Not Found</h1>
+    <br />
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+    <a href="/not-found">404</a>
+  </body>
+</html>
diff --git a/node/http-server/public/about.html b/node/http-server/public/about.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style/style.css" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>About Page</h1>
+    <br />
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+    <a href="/not-found">404</a>
+  </body>
+</html>
diff --git a/node/http-server/public/index.html b/node/http-server/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style/style.css" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>Home Page</h1>
+    <br />
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+    <a href="/not-found">404</a>
+  </body>
+</html>
diff --git a/node/http-server/public/style/style.css b/node/http-server/public/style/style.css
@@ -0,0 +1,3 @@
+html {
+  background-color: hsla(0, 70%, 70%, 0.3)
+}
diff --git a/node/http-server/src/index.js b/node/http-server/src/index.js
@@ -0,0 +1,51 @@
+const path = require('path');
+const fs = require('fs');
+const http = require('http');
+
+// * ----------------
+
+const htmlFolder = path.resolve(__dirname, '../public');
+const notFoundPath = path.resolve(htmlFolder, '404.html');
+
+const getFilePath = (url) => {
+  const ext = path.extname(url);
+  const missingExt = ext ? '' : '.html';
+  const validUrl = url === '/' ? '/index' : url;
+  const filePath = htmlFolder + validUrl + missingExt;
+
+  return filePath;
+};
+
+const contentTypeMap = {
+  '.css': 'text/css',
+  '.html': 'text/html',
+};
+
+const getContentTypeHeader = (filePath) => ({
+  'Content-Type': contentTypeMap[path.extname(filePath)] || '',
+});
+
+http
+  .createServer(async (req, res) => {
+    const filePath = getFilePath(req.url);
+
+    fs.readFile(filePath, (err, content) => {
+      if (err) {
+        if (err.code === 'ENOENT') {
+          fs.readFile(notFoundPath, (err, content) => {
+            res.writeHead(200, getContentTypeHeader(notFoundPath));
+            res.end(content, 'utf8');
+          });
+        } else {
+          res.writeHead(500);
+          res.end(`Server Error: ${err.code}`);
+        }
+      } else {
+        res.writeHead(200, getContentTypeHeader(filePath));
+        res.end(content, 'utf8');
+      }
+    });
+  })
+  .listen(8100, () => {
+    console.log('http://localhost:8100/');
+  });
diff --git a/node/http-server/tsconfig.json b/node/http-server/tsconfig.json
@@ -0,0 +1 @@
+{}
diff --git a/readme.md b/readme.md
@@ -1,4 +1,4 @@
-# LEARNING BY DOING
+# LEARN BY DOING
 
 ## What is it 这是什么
 
@@ -24,11 +24,13 @@ Because it's the only way to learn how to code -- by practice
     - [ ] useful functions
     - [ ] tricks
     - [ ] polyfills
+  - **Node.js**
+    - [x] [http](./node/http-server/)：搭建一个简单的服务器
   - **JS lib usage**
     - [x] [react hooks](./react/)
     - [x] [redux](./redux/)
     - [x] [rxjs](./rxjs/)
-    - [ ] Webpack
+    - [x] [Webpack](https://github.com/seognil-study/webpack-playground)
   - [**Testing**](./testing/)
     - [x] [Jest](./testing/jest/)
     - [x] [Testing-Library](./testing/testing-library/)