@ui5/cra-template-webcomponents-react-seed
Advanced tools
A Seed of UI5 Web Components for React
This seed decreases the bootstrap time spent on new projects, POCs or MVPs using UI5 Web Components for React by leveraging several out-of-the-box components, scripts & configurations.
npx create-react-app my-app --template @ui5/webcomponents-react-seed
npm run start
JEST Up & Running;
ESLint & EditorConfig Up & Running;
CommitLint Up & Running;
Environment Variables Up & Running;
Internalization Up & Running;
Fallback Engine (<ErrorBoundary />, <NotFound /> and <Error />);
MockServer Engine (w/ json-server);
API HTTP Request Engine (w/ Request);
Permission Engine (w/ RouteWithAuthorizationRestriction and ComponentWithAuthorizationRestriction).
ToDo Form Edition w/ yup and formik.
useAuthority: Which includes hasAccess helpers.
useLocalStorageState: Helps you to sync your component state with the localStorage.
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:
npm run startRuns the app in the development mode @ http://localhost:3000 with mock data.
In case you have a local approuter or backend running, you can create a .env.development.local file and copy the
contents of .env.production into that file. This will then skip the start of the mockserver and connect to your
"real" backend.
More Information about creating local environment overrides can be found in the create-react-app documentation.
npm run testLaunches the test runner in the interactive watch mode.
npm run test:ciExecutes the test runner without the interactive watch mode.
npm run test:coverageExecutes the test runner and generates the report.
npm run lintChecks all the files of the project according to the eslint config.
npm run lint:fixFixes all the files of the project according to the eslint config.
npm run prettierChecks all the files of the project according to the .prettierrc configuration.
npm run prettier:fixFixes all the files of the project according to the .prettierrc configuration.
npm run buildBuilds 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 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/jestAutocomplete/Intellisense your testing methods from the JEST lib.
react-queryUsed to manipulate async request, data fetching, cache and more.
Tutorial Link, Random Post and Creator Official Video.
react-helmetUsed to manipulate DOM attributes through JSX such as <head>.
react-i18nextUsed to translate strings and text in the application following the Internationalization pattern.
i18next-browser-languagedetectorUsed to identify the browsers culture and change the applications text accordingly.
commitlintUsed to check the commits before actually commits.
husky & lint-stagedUsed to run checks before committing changes to git.
nodemonUsed to update the files without restarting the server.
npm-run-allUsed to run multiple commands without worrying about OS syntax.
jest & jest-enviroment-jsom-sixteenUsed to support jest and its scripts with the new engine.
FAQs
A Seed of UI5 Web Components for React
We found that @ui5/cra-template-webcomponents-react-seed demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.