Skip to content

Latest commit

 

History

History
136 lines (95 loc) · 7.37 KB

README.md

File metadata and controls

136 lines (95 loc) · 7.37 KB
Raw

Netlify Status

💡 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 [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.

Intro Video

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

Build errors

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.

LightHouse Audit

📦 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