prpateldev / react-boilerplate

Start your next react project in seconds

A highly scalable, configurable performaant with best practices

Table of contents

• Quick-start
• Features
• Configuration
• Scripts
• Project-Structure
• Dependencies
• DevDependencies
• Authors

Quick-start

1. Make sure that you have Node.js v8.15.1 and npm v5 or above installed.
2. Clone this repo using git clone https://github.com/kaushalshah-98/react-boilerplate.git <YOUR_PROJECT_NAME>
3. Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
   
4. Run npm run install in order to install dependencies.
   At this point you can run npm start to see the example app at http://localhost:8090.

Now you're ready to rumble!

Please note that this boilerplate is production-ready and not meant for beginners!. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you.

You don’t need to install or configure tools like webpack or Babel.
They are preconfigured so that you can focus on the code.

Features

Quick scaffolding

Create components, pages, - right from the CLI!

Instant feedback

Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and TS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!

Scalable and Simple state management

Unidirectional data flow allows for change logging.

Next generation JavaScript

Use template strings, object destructuring, arrow functions, JSX syntax and more.

Next generation CSS

Write composable CSS in css, scss or utiltity tailwind classes. Tailwind CSS A utility-first CSS framework for rapidly building custom user interfaces

Industry-standard routing

It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.

Offline-first

The next frontier in performant web apps: availability without a network connection from the instant your users load the app.

Static code analysis

Focus on writing new features without worrying about formatting or code quality. With the right editor setup, your code will automatically be formatted and linted as you work.

Industry-standard Testing

Allows to create tests in typescript and you can use enzume, jest and react-test-renderer all to simplify your testing, It also provides you with coverage report

Ready for any Environment

It is ready to work with any environment such as Development, Production and staging and all can have their different `.env` files

Path alias

Create a path alias in `tsconfig.json` and it will allow to find a file or resource located in a different directory or folder from the place where the shortcut is located.

Configuration

• Webpack Config paths based on your file structure you can go to webpack/paths.js and modify the source and file names based on your need.
• webpack/webpack.common.js config common webpack for both dev and production environments.
• webpack/webpack.dev.js config webpack for dev environment.
• webpack/webpack.prod.js config webpack for production environment.
• /webpack.config.js main webpack config that merge common and webpack environment based config.
• Enzyme config /setupTest.ts here you will have all setup for enzyme to test your component.
• Prettier config /.prettierc.
• Jest config /jest.config.js.
• Tailwind config /tailwind.config.js.
• Postcss config /postcss.config.js.
• Typescript config /tsconfig.json.
• Generate React CLI config /.browserslistrc.
• ESLint config /.eslintrc.js.
• Babel config /.babelrc.

Scripts

There are total 12 Scripts in total

Webpack

To start in development mode, run the following command

  npm run start

To build the code, run the following command

  npm run build

Tailwind

To build tailwind css, run the following command

  npm run build-tailwind

Running Tests

To run tests, run the following command

  npm run test

To run tests with coverage, run the following command

  npm run test:coverage

To open coverage report, run the following command

  npm run open:coverage

Linting and Prettifying

To prettify code, run the following command

  npm run prettify

To check lint erros, run the following command

  npm run lint

To fix auto fixable lint erros, run the following command

  npm run lint-fix

Component Generation

To generate a new component, run the following command

  npm run gen-comp <ComponentName>

To generate a new page, run the following command

  npm run gen-page <PageName>

Commitization

To commit your changes, run the following command

npm install -g commitizen cz-conventional-changelog git-cz
npm run commit

Project structure

