This repo's source code builds a static React app to be served on https://console.redhat.com.
The React app bundled using Webpack includes:
- @patternfly/react-core as the component library
- A react-router-dom BrowserRouter for routing pages
- Uses the HTML5 history API (pushState, replaceState and the popstate event) to keep UI in sync with the URL
- React-query, through custom data-fetching hooks in the src/hooks folder, for managing API state
- React.lazy and React.Suspense for asynchronously loading components
- React.useContext for managing notification state (in src/contexts/NotificationProvider.tsx)
These assets are loaded via Insights chrome which provides user auth, top and side nav (aka chroming), and a <main id="root"> to inject into, using a micro frontends approach. Diagram here:
More information on the overall setup can be found on the Storybook for console.redhat.com here.
This repo uses a shared common config with sensible defaults to build and run your application.
This repo uses federated modules to seamlessly load multiple applications at runtime.
To maintain code quality, the following tools are used:
- Typescript, to add type checking
- Eslint, to enforce consistent code formatting
- Prettier, an opinionated code formatter for automatic code formatting on save
- To set this up in VS Code:
- Install the Prettier extension
- In settings (command + comma or control + comma), search for "format on save" and make sure that is checked
- Still in settings, search for Prettier and make sure that the "Require Config" is checked.
- Then open a file and intentionally make spacing off and hit save, to confirm that prettier is auto-formatting properly.
- To set this up in VS Code:
- Husky to verify changes before commits.
- Jest, for unit tests. Note that the repo is configured so that at least 85% code coverage is required for the entire app or the test suite will fail.
- @testing-library/react for additional testing functionality
- Sentry for error tracking in production