0.6.3 (#154)

* github pages workflow

* gh pages fix

* gh pages fix

* gh pages fix

* gh pages fix

* add sentry to vue

* wip

* deploy folder now at custom app level

* update README.md

* sonarcloud fix

* sonarcloud fix

* sonarcloud fix

* sonarcloud fix

* sonarcloud fix

* sonarcloud fix

.github/workflows/manual.yml → .github/workflows/manual-gcp-expressjs.yml

@@ -4,7 +4,7 @@
 # actions appear from default branch - https://github.community/t/workflow-files-only-picked-up-from-master/16129/2
 
 # manual workflow for js-node/expressjs
-name: Manual workflow
+name: Manual ExpressJS to GCP CloudRun workflow
 
 # Controls when the action will run. Workflow runs when manually triggered using the UI
 # or API.
@@ -23,8 +23,8 @@ on:
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "greet"
-  greet:
+  # This workflow contains a single job called "deploy_to_cloudrun"
+  deploy_to_cloudrun:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
     # container: node:lts

.github/workflows/manual-gcp-vue-vite.yml

@@ -0,0 +1,65 @@
+# This is a basic workflow that is manually triggered
+# try to use as much shell scripting a possible
+# actions appear from default branch - https://github.community/t/workflow-files-only-picked-up-from-master/16129/2
+
+# manual workflow for js-node/expressjs
+name: Manual Vue Vite to GCP Cloud Storage workflow
+
+# Controls when the action will run. Workflow runs when manually triggered using the UI
+# or API.
+on:
+  workflow_dispatch:
+    # Inputs the workflow accepts.
+    inputs:
+      environment:
+        description: 'The environment (uat, prod)'
+        default: 'uat'
+        required: true
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "deploy_to_cloudrun"
+  deploy_to_cloudstorage:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+    # container: node:lts
+    strategy:
+      matrix:
+        node: [ '14' ]
+
+    name: Deploying js-web/vue-vite - ${{ github.event.inputs.environment }}... Using Node ${{ matrix.node }}
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      - uses: google-github-actions/setup-gcloud@master
+        with:
+          version: 'latest'
+          project_id: ${{ secrets.GCP_PROJECT_ID }}
+          service_account_key: ${{ secrets.GCP_SA_KEY }}
+          export_default_credentials: true
+      - uses: actions/checkout@v2
+        # with:
+        #   ref: if_you_need_to_specify_a_branch
+      - name: Show checkout branch name
+        run: echo checking out on branch ${GITHUB_REF##*/}
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+          check-latest: false
+      - name: Make shell script executable
+        run: |
+          chmod +x ./js-web/vue-vite/deploy.sh
+      # Runs a single command using the runners shell
+      - name: Initiate Deployment
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GCP_PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
+          GCP_SA_KEY: ${{ secrets.GCP_SA_KEY }}
+          # # VAULT_<env> to VAULT
+          # VAULT: ${{ secrets[format('VAULT_{0}', github.event.inputs.environment)] }}
+        run: |
+          # gcloud info
+          echo "CI: $CI"
+          echo "Branch: ${GITHUB_REF##*/}"
+          echo "Environment: ${{ github.event.inputs.environment }}"
+          cd js-web/vue-vite
+          ./deploy.sh ${{ github.event.inputs.environment }}

.github/workflows/gh-pages.yml → .github/workflows/manual-gh-pages.yml

@@ -1,5 +1,5 @@
+# https://ais-one.github.io/cookbook
 
-# TBD - to test
 # https://dev.to/rolanddoda/deploy-to-github-pages-like-a-pro-with-github-actions-4hdg
 # notes:
 # set package.json "homepage": "/name-of-your-project/",
@@ -17,23 +17,22 @@ on:
     inputs:
       environment:
         description: 'The environment (uat, production)'
-        default: 'production'
+        default: 'uat'
         required: true
 
 defaults:
   run:
-    # abc/def
     working-directory: js-web/vue-vite
 
 jobs:
-  gh-pages-deploy:
+  gh-pages-deploy1:
     name: Deploying to gh-pages
     runs-on: ubuntu-latest
     steps:
       - name: Setup Node.js for use with actions
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          version:  14.x
+          node-version: 14.x
       - name: Checkout branch
         uses: actions/checkout@v2
       - name: Show checkout branch name
@@ -44,18 +43,23 @@ jobs:
       #   run: chmod +x deploy.sh
       # - name: Initiate Deployment
       #   ./deploy.sh ${{ github.event.inputs.environment }}
+# DOES NOT WORK THIS WAY
+# gh-pages-deploy2:
+#   name: Deploying to gh-pages 2
+#   runs-on: ubuntu-latest
+#   needs: [gh-pages-deploy1]
+#   steps:
       - name: Run deploy script
         # remember to change user.name and user.email
-        # TBD npx vite build -- mode ${{ github.event.inputs.environment }}
         run: |
           git config user.name "Your username" && git config user.email "your email"
           git checkout --orphan gh-pages
-          npm run build
+          npx vite build --mode ${{ github.event.inputs.environment }}
           git --work-tree dist add --all
           git --work-tree dist commit -m 'Deploy'
           git push origin HEAD:gh-pages --force
           rm -r dist
-          git checkout -f master
+          git checkout -f ${GITHUB_REF##*/}
           git branch -D gh-pages
 
 

@es-labs/esm/bwc-table.js

@@ -577,7 +577,7 @@ class Table extends HTMLElement {
         parent.remove()
       }
 
-      if (typeof this.#columns === 'object') {
+      if (this.#columns && typeof this.#columns === 'object') {
         // console.log('render thead')
         table = document.createElement('table')
         table.setAttribute('id', 'table')
@@ -664,7 +664,7 @@ class Table extends HTMLElement {
         }
 
         // populate the data
-        if (typeof this.#items === 'object' && this.#items.length) {
+        if (this.#items && typeof this.#items === 'object' && this.#items.length) {
           // console.log('render tbody')
           const tbody = document.createElement('tbody')
           // TBD function to get checked rows...

@es-labs/esm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@es-labs/esm",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": "Aaron Gong",
   "license": "MIT",
   "repository": {

@es-labs/node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@es-labs/node",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": "Aaron Gong",
   "license": "MIT",
   "repository": {

BACKLOG.md

@@ -3,8 +3,8 @@
 Always finding new things to implement / improve in this list!
 
 ### For next sprint / version
+- [@es-labs/node] allow options to be passed in also, currently uses global.CONFIG through (**@es-labs/node/config**)
 - [js-node/expressjs] scale websockets... https://pushpin.org/
-- [js-web/vue-vite] add sentry when ready
 - [js-web/vue-vite] cypress e2e testing
 - [chore] migration to node 16 and npm 7
 - [chore] update webauthnsimple to v3
@@ -13,7 +13,6 @@ Always finding new things to implement / improve in this list!
 ### For future product improvement
 - [@es-labs/esm/bwc-combobox.js] - enhancement: replace datalist (so can check multiple times on dropdown instead of closing after each check)
 - [@es-labs/esm/bwc-t4t-form.js] - handle multiple parent values use case of combobox..., handle reset of multiple child columns
-- [fix] - ==='object' - handle null object
 - [backend-deployment] GKE, Kubernetes
 - [frontend] aria
 - [frontend] react example

CHANGELOG.md

@@ -1,3 +1,10 @@
+### Version 0.6.3
+- [chore] update packages & cleanup & work on improving documentation
+- [chore] improve github workflow and documentation
+- [js-web/vue-vite] add sentry when ready
+- [fix] typeof xx === 'object' - handle if xx is null
+- [js-node/expressjs] make deployment application specific also, moved **deploy** folder to [js-node/expressjs/apps/app-template](js-node/expressjs/apps/app-template), migration and seeding, and GCP deployment config adjusted to address the folder location change
+
 ### Version 0.6.2
 - [chore] rename project
 

README.md

@@ -10,9 +10,7 @@
 
 > **TL;DR** ExpressJS, VueJS cookbook, with evergreen recipes and templates (CRUD, CI/CD, Cloud container deployment, Web Components, ES Modules) to develop applications faster, while reducing the need for rewrite or refactoring due to changes in dependencies.
 
-**NOTE!** project name <u>vue-crud-x</u> changed to <u>cookbook</u>
-
-Latest Version [0.6.2](https://github.com/ais-one/cookbook/releases/tag/0.6.2) - Released 2021 July 23 1230 +8GMT
+Latest Version [0.6.3](https://github.com/ais-one/cookbook/releases/tag/0.6.3) - Released 2021 July 25 1215 +8GMT
 
 Considerations for this project are similar to [favv](https://github.com/ais-one/favv/blob/master/README.md#considerations). The difference between them are:
 - this repo is more of a cookbook and recipes are constantly being improved and updated
@@ -74,16 +72,16 @@ npm i ../@es-labs/node
 
 ```bash
 # create and seed relational db on SQLite, (delete the dev.sqlite file each time before you run this)
-# command: npm run knex -- <development / uat / production> <seed / migrate>
-npm run knex -- development migrate
-npm run knex -- development seed
+# command: npm run knex -- <development / uat / production> <custom app name> <seed / migrate>
+npm run knex -- development app-template migrate
+npm run knex -- development app-template seed
 
 # create and seed MongoDB requires MongoDB - you can skip this but MongoDB examples will not work
-# command: npm run mongo -- <development / uat / production> <seed / update>
-npm run mongo -- development seed
+# command: npm run mongo -- <development / uat / production> <custom app name> <seed / update>
+npm run mongo -- development app-template seed
 
 # run the backend
-# command: npm run app -- <development / uat / production>
+# command: npm run app -- <development / uat / production> <custom app name, default = app-template>
 npm run app -- development
 
 # or npm run app:lint to include eslint checks
@@ -113,19 +111,9 @@ npm run test
 
 ### Long Running Processes
 
-Codes for long running processes such as tcp server (event mode, streaming mode), serial server, kafka producer, consumer, cron-triggered process, etc.
-
-```
-cd js-node/wip
-
-# Command to simulate long running process (do take note of caveats, for production need a monitor to handle restart strategy)
-# command: npm run process-long -- development
-npm run process-long
+For long running processes such as tcp server (event mode, streaming mode), serial server, kafka producer, consumer, cron-triggered process, etc.
 
-# Command to simulate process triggered by cron (**NOTE:** may be better to use cron to call API than trigger a process)
-# command: npm run process-cron -- development
-npm run process-cron
-```
+See [js-node/README.md](js-node/README.md)
 
 ---
 
@@ -198,16 +186,35 @@ You can override the configurations using <NODE_ENV>.env.js files, e.g. **develo
 +- rest-cmd.http : rest commands for testing
 ```
 
-## CI/CD
+## CI/CD & Cloud Deployment
+
+### Cloud Services
+
+The following Google Cloud Platform services are used
+- Container Registry
+- Cloud Run
+- Cloud Storage 
+
+Refer to [doc/deployment/home.md](doc/deployment/home.md) for documentation on deployments
 
-Using github actions, deploy to GCP Cloud
+### Deployment Using Github Actions
 
-Manually triggered deployment on .github/workflows/manual.yml
+- .github/workflows/manual-gcp-expressjs.yml (Manually deploy js-node/expressjs to GCP CloudRun)
+  - selectable inputs
+    - environment (uat for now, development does not deploy anything)
+    - service (default = app-template)
+    - branch
+- .github/workflows/manual-gcp-vue-vite.yml (Manually deploy js-web/vue-vite to GCP Cloud Storage)
+  - selectable inputs
+    - environment (uat for now, development does not deploy anything)
+    - csutom_app (to be implemented)
+    - branch
+- .github/workflows/manual-gh-pages.yml (Manually deploy js-web/vue-vite to Github Pages)
+  - selectable inputs
+    - environment (uat for now, development does not deploy anything)
+    - csutom_app (to be implemented)
+    - branch
 
-selectable inputs
-- environment (uat for now, development does not deploy anything)
-- application (js-node/expressjs, js-web/vue-vite)
-- code branch
 
 **NOTE** config/secret contents will not be in repo for CI/CD (so you can get errors), those should be put in VAULT
 
@@ -229,7 +236,7 @@ VAULT={ secrets: { ... all your secrets here } } # base64 encoded
 
 ## VERSION CHANGE NOTES
 
-- **v0.6+** Improve organization, graceful exit, logging, project rename, add more nodejs applications
+- **v0.6+** Improve organization, graceful exit, logging, project rename, add more nodejs applications, repo name <u>vue-crud-x</u> changed to <u>cookbook</u>
 - **v0.5+** Improve organization and authentication, add new features
 - **v0.4+** Improve folders and structure organization, handle CI/CD better
 - **v0.3+** Reorganize folders and structure, for ease of developing and maintaining multiple applications.

docs/deployment/home.md

@@ -80,12 +80,6 @@ deploy.sh uat
 
 ---
 
-## Github Actions Deploymen
-
-See **.github/workflows/manual.yml**
-
----
-
 # SCALING & DEPLOYMENT STRATEGIES
 
 There should always be alternatives to the service you are using.

docs/sample.sh

@@ -1,4 +1,7 @@
 #!/bin/bash
+
+# THIS SCRIPT DOES NOT WORK - IT IS JUST A SAMPLE FOR LEARNING BASH COMMANDS
+
 # $0. The name of script itself.
 # $$ Process id of current shell.
 # $* Values of all the arguments. ...

docs/web/js.md

@@ -30,6 +30,32 @@ const x2 = num => num * 2
 compose(inc, x2)(5) // return value should be (5 * 2) + 1 = 11 
 ```
 
+### Truthy, falsy & typeof
+
+- Typeof
+
+```js
+typeof null === 'object'
+typeof [] === 'object'
+typeof {} === 'object'
+typeof '' === 'string'
+typeof function () {} === 'function'
+typeof 1 === 'number'
+typeof true === 'boolean'
+typeof undefined === 'undefined'
+```
+
+- Falsy
+
+```
+null, false, 0, undefined, ''
+```
+
+- Truthy
+
+```
+true, 1, 'a', [], {}, () => {}),
+```
 
 ### ES2020