Hung Knowledge Web

The web that make use of next.js and full of my knowledge related to web technology.

Start

On hk_server code base, run the following commands.

yarn task start_docker
yarn task start_server

For hk-browser, run the following commands

yarn browser:dev-server

For hk-browser-nextjs, run the following commands

yarn nextbrowser:dev-server

Typescript/Javascript compilers

• hk-browser: webpack
• hk-chat: rollup
• hk-browser-nextjs: nextjs
• hkclient-redux: tsc
• hkreselect: babel

Project

uikit

My own theme components that was written in React

Command to start working with ui kit

yarn dev:uikit

This command starts the watch on uikit and dev server for uikit-showcase.

CI

CI was tested on the following platform:

• Github actions
• Google Cloud Build

Google Cloud Build

Workflows:

• Build CI cache docker image
• Build new PR request before merging to master branch

CI Cache docker image

Trigger Condition: when package-lock.json is changed

Each time you change or add new packages in package.json, you should build a new docker image file for CI: * Docker file: build/Dockerfile.ci * Cloud Build script: build/cloudbuild-ci-gcr.yaml

Google Cloud Build will be triggered when the above condition is satisfied. The above cloud build script is used to build a new Docker image, then submit to GCR. The tag of docker image is the short Git version hash, because it's easier to keep track what git commit that cause the creation of CI docker image. Then tag latest name to that the newly-created CI docker image.

Build new PR request before merging to master branch

<< add description >>

Build a new docker image for CI

• Open build/cloudbuild-ci-gcr.yaml
• Bump up the version of image file
• Run the following comment

gcloud builds submit --config=build/cloudbuild-ci-gcr.yaml

List of ignore files

• .gitignore
  • List of folders and files that we don't want to submit along with git commit
• .dockerignore
  • List of folders and files that we don't want to upload to docker engine as context
• .gcloudignore
  • List of folders and files that we don't want gcloud to include when uploading our files to its service as build context
• .eslintignore
  • List of folders and files that we don't want to check lint syntax
• .npmignore
  • List of folders and files that we don't want npm to keep when this package is installed as a dependency in another package

Single SPA

Application connection

Application can be React, angular, vanilla javascript project, which then compiled into the Systemjs bundle. ss-root-config loads the target application by route.