Full-featured typescript starter for React application
package.json
fileA token-based API agnostic authentication is already included in this project. It resides in src/common/auth and provides a useAuth
hook. This hook returns current auth state (token
, userId
, isLoggedIn
, and loading indicators), signIn
method to perform a Sign-in operation, relogin
method to renew the token, and signOut
method to perform a Sign-out operation.
It also provides 2 guard components, RequireIsLoggedIn and RequireIsAnonymous, to wrap routes.
Internally, all auth state is stored by Jotai in src/common/auth/state.ts. The JWT token is persisted in localStorage
.
There is also a src/app/PersistAuthGate.tsx to automatically relogin a user after the page reloads if token is present in localStorage
.
nvm install 20
nvm use 20
npm upgrade -g npm
git clone https://github.com/Kamahl19/react-starter.git
npm i
.env
fileStart the app locally
npm start
Vite will run web server in the development mode at http://localhost:3000
.
This project includes Mock Service Worker to mock API. It starts automatically and provides API for authentication and user functionality.
Build the app for production
npm run build
The app is then ready to be deployed from the /dist
folder. See the Building for Production and Deploying a Static Site for more information.
Read more about how to deploy to Vercel here. In short, these are the necessary steps:
VITE_API_URL
with value /api
Now each commit pushed to the main
branch will be deployed to production automatically. Each branch or Pull Request will be deployed as preview.
There are 2 different tools to analyze and visualize the production JS bundle:
npm run analyze
npm run visualize
Launch the test runner in the interactive watch mode
npm run test
Vitest also provides a neat UI to view and interact with the tests. Open it by running npm run test:ui
.
See Vitest docs for more information.
This project uses Prettier, an opinionated code formatter, to ensure that the whole codebase conforms to a consistent style.
Prettier runs when:
npm run format
commandpre-commit
hook, right before code is committedProject comes with ESLint configured. It helps us prevent common errors.
Code quality concerns, best practices, possible logical issues etc. are checked by ESLint. Our custom ESLint configuration .eslintrc.cjs includes these rules and plugins:
ESLint runs when:
npm run lint
commandnpm start
commandpre-commit
hook, right before code is committed
Running npm run i18n
will first parse the whole codebase to find all used i18n keys. Then it inserts missing keys into the JSON files and removes deprecated keys which are not used in the codebase anymore. The result will be an alphabetically sorted JSONs containing all the currently used i18n keys in the codebase.
This project is using GitHub's Actions to run integration tests on each PR and Main branch. It includes running eslint, prettier, tests and building the app. PR becomes mergable only if it passes. We also show badge on top of README.md
to show Main branch status.
There is also a code-quality action to run Github's CodeQL analysis.
If you don't use GitHub you can remove the .github
folder, otherwise follow these steps to configure your GitHub repository:
Kamahl19/react-starter
) and name of the branch for CI badge in README.md
Once you start building your own app on top of React Starter you will probably want to keep up-to-date with the new updates of React Starter. This can be easily achieved using GitHub's compare feature. We suggest this process:
https://github.com/Kamahl19/react-starter/compare/{YOUR_LATEST_REACT_STARTER_COMMIT_HASH}...main
Updating to React Starter hash: {LATEST_REACT_STARTER_COMMIT_HASH}
. This way you always keep the hash of the React Starter's version you currently use in your appThis is open source software licensed as MIT.