Forms practice

Development

Prerequisites

Node js

Make it your own

To get a local copy, clone it using:

git clone https://github.com/castromaciel/forms-practice.git

Or get it downloading

rm -rf .git && git init
git add .
git commit -m "Initial commit"

Install dependencies:

To install dependencies use one of the following commands:

npm install

yarn install

pnpm install

Available Scripts

In this project, you can run the following scripts:

Script	Description
pnpm build	Builds the app for production to the `dist` folder.
pnpm coverage	Runs tests with code coverage
pnpm dev	Runs the app in the development mode.
pnpm preview	Start a local web server that serves the built solution from ./dist for previewing
pnpm prepare	Install husky githooks
pnpm test	Runs tests with vitest.

Base Dependencies

axios for networking.
sass for stylesheets.
vitest for testing.

Folder Structure

template-vite-react-ts
├── .github
    ├── workflows
├── .husky
    ├── pre-commit
    ├── pre-push
├── node_modules
├── public
│   └── vite.svg
└── src
    ├── __tests__
        ├── App.test.tsx
    ├── assets
        ├── react.svg
    ├── components
    ├── constants
        ├── index.ts
    ├── App.scss
    ├── App.tsx
    ├── index.scss
    ├── main.tsx
    └── vite-env.d.ts
├── .env.development
├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .lintstagedrc
├── .npmrc
├── index.html
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.js
├── vitest.config.js

husky config

To create husky githooks, you need to run npm prepare or pnpm prepare, and then configure your githooks with

npx husky add .husky/<pre-hookname> "command you want to configure"

For example, the initial config has been created with:

npx husky add .husky/pre-commit "npx lint-staged"

npx husky add .husky/pre-push "pnpm test"

You are free to modify the configuration.

Styleguide

For coding styling, I decided to use eslint and the eslint-airbnb configuration, with some personal modifications.

Credits

Vite Template React with TypeScript is built and maintained by Castro Maciel

License

This project is licensed under the terms of the MIT license.