comp review todo app update (#146)

* new todo frontend

* yarn --> npm

* basic Dockerfile

* add Helm chart for todo list

* backend working

* connect new-app'd frontend to backend via proxy_pass

* move nginx conf

* move nginx conf back

* move helm chart to course repo

* add simple SSR node.js service

* log error message

* fix host typo

* fix dockerfiles

* add link to items page

* improve probe route for todo-backend

* canary probe route for todo-backend

* Dockerfile -> Containerfile todo-backend

* Dockerfile -> Containerfile todo-frontend

* remove commands for containerfile as part of comp review

.gitignore

@@ -1,3 +1,9 @@
+##########################
+## Artifacts
+##########################
+*.tgz
+*.tar.gz
+
 ##########################
 ## Java
 ##########################

todo-backend/Containerfile

@@ -17,7 +17,6 @@ RUN cd /opt/app-root/src && \
 ENV DATABASE_SVC=192.168.0.10
 ENV DATABASE_PORT=3306
 ENV DATABASE_PASSWORD=secret-pass
-ENV DATABASE_INIT=true
 ENV PORT=3000
 
 EXPOSE 3000

todo-backend/package-lock.json

@@ -2878,9 +2878,9 @@
       }
     },
     "node_modules/normalize-url": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
-      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -6461,9 +6461,9 @@
       "dev": true
     },
     "normalize-url": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
-      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
       "dev": true
     },
     "object-assign": {

todo-backend/src/Server.ts

@@ -1,5 +1,5 @@
 import cookieParser from "cookie-parser";
-import express, { Request, Response } from "express";
+import express from "express";
 import "express-async-errors";
 import cors from "cors";
 import { Sequelize } from "sequelize";
@@ -17,6 +17,8 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
 
+let canary = true;
+
 const sequelize = new Sequelize(dbConnectionOptions);
 sequelize
   .authenticate()
@@ -24,20 +26,20 @@ sequelize
     console.log("Connection has been established successfully.");
   })
   .catch((err) => {
+    canary = false;
     console.error("Unable to connect to the database:", err);
   });
 
+app.get("/", (req, res) => {
+  if (canary) {
+    res.send("OK");
+  } else {
+    res.status(500).send("Experienced an error on startup.");
+  }
+});
+
 // Add APIs
 app.use("/api", BaseRouter);
 
-// Print API errors
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-app.use((err: Error, req: Request, res: Response) => {
-  console.error(err, true);
-  return res.status(500).json({
-    error: err.message,
-  });
-});
-
 // Export express instance
 export default app;

todo-backend/src/entities/Item.ts

@@ -37,9 +37,9 @@ export const TodoItem = sequelize.define<TodoItemInstance>(
 );
 
 // (re-)creates table (NOT database)
-if (process.env.DATABASE_INIT === "true") {
-  TodoItem.sync({ force: true });
-}
+// if (process.env.DATABASE_INIT === "true") {
+TodoItem.sync({ force: true });
+// }
 
 export async function createTodoItem(todoItem: TodoItemCreationAttributes) {
   return TodoItem.create(todoItem).then((item) => item.get());

todo-frontend/Containerfile

@@ -3,15 +3,16 @@ FROM registry.access.redhat.com/ubi8/nodejs-14 AS appbuild
 LABEL version="1.0"
 LABEL description="To Do List application builder"
 
-ENV REACT_APP_API_HOST=http://localhost:3000
+# ENV REACT_APP_API_HOST=http://localhost:3000
+ENV REACT_APP_API_HOST=""
 
 USER 0
 
 COPY . /tmp/todo-frontend
 
-RUN cd /tmp/todo-frontend && \
-    npm install && \
-    npm run build
+RUN cd /tmp/todo-frontend
+RUN npm install
+RUN npm run build
 
 # https://github.com/sclorg/nginx-container
 FROM registry.access.redhat.com/ubi8/nginx-118
@@ -24,8 +25,4 @@ LABEL updatedDate="2021-05-19"
 COPY nginx.conf /etc/nginx/
 COPY --from=appbuild /tmp/todo-frontend/build /usr/share/nginx/html
 
-EXPOSE 8080
-
-USER nginx
-
 CMD nginx -g "daemon off;"

todo-frontend/nginx.conf

@@ -2,8 +2,6 @@
 #   * Official English Documentation: http://nginx.org/en/docs/
 #   * Official Russian Documentation: http://nginx.org/ru/docs/
 
-env BACKEND_HOST;
-
 worker_processes auto;
 error_log stderr;
 pid /run/nginx.pid;
@@ -34,8 +32,6 @@ http {
     # for more information.
     include /etc/nginx/conf.d/*.conf;
 
-    perl_set $backend 'sub { return $ENV{"BACKEND_HOST"}; }';
-
     server {
         listen       8080 default_server;
         listen       [::]:8080 default_server;
@@ -45,21 +41,13 @@ http {
         # Load configuration files for the default server block.
         include /etc/nginx/default.d/*.conf;
 
-        sub_filter_types application/javascript;
-        sub_filter '_BACKEND_' $backend;
-        sub_filter_once off;
+        location /api/ {
+          proxy_pass http://todo-list:3000;
+        }
 
         location / {
         }
 
-#         error_page 404 /404.html;
-#             location = /40x.html {
-#         }
-
-#         error_page 500 502 503 504 /50x.html;
-#             location = /50x.html {
-#         }
-
     }
 
 }

todo-ssr/.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

todo-ssr/README.md

@@ -0,0 +1 @@
+# todo-ssr

todo-ssr/index.js

@@ -0,0 +1,30 @@
+const express = require("express");
+const axios = require("axios");
+
+const port = Number(process.env.PORT || 8080);
+const apiHost = process.env.API_HOST || "localhost:3000";
+
+const app = express();
+
+app.set("view engine", "pug");
+
+app.get("/", (req, res) => {
+  res.render("index", { title: "Hello", message: "Page message" });
+});
+
+app.get("/items", async (req, res) => {
+  try {
+    const items = await axios
+      .get(`${apiHost}/api/items`)
+      .then((response) => response.data);
+    console.log("items:", items);
+    res.render("items", { items });
+  } catch (err) {
+    console.error(err);
+    res.status(500).send(err.message);
+  }
+});
+
+app.listen(port, () => {
+  console.log("Express server started on port: " + port);
+});

todo-ssr/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "todo-ssr",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.21.1",
+    "express": "^4.17.1",
+    "pug": "^3.0.2"
+  }
+}

todo-ssr/views/index.pug

@@ -0,0 +1,6 @@
+html
+  head
+    title= title
+  body
+    h1= message
+    a(href="/items") To Do List

todo-ssr/views/items.pug

@@ -0,0 +1,11 @@
+html
+  head
+    title Todo Items
+  body
+    h1 Todo List
+    p Note that this version is non-interactive
+    ul
+      each item in items
+        li
+          input(type="checkbox" disabled="disabled" checked=item.done ? "checked" : "")
+          span= item.description