UNPKG

ca-mfe-page-scoring-ui

Version:

This is a react shell for the SPGI Platform MFE implementation

122 lines (89 loc) • 3.21 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
# SPGI React App ## App structure ``` my-app ├── node_modules ├── public │ ├── favicon.ico │ ├── index.html ├── src │ ├── components │ ├── features │ │ ├── feature1 │ │ ├── feature2 │ ├── interfaces │ ├── queries | ├── styles │ ├── utils │ ├── app.routes.tsx │ ├── App.tsx │ ├── bootstrap.tsx │ ├── index.js │ └── singleSpaEntry.ts ├── .gitignore ├── package.json └── README.md ``` ### Feature-based approach General proposal is to have feature based folder structure, where we put all files (components, containers, styles, utils, etc.) related to the feature in the same place. The definition of a “feature” is not universal, and it is up to the team to choose the granularity but usually app routes or pages are used as a top level features. Feature usually includes root component file (i.e. page route) and all nested components and utils required to render that page. So feature folder could look like this: ``` └── feature ├── components ├── utils ├── feature.css ├── feature.tsx ├── feature.constants.ts ├── feature.test.tsx ``` ### API queries It is recommended to use React-query data fetching library to work with APIs in efficient way. We propose to store custom queries it corresponding folder ``` └── queries ├── customQuery.query.ts ... ``` More details with advanced cases on official documentation site of [React-query](https://react-query.tanstack.com/overview) ## Development tools In order to start your development environment run the following command ```shell npm start ``` ### Building application ```shell npm run build ``` Builds the app for production to the `build` folder.<br> For production version, the build is minified and the filenames include the hashes.<br> Your app is ready to be deployed. ### Unit testing In order to run unit tests run the following command ```shell npm test ``` or to run tests in watch mode you can use ```shell npm run test:watch ``` In order to generate coverage report please use the following commang ```shell npm run test:coverage ``` ### Linters Project uses ESLint and Prettier in order to check common style guides. To run them just use this command: ```shell npm run lint ``` or another one to fix some of existing issues automatically: ```shell npm run format ``` ### Useful links - [React](https://reactjs.org/) - [Typescript](https://www.typescriptlang.org/) - [React-query](https://react-query.tanstack.com/overview) - [Axios](https://github.com/axios/axios) - [Jest](https://jestjs.io/) - [React testing library](https://testing-library.com/docs/react-testing-library/intro/) - [Module Federation. Advanced API](https://blog.devgenius.io/module-federation-advanced-api-inwebpack-5-0-0-beta-17-71cd4d42e534/) - [Module Federation examples](https://github.com/module-federation/module-federation-examples)