create react app script

create-react-app.sh

#!/bin/sh

# Print usage statement with option error message
function usage {
    message=$1
    if [ "$message" != "" ]; then
        echo "$message"
    fi
    echo -e "\nUsage: $0 <project-name>"
    exit 1
}

# Set project name variable; validate name
echo -e "\nChecking for valid project name..."
projectName=$1
if [ "$projectName" == "" ]; then 
    usage "No project name provided."
fi
if [ -d $projectName ]; then
    usage "Project $projectName already exists."
fi
    echo "Success" 

# Check if GitHub CLI is installed
githubCLI=gh
ghSpec=$(which $githubCLI 2>/dev/null)
if [ "$ghSpec" == "" ]; then
    usage "Unable to find GitHub CLI $githubCLI. See for https://cli.github.com for installation instructions"
fi

# Check that GitHub CLI is configured to use SSH
gitProtocol=$(gh config get git_protocol)
if [ "$gitProtocol" != "ssh" ]; then
    gh config set git_protocol ssh
fi

# Create directory and change into it
echo -e "\nCreating project '$projectName'"
gh repo create -y --private --template rs21io/react-project-template rs21io/$projectName
gh repo clone rs21io/$projectName

cd $projectName

# Check that npm is installed 
echo -e "\nChecking for npm..."
npmExecutable=npm
npmSpec=$(which $npmExecutable 2>/dev/null)
if [ "$npmSpec" == "" ]; then
    usage "Unable to find $npmExecutable. Install and re-run."
fi
    echo "npm found"

# Create app
npx create-react-app $projectName --template redux-typescript
cd $projectName
echo -e "\nInstalling React Router..."
npm i react-router @types/react-router
echo -e "\nInstalling Material-UI..."
npm i @material-ui/core
echo -e "\nInstalling Axios..."
npm i axios
echo -e "\nInstalling Cypress..."
npm i --save-dev cypress
echo -e "\nInstalling Husky..."
npm i --save-dev husky
echo -e "\nInstalling Sass..."
npm i --save-dev sass
echo -e "\nInstalling ESLint packages..."
npm i --save-dev eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-eslint-comments @typescript-eslint/eslint-plugin
echo -e "Installing Prettier packages..."
npm i --save-dev prettier prettier-eslint eslint-config-prettier prettier-eslint-cli eslint-plugin-prettier

# Move the files to the main directory and remove the tmp folder
echo -e "\nMoving React files to main directory"
cd ../
rm -rf $projectName/.git
mv $projectName tmp-folder
rm -rf tmp-folder/tsconfig.json
mv tmp-folder/* ./
mv tmp-folder/.* ./
rm -rf tmp-folder

# Initialize project with repository
git add .
git commit -m "initial commit"
git branch -M main