Initial project setup (via typescript and webpack tutorials)

jeffrade · jeffrade · commit 5fb83f3c563b · 2022-09-01T21:02:24.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# keypost-web
+
+```
+npm install
+npm install --save-dev webpack-dev-server ts-node @types/webpack-dev-server @types/node html-webpack-plugin
+export NODE_OPTIONS=--openssl-legacy-provider
+npm run build
+npm run start
+```
+
+Initial project setup from https://blog.logrocket.com/using-webpack-typescript/
+Initial project setup from https://learntypescript.dev/12/l4-webpack
+Trouble Shooting: https://stackoverflow.com/a/69699772
+
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"/></head><body><div class="cal"><center><form><br><p>Result : <span id="display"></span></p><input type="number" class="input" placeholder="Enter first number" name="firstnumber" value="1" min="1" min="9"/><br><input type="number" class="input" placeholder="Enter second number" name="secondnumber" value="1" min="1" min="9"/><br><br><button type="submit" class="button">Subtract</button></form></center></div><script src="bundle.js"></script></body></html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "keypost-web",
+  "version": "0.0.1",
+  "description": "KeyPost web client",
+  "main": "dist/main.js",
+  "devDependencies": {
+    "@types/node": "^18.7.14",
+    "@types/webpack-dev-server": "^4.7.2",
+    "html-webpack-plugin": "^4.5.2",
+    "ts-loader": "^8.0.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.0.2",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.1"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production"
+  }
+}
diff --git a/src/app.ts b/src/app.ts
@@ -0,0 +1,3 @@
+export function subtract(a: number, b: number): number {
+  return a - b;
+}
diff --git a/src/custom.html b/src/custom.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+   <meta charset="utf-8" />
+  </head>
+  <body>
+    <div class="cal">
+      <center>
+		<form>
+			<br>
+			<p>Result : <span id="display"></span></p>
+			<input type="number" class="input" placeholder="Enter first number" name="firstnumber" value="1" min="1" min="9" /><br>
+			<input type="number" class="input" placeholder="Enter second number" name="secondnumber" value="1" min="1" min="9" /><br><br>
+			<button type="submit" class="button">Subtract</button>
+		</form>
+	  </center>
+	</div>
+  </body>
+</html>
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,20 @@
+import { subtract } from "./app";
+
+function init() {
+    const form = document.querySelector("form");
+    form?.addEventListener("submit", submitHandler);
+  }
+
+  function submitHandler(e: Event) {
+    e.preventDefault();
+    const num1 = document.querySelector("input[name='firstnumber']") as HTMLInputElement;
+    const num2 = document.querySelector("input[name='secondnumber']") as HTMLInputElement;
+    const result = subtract(Number(num1.value), Number(num2.value));
+    const resultElement = document.querySelector("p");
+    if (resultElement) {
+      resultElement.textContent = result.toString();
+    }
+  }
+
+  init();
+
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+      "noImplicitAny": true,
+      "target": "ES5",
+      "module": "ES2015"
+  }
+}
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -0,0 +1,34 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      }
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+        title: 'KeyPost Web', 
+        template: 'src/custom.html' }) 
+   ],
+
+  devServer: {
+    static: path.join(__dirname, "dist"),
+    compress: true,
+    port: 4000,
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+<!doctype html><html><head><meta charset="utf-8"/></head><body><div class="cal"><center><form><br><p>Result : <span id="display"></span></p><input type="number" class="input" placeholder="Enter first number" name="firstnumber" value="1" min="1" min="9"/><br><input type="number" class="input" placeholder="Enter second number" name="secondnumber" value="1" min="1" min="9"/><br><br><button type="submit" class="button">Subtract</button></form></center></div><script src="bundle.js"></script></body></html>
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function subtract(a: number, b: number): number {`
	`2`	`+ return a - b;`
	`3`	`+}`