Hacking create-react-app to work with Preact & LESS without ejecting

Why?

• Preact is better at living together with external libraries and Custom Elements than React,
• Preact is smaller, even when adding preact-compat (React vs Preact),
• Preact's codebase is small enough to read in a single sitting,
• Preact didn't have license issues,
• We didn't want to eject and lose getting updates to react-scripts,
• We didn't want to change to another bootstrap framework or write our own,
• My cat told me to do it.

How?

I broke the hack down to 5 steps and you can view them as Pull Requests here in this repo:

Step 0 - Initialize using create-react-app

#1

We bootstrap our repo with create-react-app

Step 1 — Switch from react to preact

#2

This is the hack itself, we trick create-react-app into using preact by aliasing all the related modules.

Step 2 — Set babel’s IE target from 9 to 11

#3

We don't need to support IE9 or IE10, let's not build for them either!

Step 3 — Add LESS compilation

#4

Time to pre-process LESS into CSS.

Step 4 — Add webpack-subresource-integrity

#5

This is how you can add extra webpack plugins.

Look at Gustav, my cat!

PS: My team working on Tradeshift UI Components is hiring!