create-test-craco-alias.sh

#!/bin/sh

# Create TypeScript CRA
npx create-react-app test-craco-alias --template typescript

cd test-craco-alias

# 1. Install craco and craco-alias
npm install @craco/craco --save
npm i -D craco-alias

# 2. Create tsconfig.paths.json in root directory
cat > tsconfig.paths.json <<- EOM
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*" : ["./components/*"]
    }
  }
}
EOM

# 3. Extend tsconfig.paths.json in tsconfig.json
cp tsconfig.json tsconfig.json.bak
sed '1a\
\  "extends": "./tsconfig.paths.json",
' < tsconfig.json.bak > tsconfig.json
rm tsconfig.json.bak

# 4. Create craco.config.js in root direcory
cat > craco.config.js <<- EOM
const CracoAlias = require("craco-alias");

module.exports = {
   plugins: [
     {
        plugin: CracoAlias,
        options: {
           source: "tsconfig",
           // baseUrl SHOULD be specified
           // plugin does not take it from tsconfig
           baseUrl: "./src",
           /* tsConfigPath should point to the file where "baseUrl" and "paths"
           are specified*/
           tsConfigPath: "./tsconfig.paths.json"
        }
     }
  ]
};
EOM

# 5. in package.json swap "start": "react-scripts start" with "start": "craco start"
cp package.json package.json.bak
sed -E 's/react-scripts (start|build|test)/craco \1/g' < package.json.bak > package.json
rm package.json.bak

# Add "components" package with "Bla" component
mkdir components

cat > components/Bla.tsx <<- EOM
import React from 'react';

const Bla = () => <span>Hello World!</span>;

export default Bla;
EOM

# Update App.tsx to use Bla
cp src/App.tsx src/App.tsx.bak
cat src/App.tsx.bak | sed '1a\
import Bla from "@components/Bla";
' | sed 's/Learn React/<Bla \/>/' > src/App.tsx
rm src/App.tsx.bak

echo "Now:"
echo "cd test-craco-alias"
echo "npm start"