/aw-practice

Primary LanguageTypeScript

A quick view of static build at Github page

https://wfh-plink.github.io/aw-practice

How to run complete demonstration

Prerequisition

A local installed Node.js that is above v12.16.0, and npm which is above v6.6.0.

Run demonstration

Install and initialize environment for the very first time.

npm run init

Run static demo server.

npm run start

Visit http://localhost:14334 (In case your default browser is not opened automatically).

Ajax request is targeting local path /api, since there is a proxy server runs behind, which is eventually targeting https://l94wc2001h.execute-api.ap-southeast-2.amazonaws.com for bypassing CORS issue.

Run in development mode

npm run dev:start

Press ctrl + c to quit process in terminal

Please ignore terminal log about visiting http://localhost:14333, since this port is hosted by create-react-app without a proxy server. The proxy server will be running on 14334.

Source code structure

   /
   |- packages/ # source code organized in package directories
   |   |- aw-main # client side feature directory
   |   |  |- components/  # Non-page level components
   |   |  |- configurable/  # route files
   |   |  |- main/  # App level entry component
   |   |  |- pages/ # page level components
   |   |  |- isom/   # Shared type definitions, for Plink isomophic usage
   |   |- aw-server # server side source code (for command line and API proxying)
   |- cra-space/  # create-react-app working directory (aka workspace tree)
   |- server-space/  # Node.js server working directory
   |- dist/static  # Already built static assets
   |- tarballs/  # Source packages reused from another repo

Slice, Epic and dependencies

  • File name like *Slice.tsx? is Redux store slice file addressed in redux-toolkit

    There are 2 types of slice, global (data, page) level slice and component instance level slice, e.g. landingSlice.ts and inviteFormSlice.tsx

    Each slice file contains:

    • State interface
    • initial state value
    • reducers (which changes state and can be dispatched)
    • addEpic() which observes incoming reducer action and state changing event, react with RxJS based operations as side effect.

  • Epic in those *Slice.tsx? files is concept of redux-observable, an alternative approach to using React.useEffect().

    Compare with React hooks, Redux-observable (RxJS) offers better time based manipulation ability of async logic, and play side effect against not only state changes but also action streams.

  • Plink command used in package.json's scripts is open source monorepo management tool https://github.com/liujingbreak/plink

  • Source file of packages under tarballs/ are also in Plink repo

Client side node packages in tarballs/ actually contains source TS files without compilation, so they can be browsed by following Visual Studio Code type interence.

Reading source code in Visual studio code without "missing type" error

A monorepo needs to switching workspace tree for changing top level tsconfig.json file to make Visual Studio Code be able to inference dependencies for specific source code package.

  • Before read source code of packages/aw-main, please ensure current workspace-tree is cra-space/ by either npm run start is the last command you ran, or executing command:
# switch space
npm run plink -- sync cra-space
# check whether "cra-space" is highlighted
npm run plink -- ls