│───__mocks__
│   └──────────────────────────────────────────────────────── # Mocks  
├───.husky
│   └──────────────────────────────────────────────────────── # Husky hooks 
├───.vscode
│   └──────────────────────────────────────────────────────── # VS Code Settings 
│   └───extensions.json
│   └───launch.json
│   └───settings.json
├───config
│   └──────────────────────────────────────────────────────── # Global configs    
├───dist
│   └──────────────────────────────────────────────────────── # Production Build
├───coverage
│   └──────────────────────────────────────────────────────── # Coverage Report
├───env
│   └──────────────────────────────────────────────────────── # Environment files
│   └───.env.production
│   └───.env.staging
│   └───.env.local
│   └───.env.development
│    
├───public
│   └──────────────────────────────────────────────────────── # Public
│   └───assets
│ 
├───webpack
│   ├──────────────────────────────────────────────────────── # webpack Configs 
│   ├─── paths.js
│   ├───webpack.common.js 
│   ├───webpack.dev.js 
│   └───webpack.prod.js
├───src
│   │───api
│   │    │─────────────────────────────────────────────────── # All api's 
│   │    │───api1
│   │    │   └───.index.ts
│   │    │───api1
│   │    │   └───.index.ts
│   │    │───apicaller.ts
│   │    └───index.ts
│   │
│   ├───components
│   │   ├──────────────────────────────────────────────────── # All Components      
│   │   ├───ComponentName
│   │   │   ├───index.tsx
│   │   │   ├───ComponentName.css
│   │   │   └───ComponentName.test.tsx
│   │   │   
│   ├───config
│   │   ├───────────────────────────────────────────────────── # Config       
│   │   ├───constant.ts
│   │   └───globals.ts
│   │      
│   ├───layouts
│   │   └───────────────────────────────────────────────────── # Layout       
│   ├───libs
│   │   └───────────────────────────────────────────────────── # Libs      
│   │   └───logger.ts
│   │ 
│   ├───pages
│   │   └───────────────────────────────────────────────────── # pages      
│   │   └───PageName
│   │       └───index.tsx
│   ├───providers
│   │   └───────────────────────────────────────────────────── # providers      
│   │   └───index.tsx
│   ├───routes
│   │   └───────────────────────────────────────────────────── # routes       
│   │   ├───Protected.tsx
│   │   └───UnProtected.tsx
│   ├───shared
│   │   └──────────────────────────────────────────────────────# shared comonents       
│   └───store
│   │    └──────────────────────────────────────────────────── # Store setup       
│   │    ├───store1.ts
│   │    ├───store2.ts
│   │    ├───createStore.tsx
│   │    └───index.ts
│   │───utils
│   │    └───────────────────────────────────────────────────── # utils 
│   ├───styles
│   │    └───────────────────────────────────────────────────── # Global styles         
│   ├───setupTests.ts
│   │    └───────────────────────────────────────────────────── # Testsetup file         

Dependencies

React

• react - JavaScript library for building user interfaces.
• react-dom - React package for working with the DOM.
• react-router-dom - DOM bindings for React Router

Mobx

• mobx - Simple, scalable state management.
• mobx-react - React bindings for MobX. Create fully reactive components.

UI Library

• emotion/react - Simple styling in React.
• emotion/styled - Styled API for emotion
• headlessui/react - A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.
• classnames - A simple utility for conditionally joining classNames together

Others

• Logatim - Isomorphic logger which implements log levels and ANSI styles
• axios - Promise based HTTP client for the browser and node.js

DevDependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel
• @babel/runtime - Babel's modular runtime helpers
• @babel/preset-react - Babel preset for all React plugins.
• @babel/preset-typescript - Babel preset for TypeScript

UI Libraries

• tailwindcss - A utility-first CSS framework for rapidly building custom user interfaces.

Jest and Enzyme and ReactTesting

• jest - Delightful JavaScript Testing
• enzyme - Delightful JavaScript Testing
• react-test-renderer - React package for snapshot testing.
• @testing-library/jest-dom - Custom jest matchers to test the state of the DOM
• @testing-library/react - Simple and complete React DOM testing utilities
• @testing-library/user-event - Fire events the same way the user does
• wojtekmaj/enzyme-adapter-react-17 - Unofficial adapter for enzyme for React17

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
• node-sass - Node Sass
• css-loader - Resolve CSS imports
• postcss-loader - Loader to process CSS with PostCSS
• style-loader - Inject CSS into the DOM

Eslint

• eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-import-resolver-alias - a simple Node behavior import resolution plugin for eslint-plugin-import, supporting module alias.
• eslint-plugin-babel - an eslint rule plugin companion to babel-eslint.
• eslint-plugin-import - This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
• eslint-plugin-prettier - Runs prettier as an eslint rule.
• eslint-plugin-react - React specific linting rules for ESLint.
• eslint-plugin-react-hooks - Enforces the Rules of React Hooks.

Plugins

• clean-webpack-plugin - Remove/clean build folders

• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files

• react-refresh-webpack-plugin - HMR using React Fast Refresh
• dotenv-webpack - Supports dotenv and other environment variables

• babel-jest - Jest plugin to use babel for transformation.
• ts-jest - A preprocessor with source maps support to help use TypeScript with Jest

Authors

Kaushal Shah

Piyush Patel

Shoaib Merchant