ui5-webcomponents-react-seed
decrease’s the bootstrap time spent on new projects, POCs or MVPs which uses React + UI5 WebComponents React by leveraging several out-of-the-box components, scripts & configurations.
⚠️ The repo was moved to the SAP UI5 WebComponents for React repository ⚠️
For more info, check this link here.
npx create-react-app PROJECT_NAME --template ui5-webcomponents-react-seed
;PROJECT_NAME
;node post_create.js
to add Husky and move some dependencies to devDependencies (both are limitations of create-react-app
)yarn install
since it already installs it for you);PS.: It is important to add the --template ui5-webcomponents-react-seed
at the end to get our template.
JEST Up & Runnning;
ESLint & EditorConfig Up & Running;
CommitLint Up & Running;
Enviroment Variables Up & Running;
Internalization Up & Running;
PR Template;
IE Support;
Multiple Scripts.
Fallback Engine (<ErrorBoundary />
, <NotFound />
and <Error />
);
MockServer Engine (w/ json-server
);
API HTTP Request Engine (w/ Request
, APIProvider
, BrowserProvider
);
Permission Engine (w/ RouteValidator
and ComponentValidator
).
Pagination Engine (w/ custom hook usePaginatedGet
).
ToDo Form Edition w/ yup
and formik
.
useRequest
: Which includes get
, post
, patch
, delete
, put
HTTP helpers;
useAuthority
: Which includes hasAccess
helpers.
Following one of the several recommendations for structuring files on a React based project, the seed use: Grouping by file type.
The only custom change we have incremented were the Custom Components and the folder for each project containing the tests
artefacts.
In the project directory, you can run:
yarn start
Runs the app in the development mode @ http://localhost:3000.
⚠️ It requires an AppRouter or a BackEnd up & running @ <domain>:<port>/api
.
yarn mock
Runs the app in the development mode @ http://localhost:3001 w/ json-server.
yarn test
Launches the test runner in the interactive watch mode.
yarn test:ci
Executes the test runner without the interactive watch mode.
yarn test:coverage
Executes the test runner and generates the report.
yarn lint
Checks all the files of the project according to the .eslintrc.js
pre stablished configuration.
yarn lint:fix
Fixes all the files of the project according to the .eslintrc.js
pre stablished configuration.
yarn prettier
Checks all the files of the project according to the .prettierrc
pre stablished configuration.
yarn prettier:fix
Fixes all the files of the project according to the .prettierrc
pre stablished configuration.
yarn build
Builds the app for production to the build
folder.
This will help you when building the JSX files by renaming the closing for you.
This will help you to use the defined coding style at the .editoronfig
file during development.
This will help you to use the defined coding style at the .eslintrc
file during development.
This will help you run and debug your *.test.js
file during file during test-development.
This will help you better see the folders and files icons according to its extensions/subject.
This will enforces a consistent style by parsing your code and re-printing it with its own rules, wrapping code when necessary.
types/jest
Autocomplete/Intelissense your testing methods from the JEST lib.
react-query
Used to manipulate async request, data fetching, cache and more (no redux / saga anymore).
Tutorial Link, Random Post and Creator Official Video.
react-helmet
Used to manpilate DOM attributes through JSX such as <head>
.
react-i18next
Used to translate strings and text in the application following the Internationalization pattern.
i18next-browser-languagedetector
Used to identify the browsers culture and change the applications text accordingly.
react-device-detect
Used to identify the device, browser, ratios and etc.
react-query-devtools
Used to help developers during the React Query information flow.
commitlint
Used to check the commits before actually commits.
env-cmd
Used for embed the enviroment variables during the API URL build.
husky
Used to provide a checker before actions.
nodemon
Used to update the files without restarting the server.
npm-run-all
Used to run multiple commands without worrying about OS syntax.
react-app-polyfill
Used to support old browsers.
jest & jest-enviroment-jsom-sixteen
Used to support jest and its scripts with the new engine.
Take a look into our Kanban Board here.