To help debug React code, please download this plugin for chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en. The official React debugger has useful tools to view the state and props of React components and navigate the tree a lot like the HTML elements debugger.
To help debug redux and get the most value out of it, make sure to download this tool: https://github.com/reduxjs/redux-devtools! It will help you to debug the flow of actions in the app, as well as replay them, pause them, etc.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.
The page will reload dynamically by HMR if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See Vitest for more information.
Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See Vite for more information.
For develoeprs who uses private NPM registry you can create a file in the root of this project name .npmrc with this content to make sure you aure using the public npm registry:
registry = https://registry.npmjs.org
Also make sure to disconnect from any proxy or vpn you are using.
This project is using Playwright to run end-to-end tests. This is how you can use it:
Runs the end-to-end tests:
npx playwright test
Starts the interactive UI mode:
npx playwright test --ui
Runs the tests only on Desktop Chrome:
npx playwright test --project=chromium
Runs the tests in a specific file:
npx playwright test example
Runs the tests in debug mode:
npx playwright test --debug
Auto generate tests with Codegen:
npx playwright codegen
This project uses semantic-release to manage github releases and changelogs.
When changes merged to main branch, GitHub Actions will trigger a release workflow that will create a new release. It would be useful to follow the commit message convention to make sure the release is done correctly. Although this is not a strict requirement.
The current commit message convention is based on Conventional Commits.
Those rules are customizable in the .releaserc.json file. Guidelines