Add Node Postgres CRUD demo

README.md

@@ -1,92 +1,4 @@
-# loopback4-example-github
+# Node + Postgres Demo
 
-This LoopBack application is an example to connect to third party REST APIs, GitHub API.
+Simple Node.js CRUD app that writes to `nubes_test_table` and renders a small HTML UI.
-
+If the input is empty, it inserts "Node did it".
-It shows:
-
-- how to define template and options in [REST connector datasource](./src/datasources/githubds.datasource.ts).
-- how to traverse pages in the results in the [controller](./src/controllers/gh-query.controller.ts)
-
-## Blog posts
-
-I'll be creating a series of blog posts on how to create this end-to-end, i.e. from creating APIs in LoopBack application to frontend using React. Stay tuned!
-
-- [Part 1: Creating Datasource to GitHub API](https://mobilediana.medium.com/building-an-end-to-end-application-with-loopback-react-js-7a22d726c35d)
-- [Part 2: Creating Service Proxy](https://mobilediana.medium.com/building-an-end-to-end-application-with-loopback-react-js-part-2-creating-service-proxy-7ffac2bd7980)
-- [Part 3: Pagination in GitHub API Results](https://mobilediana.medium.com/building-an-end-to-end-application-with-loopback-react-js-90cfd7a4813c#a270-8107da706e6f)
-
----
-
-This application is generated using [LoopBack 4 CLI](https://loopback.io/doc/en/lb4/Command-line-interface.html) with the
-[initial project layout](https://loopback.io/doc/en/lb4/Loopback-application-layout.html).
-
-## Install dependencies
-
-By default, dependencies were installed when this application was generated.
-Whenever dependencies in `package.json` are changed, run the following command:
-
-```sh
-npm install
-```
-
-To only install resolved dependencies in `package-lock.json`:
-
-```sh
-npm ci
-```
-
-## Run the application
-
-```sh
-npm start
-```
-
-You can also run `node .` to skip the build step.
-
-Open http://127.0.0.1:3000 in your browser.
-
-## Rebuild the project
-
-To incrementally build the project:
-
-```sh
-npm run build
-```
-
-To force a full build by cleaning up cached artifacts:
-
-```sh
-npm run rebuild
-```
-
-## Fix code style and formatting issues
-
-```sh
-npm run lint
-```
-
-To automatically fix such issues:
-
-```sh
-npm run lint:fix
-```
-
-## Other useful commands
-
-- `npm run migrate`: Migrate database schemas for models
-- `npm run openapi-spec`: Generate OpenAPI spec into a file
-- `npm run docker:build`: Build a Docker image for this application
-- `npm run docker:run`: Run this application inside a Docker container
-
-## Tests
-
-```sh
-npm test
-```
-
-## What's next
-
-Please check out [LoopBack 4 documentation](https://loopback.io/doc/en/lb4/) to
-understand how you can continue to add features to this application.
-
-[![LoopBack](<https://github.com/strongloop/loopback-next/raw/master/docs/site/imgs/branding/Powered-by-LoopBack-Badge-(blue)-@2x.png>)](http://loopback.io/)

package.json

@@ -6,8 +6,7 @@
     "loopback-application",
     "loopback"
   ],
-  "main": "dist/index.js",
+  "main": "server.js",
-  "types": "dist/index.d.ts",
   "engines": {
     "node": ">=10.16"
   },
@@ -31,8 +30,7 @@
     "migrate": "node ./dist/migrate",
     "preopenapi-spec": "npm run build",
     "openapi-spec": "node ./dist/openapi-spec",
-    "prestart": "npm run rebuild",
+    "start": "node server.js",
-    "start": "node -r source-map-support/register .",
     "clean": "lb-clean dist *.tsbuildinfo .eslintcache",
     "rebuild": "npm run clean && npm run build"
   },
@@ -56,15 +54,16 @@
     "@loopback/rest-explorer": "^3.3.1",
     "@loopback/service-proxy": "^3.2.1",
     "loopback-connector-rest": "^3.7.0",
+    "pg": "^8.18.0",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@loopback/build": "^6.4.1",
-    "source-map-support": "^0.5.19",
+    "@loopback/eslint-config": "^10.2.1",
     "@loopback/testlab": "^3.4.1",
     "@types/node": "^10.17.60",
-    "@loopback/eslint-config": "^10.2.1",
     "eslint": "^7.28.0",
+    "source-map-support": "^0.5.19",
     "typescript": "~4.3.2"
   }
 }

server.js

@@ -0,0 +1,144 @@
+const http = require("http");
+const { URL } = require("url");
+const { Pool } = require("pg");
+
+const pool = new Pool(
+  process.env.DATABASE_URL
+    ? { connectionString: process.env.DATABASE_URL }
+    : {
+        host: process.env.PGHOST,
+        port: process.env.PGPORT || "5432",
+        user: process.env.PGUSER,
+        password: process.env.PGPASSWORD,
+        database: process.env.PGDATABASE || "postgres",
+        ssl: process.env.PGSSLMODE === "disable" ? false : { rejectUnauthorized: false },
+      }
+);
+
+async function ensureTable() {
+  await pool.query(
+    "CREATE TABLE IF NOT EXISTS nubes_test_table (id SERIAL PRIMARY KEY, test_data TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)"
+  );
+}
+
+function parseForm(body) {
+  return body
+    .split("&")
+    .map((pair) => pair.split("="))
+    .reduce((acc, [key, value]) => {
+      acc[decodeURIComponent(key)] = decodeURIComponent((value || "").replace(/\+/g, " "));
+      return acc;
+    }, {});
+}
+
+function renderPage(rows, error) {
+  const errorHtml = error ? `<p style="color:red">${error}</p>` : "";
+  const rowsHtml = rows
+    .map(
+      (row) => `
+    <tr>
+      <td>${row.id}</td>
+      <td>
+        <form method="POST" action="/update">
+          <input type="hidden" name="id" value="${row.id}">
+          <input type="text" name="txt_content" value="${row.test_data}">
+          <button type="submit">save</button>
+        </form>
+      </td>
+      <td>
+        <form method="POST" action="/delete" onsubmit="return confirm('Delete?')">
+          <input type="hidden" name="id" value="${row.id}">
+          <button type="submit">delete</button>
+        </form>
+      </td>
+    </tr>`
+    )
+    .join("");
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Node + Postgres Demo</title>
+</head>
+<body>
+  <h3>Node + Postgres Demo</h3>
+  ${errorHtml}
+  <form method="POST" action="/add">
+    <input type="text" name="txt_content" placeholder="New message">
+    <button type="submit">Add</button>
+  </form>
+  <table border="1" cellpadding="6" cellspacing="0">
+    <tr><th>ID</th><th>Content</th><th>Actions</th></tr>
+    ${rowsHtml}
+  </table>
+</body>
+</html>`;
+}
+
+async function handleRequest(req, res) {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+
+  if (req.method === "GET" && url.pathname === "/healthz") {
+    res.writeHead(200, { "Content-Type": "text/plain" });
+    res.end("ok");
+    return;
+  }
+
+  if (req.method === "GET" && url.pathname === "/") {
+    try {
+      await ensureTable();
+      const result = await pool.query(
+        "SELECT id, test_data FROM nubes_test_table ORDER BY id DESC LIMIT 20"
+      );
+      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(renderPage(result.rows));
+    } catch (err) {
+      res.writeHead(500, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(renderPage([], err.message));
+    }
+    return;
+  }
+
+  if (req.method === "POST" && ["/add", "/update", "/delete"].includes(url.pathname)) {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk;
+    });
+    req.on("end", async () => {
+      const form = parseForm(body);
+      try {
+        await ensureTable();
+        if (url.pathname === "/add") {
+          const content = form.txt_content || "Node did it";
+          await pool.query("INSERT INTO nubes_test_table (test_data) VALUES ($1)", [content]);
+        }
+        if (url.pathname === "/update") {
+          await pool.query("UPDATE nubes_test_table SET test_data=$1 WHERE id=$2", [
+            form.txt_content || "",
+            form.id,
+          ]);
+        }
+        if (url.pathname === "/delete") {
+          await pool.query("DELETE FROM nubes_test_table WHERE id=$1", [form.id]);
+        }
+        res.writeHead(303, { Location: "/" });
+        res.end();
+      } catch (err) {
+        res.writeHead(500, { "Content-Type": "text/html; charset=utf-8" });
+        res.end(renderPage([], err.message));
+      }
+    });
+    return;
+  }
+
+  res.writeHead(404, { "Content-Type": "text/plain" });
+  res.end("Not found");
+}
+
+const port = process.env.PORT || 3000;
+const server = http.createServer(handleRequest);
+
+server.listen(port, () => {
+  console.log(`Server running on port ${port}`);
+});