⚠️ This project is now archived. You should use Vite with the Preact preset instead. ⚠️

create react app + preact = 💖

Love the CRA bootstrap? Hate big bundle sizes?

npm i -D cra-preact
# or
yarn add --dev cra-preact

Write your code as if you weren't using preact, continue importing react.

usage

Replace your build, start and test scripts

"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "cra-preact start",
+ "build": "cra-preact build",
+ "test": "cra-preact test",
  "eject": "react-scripts eject"
}

Cool, done. Now watch the bundle size go down.

bundle size drop porn

initial CRA bootstrap

medium size real-world production project

disclaimer

While rare, problems may occur.

• Please be aware that cra-preact is using preact's compatibility layer (preact/compat) and issues with it should be directed to preact's repo
• Make sure to develop and test with cra-preact to catch incompatibilities during development
• This project requires react-scripts v3+
• It is NOT recommended to plug this into existing projects just as a build script. Incompatibilities will most likely surface during runtime, not compile time
• Because it relies on fine details in react-scripts any minor upgrade of it might be a breaking change for cra-preact
• While it works with npm, there are no tests available for npm. Because npm link and npm install don't respect peer dependencies

This whole project was inspired by this github comment.