Bash를 사용한 create-react-app

안녕하세요, 이것은 나의 첫 번째 게시물입니다!

이 게시물에서는 Bash를 사용하여 React 프로젝트를 설정하는 방법을 공유하려고 합니다.

내가 한 일을 왜 했지??

나는 Ubuntu를 기본 운영 체제로 사용하기 시작했고 결국 개발자로서 Bash를 배우기 시작해야 할 시점에 도달했습니다. Bash의 스크립팅은 항상 매력적으로 느껴졌지만 제가 학습 로프에 있는 동안 일상적인 작업에 도움이 될 수 있는 실제 스크립트를 만들고 싶었습니다.
따라서 React 프로젝트를 시작하는 동안 초보자가 하는 가장 일상적인 일 중 하나는 터미널을 열고 위치로 이동하여 npx create-react-app xyz-project 를 입력하고 완료될 때까지 기다렸다가 src 및 public을 입력하고 모든 것을 제거한 다음 마지막으로 시작하는 것입니다. 저 또한 React의 초기 단계에 있었기 때문에 우리가 할 수 있는 다른 모든 것에 대한 지식이 많지 않았지만 어쨌든.
내 스크립트가 하는 일은 프로젝트 이름을 실행하고 입력하고 tailwind를 설치할지 여부(Tailwind CSS와 goto 프레임워크가 마음에 듭니다)를 입력하기만 하면 개발을 시작할 준비가 된 것입니다.

#!/bin/bash
read -p "Enter the name of the project: " projectName
echo "#######################################"
echo "########### Starting Script ###########"
echo "#######################################"

#Change the directory according to wherever you store your development file
startupFolder='/home/brownie/Desktop/Development/react-startup-files'

npx create-react-app $projectName

cd $projectName

echo "This is the $projectName directory"

ls -la

echo "Removing src folder"

rm -r src/

mkdir src

cd src

touch index.js App.js index.css

mkdir components

echo "The new src/ directory"

for i in $(ls)
do
    echo $i
done

echo "Writing in the index.js"
cp $startupFolder/index.js index.js
cat index.js

echo "Writing in the App.js file" 
cp $startupFolder/App.js App.js
cat App.js

cd ..

echo "Removing public folder"

rm -r public/

mkdir public

cd public/

touch index.html

echo "The new public/ directory"

for i in $(ls)
do
    echo $i
done

echo "Writing index.html"
cp $startupFolder/index.html index.html
cp $startupFolder/favicon.ico ./
cat index.html

cd ..

read -p "Do you want to install Tailwind?(y/n) " tailwindChoice

if [[ "$tailwindChoice" == "y" ]]
then
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

    echo "Writing the index.css file"
    cd src/
    cp $startupFolder/index.css index.css
    cat index.css

    echo "Writing the tailwind.config.js file"
    cd ..
    cp $startupFolder/tailwind.config.js tailwind.config.js
    cat tailwind.config.js
fi

echo "Removing Git Files"
sudo rm -r .git
rm .gitignore

read -p "Do you want to open in code?(y/n) " codeChoice

if [[ "$codeChoice" == "y" ]]
then
    code .
fi

echo "Closing Terminal"

exit

물론 기본 생산성 워크플로를 개선하기 위한 기본 bash 스크립트라고 할 수 있는 수정 사항이 많이 있을 수 있습니다.
필요에 따라 이 스크립트를 업그레이드하는 방법에 대한 생각을 자유롭게 공유하십시오.