Skip to content

Kamahl19/react-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Starter

Main CI Status

What's Included

Built-in Authentication

A 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.

Installation

  • Install nvm (Node version manager)
  • Install Node v20 and upgrade npm
    nvm install 20
    nvm use 20
    npm upgrade -g npm
  • Clone this repository
    git clone https://github.com/Kamahl19/react-starter.git
  • Install project dependencies
    npm i
  • Edit the .env file

Usage

Start 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.

Building for Production

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.

Deploying to Vercel

Read more about how to deploy to Vercel here. In short, these are the necessary steps:

  1. Confugiration file vercel.json is already created in this project
  2. Create new Vercel Project
  3. Import GitHub repository
  4. Add environment variable VITE_API_URL with value /api
  5. Hit Deploy

Now each commit pushed to the main branch will be deployed to production automatically. Each branch or Pull Request will be deployed as preview.

Analysing & Visualizing production JS bundle

There are 2 different tools to analyze and visualize the production JS bundle:

  • source-map-explorer
    npm run analyze
  • rollup-plugin-visualizer
    npm run visualize

Testing

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.

Prettier

This project uses Prettier, an opinionated code formatter, to ensure that the whole codebase conforms to a consistent style.

Prettier runs when:

  • developer manually executes npm run format command
  • in IDE on file-save if configured (VSCode, IntelliJ IDEA)
  • automatically on pre-commit hook, right before code is committed
  • during CI

ESLint

Project 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:

  • developer manually executes npm run lint command
  • developer starts Vite dev server by npm start command
  • in IDE on background if supported (VSCode, IntelliJ IDEA)
  • automatically on pre-commit hook, right before code is committed
  • during continuous integration defined in .github/workflows/test.yml

i18n

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.

CI/CD

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:

  1. Go to Settings -> Branches -> Add rule
    • Apply to your main branch
    • Require status checks to pass before merging
    • Select build checks being run in test.yml
  2. Update path to your repository (eg. Kamahl19/react-starter) and name of the branch for CI badge in README.md

Keeping up with updates

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:

  1. When you clone the React Starter repo, don't forget to write down the hash of latest main's commit
  2. Every once in a while, compare the version of React Starter you used with the current version of React Starter like this https://github.com/Kamahl19/react-starter/compare/{YOUR_LATEST_REACT_STARTER_COMMIT_HASH}...main
  3. Go through the diff and apply the changes in your own app
  4. Commit these changes into your own repo with this commit message: 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 app

License

This is open source software licensed as MIT.