🚀 An opinionated react boilerplate with typescript, react query, react-testing-library, eslint & prettier 🚀
MIT License
Â
Â
Use this Template
button or git clone https://github.com/cmacdonnacha/react-boilerplate.git my-app
cd my-app
npm install
Â
npm start
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.
npm test
Launches the test runner in the interactive watch mode. Use npm run test:no-watch
to run tests without a watcher.
npm run test:no-watch
Runs tests without a watcher.
npm run test:coverage
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.html
file within thecoverage/lcov-report
folder.
npm run lint
Runs the ESLint typescript code lint checker. Running npm run lint:fix
will automatically fix any lint errors where possible.
npm run build
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.
npm run analyze
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 build
npx 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-updates
ncu -u
which displays the outdated dependencies and updates your package.json
file.npm install
which 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:
.git
foldergit 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:
Â
Â
Â
Â
Â
Licensed under the MIT license.
Â
gh-pages -d build
.