Skip to content

πŸš€ An opinionated react boilerplate with typescript, react query, react-testing-library, eslint & prettier πŸš€

License

Notifications You must be signed in to change notification settings

cmacdonnacha/react-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

68 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ React Boilerplate πŸš€


This is an opinionated ReactJS boilerplate based off of create-react-app. It's not perfect, but it's ideal πŸ‘Œ

contributions

Features

Β 

Live Demo

Check out the live demo

Β 

Set up

  1. Click the Use this Template button or git clone https://github.com/cmacdonnacha/react-boilerplate.git my-app
  2. cd my-app
  3. npm install
  4. That's it! See the Available Commands list below.

Β 

Available Commands

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 the coverage/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.

Β 

CI/CD

This boilerplate uses Github actions to continuously test, build and deploy. You can see the workflow file in the workflows folder.

https://i.imgur.com/Zzmgfl5.png

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.

Β 

Host your production build locally

This can be useful when testing production builds vs dev builds or checking how well your build is minified.

  1. npm run build
  2. npx serve -s build

Β 

Updating dependencies

npm-check-updates makes it easy to update your dependencies. All you have to do is run the following:

  1. npm install -g npm-check-updates
  2. ncu -u which displays the outdated dependencies and updates your package.json file.
  3. npm install which will then install the new versions for you.

Β 

Clean git history

When cloning this repository you will get all of it's git history. If you would like to start fresh please do the following:

  1. Delete the .git folder
  2. 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.

Β 

Testing

Write Tests. Not too many. Mostly integration.

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:

Β 

Recommended VS Code Extensions

Β 

VS Code Snippets

Β 

Recommended VS Code Settings

Β 

Recommended Chrome Extensions

Β 

License

Licensed under the MIT license.

Β 

TODO

  • 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.

Releases

No releases published

Packages

No packages published