React using Typescript, Next.js, and Storybook with auto formatting, commit linting, and some other helpful stuff (most listed below under Scripts & References)
npm run dev
- Runs live dev server
npm run storybook
- Runs storybook
npm test
ornpm run test
- Runs tests
npm run commit
- Commitizen can help you build your commit messages. Run after you have staged files
npm run build
- Runs next build
npm start
ornpm run start
- Runs the app with
next start
- Runs the app with
npm run build-storybook
- Builds storybook
npm run format
- Formats code using prettier-eslint
npm run lint-staged
- Formats only staged files
git clone [email protected]/selbyk/react-template
cd react-template
npm install
npm run dev # run live dev server @ http://localhost:3000
npm run storybook # run storybook @ http://localhost:6006
-
All changes should be made to a feature branch
git checkout -b feat/<NAME>
orgit checkout -b <COMMIT_TYPE>/<NAME>
-
Commit messages should follow conventional commits guidelines
- Make a change in some files
- Stage them with
git add
or GUI of choice - Run
npm run commit
to help format your commit message - If the commit fails because of linting or tests run
npm run commit -- --retry
to retry with the same params after fixing the errors and staging the changes
-
Push your branch to GitHub and open a PR!
Helpful guides & API docs
JavaScript with some flare
- https://basarat.gitbooks.io/typescript/content/docs/getting-started.html
- https://www.typescriptlang.org/docs/handbook/basic-types.html
Front-end lib
Tooling on top of react for nice things like SSR (e.g. npm run dev
, npm start
)
Component story manager for testing and development
Testing lib to simulate user interaction
- https://airbnb.io/enzyme/docs/api/
- https://github.com/mthuret/storybook-addon-specifications#getting-started
CSS framework