Your machine must have:
- NodeJS 18.16+
- Typescript
- ReactJS
- Bootstrap
- NodeJS
- ExpressJS
- Vite
- Jest
- Visual Studio Code with
ESLint
andPrettier - Code formatter
extension
- Chrome (Latest)
Run the below at root:
npm install
npm run start-server
- At separated terminal:
npm run start-web
, then open the URL by Chrome
This is a monorepo, managed by NPM Workspace. The workspaces are directories defined in packages.json#workspaces
:
aif-server
: The Node server that access to the GraphQL data souceaif-web
: The React app of AIF, initially generated by Vite.aif-packages/*
: contain multiple packages which are shared betweenaif-web
andaif-server
.
src/assets
SVGs, icons, fonts, etc.src/modules
Each modules are corresponding to separated pages or business logic. In each module, the structure should be like below:components
React Components and styleshooks
React hooksservices
Service that are specifically used ony inside the module, if they are used by other module, then place them insrc/services
...
And other files/directory that are specifically used only inside the module.
src/services
Services that are re-used accross aif-websrc/utils
Utils functions that are re-used across aif-webApp.tsx
This is the root component, all setup on app start should be here.Routes.tsx
App routes are defined in this file.
- This project use Bootstrap 5.3 for styling, it provide many utilities and helpers for styling.
- Global style and helper css classes can be founded inside
aif-web/src/App.css
- Style of specific component can be found at file
[component-name].css
which is placed at the same directory of the component. - NOTE: may consider using
styled-component
to avoid style override unexpectedly.
src/controllers
App controllerssrc/services
App services, mainly for accessing external data sourcesrc/utils
Utils functionssrc/types
Typescript Type definitionsmain.ts
Initial setup should be placed in side hereroutes.ts
Routes or map from API URL to the controllers.
Each directory inside here is a package that is shared between aif-web
and aif-server
as well as other project if have in the future. Each package should follow the below structure:
package.json
: Packagename
must have@aif-packages
namespace. Themain
field must be pointed to the entry files.src
All source code are inside here.
Each package can be created manually or using command line:
npm init --workspace aif-packages/package-name
To run unit test:
npm run test-web