/react_vitejs_with_nodejs

Primary LanguageTypeScript

react & vitejs template for nodejs backend

Trying out simple backend/frontend project template

  • Trying out npm workspaces in hope it might help a little..
  • Using vitejs for very fast bundling for frontend
  • Using homemade script/package with esbuild for backend and pretty typechecking

todo

  • look more into sample on e2e testing for UI - pupperteer ?
  • do we want react component testing... I never do ui unit test.. but usually have function/classes i want tests on

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

Make builds & run

  • npm run build to build production
  • npm run serve to run production

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
  • npm run ci runs test , eslint without fix and typecheck.

Pre commit runs:

  • npm run eslint
  • npm run typecheck

Github action runs:

  • npm install -g npm
  • npm run build
  • npm run ci

commit linting/checks

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

Frontend/backend libs

Some of the libs added (nice to have for new projects)

Frontend:

  • render: react
  • state: zustand
  • router: react-router-dom
  • css: tailwindcss
  • testing: jest/eslint
  • language: typescript

Backend:

  • 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

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.

  • Build to build:
    • docker build . -t awsome/webapp
  • Run sample
    • docker run --name myAppv01 --env-file .env -p 81:1080 -d awsome/webapp
  • Check its running:
    • docker logs myAppv01