Skip to content

Latest commit

 

History

History
126 lines (93 loc) · 3.39 KB

README.md

File metadata and controls

126 lines (93 loc) · 3.39 KB
Raw

ReactTS 17 Start-up Starter (SPA)

My personal starter project! It was forked from vite-reactts17-chakra-jest-husky and improved upon. It is intended to quickly bootstrap React SPA apps for any React project.

This is a React + TypeScript + Chakra UI boilerplate to be built with Vite.

What's inside?

+ other smaller dependencies

Todo

  • Add a full Chakra UI Theme Example
  • Configure Cypress to mount React components (SVG and Macros issues)
  • Add typesafe-i18n as translation Library
  • Add inlang as translation host
  • Add axios with examples
  • Add react-query with examples
  • Add a branch with authenticated / unauthenticated routes examples

Technical choices

  • Imports are sorted automatically (rules can be changed via .eslintrc.js config file)
  • ESLint and Prettier are integrated with VSCode out of the box (you just need VSCode's ESLint plugin).
  • Prettier is integrated with ESLint, so you do not need the Prettier plugin. More information here
  • Improved lint-staged configuration: linting will only happen on staged files, not all files.
  • Because of Husky settings, Typescript types and linting are checked before each commit. If for some reason you want to ignore and commit anyway you can use the --no-verify flag. (ex.: git commit --no-verify -m "Updated README.md")

For automatic ES-Lint corrections on VSCode, this setting was added to this project:

// .vscode/settings.json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

For the same in Webstorm follow these instructions: https://www.jetbrains.com/help/webstorm/eslint.html#ws_eslint_configure_run_eslint_on_save

Getting started

  1. Create the project.

    npx degit PedroSimao/react-spa-startup-starter my-app

  2. Access the project directory.

    cd my-app

  3. Initialize a git repository.

    git init

  4. Install dependencies.

    yarn

  5. Serve with hot reload at http://localhost:3000.

    yarn dev

Recommended VS Code extensions

Other commands

Lint commands

  • Run eslint 
    yarn lint
  • Run eslint with fixing 
    yarn lint:fix

Build commands

yarn build

Test commands

  • Run tests with coverage (will open the coverage if all tests succeed) 
    yarn test
  • Watch tests 
    yarn test:watch

License

This project is licensed under the MIT License.