Skip to content

Instantly share code, notes, and snippets.

@vegarringdal
Created November 2, 2021 09:12
Show Gist options
  • Save vegarringdal/2c0729d10559082c07c6d951ad46e7f6 to your computer and use it in GitHub Desktop.
Save vegarringdal/2c0729d10559082c07c6d951ad46e7f6 to your computer and use it in GitHub Desktop.
nodejs and oracle

Nodejs report react

This is a simple web report application using react and nodejs.

Frontend libraries:

  • render: react
  • state: zustand
  • router: react-router-dom
  • grid: @simple-html/grid
  • datasource: @simple-html/datasource
  • css: tailwindcss
  • testing: jest/eslint
  • language: typescript
  • zip lib: fflate

Backend libraries:

  • language: typescript
  • testing: jest/eslint
  • database: oracledb
  • http framework: expressjs
  • express middleware: express-session
  • express middleware: compression/zlib
  • express middleware: rate-limiter-flexible
  • express middleware: multer
  • timer: node-cron

Development & run

  • npm install to install all dependencies
  • npm start to start dev mode (edit in front/back and common triggers rebuild, also re-run typechecker)

If you like to run backend, frontend & typechecking in own terminals you can use these:

  • start:frontend
  • start:backend
  • start:typechecker

If you need to override this during development then you need to add '.env' to root See config_default.ts at root if you need to edit these

# BACKEND

# http server
SERVER_PORT         # default: 1080 - uses 1081 in dev mode, since its only API server
SERVER_HOST         # default: 0.0.0.0
SERVER_COMPRESSION  # default: true
SERVER_API_ROOT     # default: /api - vitejs also uses this for proxy settings

# express session
SESSION_MAX_AGE     # default: 864000000
SESSION_DOMAIN      # default: 0.0.0.0
SESSION_PRIVATE_KEY # default: change_me
SESSION_NAME        # default: session_name
SESSION_HTTP_ONLY   # default: true
SESSION_SAME_SITE   # default: true
SESSION_SECURE      # default is set by esbuild - default true if not development

# DEVELOPMENT ONLY
PORT_API:           # default : 1081 - Will be used by backend when it just a api server and vitejs
PORT_WEB:           # default : 1080 - Will be used by vitejs dev server

# FOR THIS BACKEND
SHOW_CONSOLE_LOG            # default: true -> TODO: lets add some levels
SHOW_CONSOLE_LOG_SELECT     # default: false
DB_FETCH_SIZE               # default: 150
DB_PREFETCH_SIZE            # default: 150
DB_POOL_MAX                 # default: 5
DB_POOL_MIN                 # default: 2
DB_POOL_PING_INTERVAL       # default: 60
DB_POOL_TIMEOUT             # default: 120

DB_CONNECTION_CLIENT_ID     # default: PUBLIC-USER
DB_CONNECTION_CLIENT_INFO   # default: WWW.SAMPLE.COM
DB_CONNECTION_MODULE        # default: WWW.SAMPLE.COM  -> sending host name would be useful..
DB_CONNECTION_DB_OP         # default: WEB-REPORTS
DB_CONNECTION_ACTION        # NOT IN USE -> SENDING REPORT NAME

# Here we supply just names of connection
# Use comma to split them
DB_CONNECTIONS_NAMES_ARRAY  # default: DEFAULT

# Environment variable names only!
# Use comma to split them
DB_USERNAME_ARRAY           # default: DEFAULT_DB_USERNAME
DB_CONNECTION_STRING_ARRAY  # default: DEFAULT_DB_CONNECTION_STRING
DB_PASSWORD_ARRAY           # default: DEFAULT_DB_PASSWORD


####################################
# Minimal usage with all defaults:
####################################

# usename and password
DEFAULT_DB_USERNAME=DEFAULT_USER
DEFAULT_DB_PASSWORD=PASSWORD
DEFAULT_DB_CONNECTION_STRING=SOME.TNSNAME
# default view/page
DEFAULT_VIEW_DB_NAME=DEFAULT
DEFAULT_VIEW_DB_SCHEMA=DEFAULT_USER
DEFAULT_VIEW_DB_OBJECT=MY_REPORT_VIEW

# if no TNS (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=localhost)(PORT=1521))(CONNECT_DATA=(SERVICE_NAME=xe)))
# todo, add wallet sample..

# disable logs for production
DEFAULT_SHOW_CONSOLE_LOG=false

Make builds & run

  • npm run build to build production
  • npm run serve-env to run production using .env file and just npm run serve without using local .env file

Serve starts build on backend (dist folder, index.js), and uses frontend dist folder to serve www.

Testing

  • npm run prettier to run prettier on all ts and json files
  • npm run eslint to run eslint on all (without --fix)
  • npm run eslint:fix to run eslint on all (with --fix)
  • npm run test to run jest on all
  • npm run typecheck to run typescript check (throws on error)
  • npm run typecheck:watch to run typescript check in watch mode

commit linting/checks

  • uses lint-stage on commit messages, fix: feat: show in change log
  • runs eslint on pre-commit

First time usage:

  • you should edit the package.json name & description
  • add correct url to .versionrc.json
  • update lisense and author

Docker

Ive added default docker file to help build. You need to replace tag and name. Using name is useful incase new build does not work for some reason, then just start last version... TODO: this will be part of github action/azure pipeling

  • Build to build:
    • docker build . -t nodejs/web_react_report
  • Run sample
    • docker run --name nodejs_web_react_report_v01 --env-file .env -p 2080:1080 -d nodejs/web_react_report
  • Check its running:
    • docker logs nodejs_web_react_report_v01
  • To stop
  • docker stop nodejs_web_react_report_v01
  • to start again
  • docker start nodejs_web_react_report_v01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment