ui5-webcomponents-react-seed deacreases the boostrap time spent on new projects, POCs or MVPs which uses React + UI5 WebComponents React by leveraging several out-of-the-box components.
Usage
- open the terminal;
- go to a random folder you want;
-
npx create-react-app folderrr --template ui5-webcomponents-react-seed; - cd into
folderrr; - (no need to run
yarn installsince it already installs it for you); - run
yarn test:cior any other; - have fun with the other scripts;
PS.: It is important to add the --template ui5-webcomponents-react-seed at the end to get our template.
Getting Started
Once you have created your project using the ui5-webcomponents-react-seed template, you can start by:
-
yarn install: To install this project dependencies. -
yarn mock: To run this project with json-server. -
yarn start: To run this project with backend (⚠️ currently not supported).
Configuration Included
-
JEST Up & Runnning.
-
ESLint & EditorConfig Up & Running.
-
CommitLint Up & Running.
-
Enviroment Variables Up & Running.
-
Internalization Up & Running.
-
PR Template.
-
IE Support.
-
Multiple Scripts.
Engine Included
-
Fallback Engine (
<ErrorBoundary />,<NotFound />and<Error />). -
MockServer Engine (w/
json-server). -
HTTP Request Engine (w/
RequestandURLProvider). -
Permission Engine (w/
RouteValidatorandComponentValidator)
Hooks Included
-
useBrowser: Which identifies the user browser. -
useIsMobile: Which identifies the user device perspective. -
useRequest: Which includesget,post,patch,delete,putHTTP helpers. -
useAuthority: Which includeshasAccesshelpers.
Scripts Included
In the project directory, you can run:
Up & Running
yarn start
Runs the app in the development mode @ http://localhost:3000 (
yarn mock
Runs the app in the development mode @ http://localhost:3001 w/ json-server.
Testing
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.
Checks
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.
Deploy
yarn build
Builds the app for production to the build folder.
Suggested Extensions
Auto Rename Tag
This will help you when building the JSX files by renaming the closing for you.
EditorConfig
This will help you to use the defined coding style at the .editoronfig file during development.
ESLint
This will help you to use the defined coding style at the .eslintrc file during development.
Jest & Jest Runner
This will help you run and debug your *.test.js file during file during test-development.
vscode-icons
This will help you better see the folders and files icons according to its extensions/subject.
prettier
This will enforces a consistent style by parsing your code and re-printing it with its own rules, wrapping code when necessary.
Dependencies Included
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.
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.
Contributing
Take a look into our Kanban Board here.