💡 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

• Yarn
• Node >=10

🏎 Quick Start

git clone [email protected]: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