This is an opinionated ReactJS boilerplate based off of create-react-app. It's not perfect, but it's ideal 👌
- React Query
- React Router
- Typescript
- Jest
- React Testing Library
- ESLint
- Prettier
- Github Actions CI/CD
- Styled Icons Pack
- Source Map Explorer to analyze code bloat
- Mobile friendly / Responsive design
- Unit & Integration test examples
- Accessability ready
- Click the
Use this Templatebutton orgit clone https://github.com/cmacdonnacha/react-boilerplate.git my-app cd my-appnpm install- That's it! See the Available Commands list below.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode. Use npm run test:no-watch to run tests without a watcher.
Runs tests without a watcher.
Displays the code coverage within the console and also generates a coverage folder.
To view the code coverage report in your browser open the
index.htmlfile within thecoverage/lcov-reportfolder.
Runs the ESLint typescript code lint checker. Running npm run lint:fix will automatically fix any lint errors where possible.
Builds a production version of the app inside the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
This will run a production build and then analyze the output using source-map-explorer which analyzes JavaScript bundles using their source maps. This helps you understand where code bloat is coming from.
In the dropdown on top left, click on [number].[hash].chunk.js to see which node_modules packages are taking up the most space or main.[hash].chunk.js which is the actual source code.
This boilerplate uses Github actions to continuously test, build and deploy. You can see the workflow file in the workflows folder.
If you would like to deploy your app to github pages make sure to set your own GITHUB_ACCESS_TOKEN variable. See creating a token.. Otherwise you can remove the deploy job.
To enable github pages follow these instructions.
This can be useful when testing production builds vs dev builds or checking how well your build is minified.
npm run buildnpx serve -s build
npm-check-updates makes it easy to update your dependencies. All you have to do is run the following:
npm install -g npm-check-updatesncu -uwhich displays the outdated dependencies and updates yourpackage.jsonfile.npm installwhich will then install the new versions for you.
When cloning this repository you will get all of it's git history. If you would like to start fresh please do the following:
- Delete the
.gitfolder git init
This will also clear the husky config (tool that checks passing tests before git commit) so to re-enable this you will need to npm install --save-dev husky again.
The react-testing-library is a great utility to work alongside Jest. It makes you focus more on writing tests the way an actual user would interact with your application.
Some useful links on react-testing-library:
- Kent C Dodds's blog
- When writing integration tests, think of Arrange, Act, Assert
- React Testing Library Examples 1
- React Testing Library Examples 2
- React Testing Library Cheatsheet
- Jest DOM Custom Matchers - Use for Integration Tests
- Jest Matchers - Use for Unit Tests
Licensed under the MIT license.
- Bug: Investigate issue with gh pages not working with very first workflow run after new clone. Currently I have to use global gh-pages package for first time
gh-pages -d build.