Skip to content

πŸ₯ StarterKit Builder for React-App creation on πŸš€ React 16 + πŸ“™ Redux 4 + 🚠 Router 4 + πŸ“ͺ Webpack 4 + 🎳 Babel 7 + πŸ“œ TypeScript 3 + πŸš” Linters 21 + πŸ”₯ HMR 3 + πŸ™‰ CodeSplitting + ⚑️ Prettier +❌ Eslint

License

Notifications You must be signed in to change notification settings

ahmadnoorniazi/react-advance-boilerplate

Repository files navigation

react-advance-boilerplate ⚑️

This Webpack4 + React16 Templater is created from the point of view to solve developer day-to-day problems with app suits boilerplate creation. It has all what we need to start React app creation with rocket speed without worring about, like:

  1. Oh, I need to optimize my app!
  2. Oh, I need to create a server for app handling!
  3. Oh, I need a Redux/Redux-Saga installations for state managment in app!
  4. Oh, I need to install Webpack and spend a time to configure it!
  5. Oh, I need to optimize and minimize JS/CSS/etc. bundles!
  6. Oh, I need to install and configure testing environment!
  7. And a lot of other boring things...

So, by using this Templater you will save a lot of time and will stay focused only on your own app creation. Have fun :)

Features:

  • Fast React app creation.
  • Can be custumized as you wish.
  • BrowserSync Server is configured just out of the box!
  • All needed packages to work you can bootstap just by one command with lerna npm package: lerna bootstrap
  • Support TypeScript version 3^.

Installation

  1. Clone the repo on your Machine by:

     git clone https://github.com/ahmadnoorniazi/react-advance-boilerplate
    
  2. Start up your project via development, production or test compilation:

     npm run dev  - development mode
     npm run prod - production mode
     npm run test - testing mode
     npm tun test:watch - testing wtch mode
    

That's all what you need to start building your own project! Have fun and happy coding! :)

What is you have out of the box?

Webpack:

  • Fully support all Webpack 4^ possibilities.
  • Support code-splitting and bundles app creation out of the box.
  • Created 3 independent development cases: test, development, production. Each of them has own best optimized configuration.
  • Integrated Babel 7^ with supporting all ES6-ES8 features.
  • Integrated Ujlifty Webpack Plugin ^0 for optimizing JS/JSX/TS/TSX bundles for development and production.
  • Integrated Mini CSS Webpack Plugin ^0 + OptimizeCSS Assets Webpack Plugin ^5 for optimizing CSS bundles for development and production.
  • Integrated Webpack Bundle Analyzer ^3 for visual analyzing of code/bundles weight.
  • Transpile all app code into native ES5 for supporting even an oldest browsers.

React:

  • Support all new features from React 16.7@-alpha release.
  • Hooks, Suspence and Lazy load can be used out of the box.

Redux:

  • Redux^4.0.1 is fully integrated with React to start your work asap.
  • Including Redux-Saga^0.16.2 for async actions handling.

Routing:

  • React-Router^4.3.1 - React app from the start can be multy-page oriented.
  • Connected-React-Router^5.0.1 holdes synhromious app Redux and Browser Location states.

Styling:

  • Support CSS/SASS style markup.
  • Integrated CSSModules for independent component styling.
  • Including PostCSS ^2 post-processor.

Testing:

  • Integrated Jest 23^ + Enzyme 3^ testing environment.
  • Includes pre-commits hooks for testing app before commit (if test are present in).
  • Support JS/JSX/TS/TSX file extensions.

Linting:

  • Integrated prettier package for beatify pre-commited code.
  • Integrated eslint 5^ + tslint 5^ + stylelint 9^ linters based on the most popular schemas in the world (facebook, microsoft, airbnb, etc.) with React life-cycle ecosystem supporting.

Git:

  • Includes pre-commits hooks with husky ^1
  • Includes lint-stages ^1 for styling and testing whole app code (js/jsx/ts/tsx/css/scss/json) before commiting.
  • Checks code on lint rule errors before accept user commit.
  • Run test suits before accept user commit.

Technical information:

App technical environment that are 100% support with:

  • Node 10.5
  • Yarn 1.9.4
  • Webpack 4.29.1
  • React 16.8

App global package installing requirements:

  • node
  • yarn/npm
  • eslint/tsline/stylelint
  • lerna
  • typescript

FAQ:

1. "Command lerna bootstrap is does not works."

  • To bring it work you need install it globally first by command yarn add lerna -g. After that navigate to your working folder and repeat command lerna bootstrap one more time.

The dev environment to enable live-editing React components.

Now edit src/App.js.

Linting

This boilerplate project includes React-friendly ESLint configuration.

npm run lint

Start

start on localhost:1234

npm run dev

Building

A production script is included that builds your app to a dist folder

npm run build

Main Dependencies

  • React
  • Javascript
  • Typescript
  • Webpack 4
  • [webpack-dev-server]
  • [babel-loader]
  • [react-hot-loader]
  • [webpack-bundle-analyzer]

About

πŸ₯ StarterKit Builder for React-App creation on πŸš€ React 16 + πŸ“™ Redux 4 + 🚠 Router 4 + πŸ“ͺ Webpack 4 + 🎳 Babel 7 + πŸ“œ TypeScript 3 + πŸš” Linters 21 + πŸ”₯ HMR 3 + πŸ™‰ CodeSplitting + ⚑️ Prettier +❌ Eslint

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published