Using custom templates with Preact JS

Question

I read the part about using custom templates with preact like

preact create <username>/<repository> <project-name>

I'm wondering, is there any way I can use this for React templates? I want to get the CRA-template from https://github.com/facebook/create-react-app/tree/master/packages/cra-template and I couldn't find a good way to do it. I read about a customized version of CRA that is modified to work with Preact, but it fails.

Thanks

Answer 1

So you're talking about a few different things here.

preact create... is functionality that comes from Preact CLI. Preact CLI is a command line tool for building Preact progressive web applications. It is in the same category of a tool as CRA and therefore the two are not compatible. You can't use a Preact CLI command to set up a CRA app.

If you want to use CRA with Preact you absolutely can though. To use Preact with CRA, do the following in a CRA app:

Add customize-cra and react-app-rewired so you can customize CRA, then Preact so you can, well, use it.

yarn add customize-cra react-app-rewired preact

Change your scripts to match:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

Finally, create a config-overrides.js containing the following:

const { override, addWebpackAlias } = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  })
);

Should be good to go. You can remove react and react-dom from your dependencies.