💡 What is it?

React Boilerplate aims to extends Create React App with custom webpack config using react-app-rewired, and adding modules we use for every project. We highly recommend that use one of the two packages including TypeScript, to make a better product.

Check out Create React App for more documentation.

See Live Demo of the `Typescript: Complex` variant

🖇 Dependencies

🏎 Quick Start

git clone git@github.com:adaptdk/react_boilerplate.git {my-project}
cd {my-project}
yarn setup

This will ask install your modules, ask you some questions and setup your project based on those answers.

⚙ Get started

Inside the newly created project, you can run some built-in commands:

`yarn start`

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

`yarn test`

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

[Read more about testing.] https://reactjs.org/docs/testing.html

`npm run build` or `yarn build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

👌 Quality and Performance

This project ships with an all green LightHouse audit, include PWA features.

Continuously while development keep running the audit to monitor how your features are impacting your score, will help you develop great applications.

📦 Packages

This is the format, but needs to be updated with the right information

Features	Base (TS)	Complex (TS)	Widgets (TS)	Base	Complex
Status	Ready	Ready	Ready	Ready	Ready
Build Size Gzipped (kb)	`~41kb`	`~63kb`	`~40kb`	`~41kb`	`~62kb`
Redux	❌	✅	✅	❌	✅
Redux Persistor	❌	✅	✅	❌	✅
React Router	❌	✅	✅	❌	✅
React-Loadable	✅	✅	✅	✅	✅
Polyfills	✅	✅	✅	✅	✅
Service Worker	✅	✅	✅	✅	✅
Scss	✅	✅	✅	✅	✅
CSS Modules	✅	✅	✅	✅	✅
Autoprefixer	✅	✅	✅	✅	✅
Critical CSS (inline)	✅	✅	✅	✅	✅
Typescript	✅	✅	✅	❌	❌
Proxy local env	⚡	⚡	⚡	⚡	⚡
Multiple Widget	❌	❌	✅	❌	❌

✅ Full support ⚡ Supported (Needs configuration) ❌ No Support

Feature Documentation

Critical CSS

If you add .crit before your SCSS in your sass files like *.crit.scss, the file will be inlined in the top of the DOM instead of bundled in the main css file.

This is extremely vital to first paint, so use it for all the components, which is above the fold.

🎛 Configuration

Following options can be changed in the .env file

Setting	Type	Description
`BUNDLE_ANALYZER`	`boolean`	Analyze the Node Packages included in the build.
`PROFILER`	`boolean`	Get a profile of your build stats
`CRIT_CSS`	`boolean`	Enables Critical CSS generated by a headless Chrome
`POLYFILL`	`boolean`	Enables Polyfilling (IE11). - Relative to browserslist in package.json
`SOURCE_MAP`	`boolean`	Generated Source Map for the build - Useful for `Test` or `Staging` env.
`GZIP`	`boolean`	Enables Gzipping for the JS files
`HASH_BUILD`	`boolean`	Controls whether the build files should have a hashed filename for caching. - Useful if you're serving the files through another system if and they hash it
`PROXY`	`boolean`	Embed your React app and proxy against the local env. with the `PUBLIC_URL` as the URL.
`PROXY_URL`	`string`	The URL address that we'll proxy against

⛺️ Maintainers

Feel free to write any of the maintainers, or create an issue if you run into a problem.

Mads Thines

adaptdk / react_boilerplate

💡 What is it?

See Live Demo of the `Typescript: Complex` variant

🖇 Dependencies

🏎 Quick Start