#!/bin/bash
cyan=$'\e[96m'
yellow=$'\e[93m'
red=$'\e[91m'
magenta=$'\e[95m'
nc=$'\e[0m'
green=$'\e[32m'
blue=$'\e[34m'
lgreen=$'\e[92m'
clear=$'\e[0m'
react="$cyan""React""$nc"
vite="$yellow""Vite""$nc"
nextjs="$green""Nextjs""$nc"
django="$magenta""Django""$nc"
ColorGreen() {
echo -ne "$green$1$clear"
}
ColorBlue() {
echo -ne "$blue$1$clear"
}
ColorCyan() {
echo -ne "$cyan$1$clear"
}
ColorLightGreen() {
echo -ne "$lgreen$1$clear"
}
ColorYellow() {
echo -ne "$yellow$1$clear"
}
ColorMagenta() {
echo -ne "$magenta$1$clear"
}
ColorRed() {
echo -ne "$red$1$clear"
}
menu() {
clear
echo -ne "
$(ColorBlue '==============================')
$(ColorRed '____ ____ ____ _ _ ____ ____')
$(ColorRed '|___ |__/ |__| |\/| |___ [__')
$(ColorRed '| | \ | | | | |___ ___]')
$(ColorBlue '==============================')
WELCOME TO $(ColorLightGreen 'FRAMES')
$(ColorBlue '==============================')
Please select your framework
$(ColorBlue '1)') $(ColorCyan 'React')
$(ColorBlue '2)') $(ColorYellow 'Vite')
$(ColorBlue '3)') $(ColorGreen 'Next.js')
$(ColorBlue '4)') $(ColorMagenta 'Django')
$(ColorBlue '0)') $(ColorRed 'Exit')
$(ColorBlue 'Choose an option:') "
read -r frame
case $frame in
1) react;;
2) vite;;
3) nextjs;;
4) django;;
0) echo; echo -e "$(ColorCyan 'Goodbye!')"; exit 0;;
*) echo -e "$(ColorRed 'Invalid option.')"; menu;;
esac
}
react() {
read -r -p "How do you want to call your $react app? " app_name
if [ -z "$app_name" ]; then
echo -e "$(ColorRed 'The name cannot be empty')"; echo
react
fi
echo -ne "
Your app will be created as $(ColorCyan "$app_name"), is that correct?
$(ColorBlue '1)') $(ColorCyan 'Go ahead!')
$(ColorBlue '2)') $(ColorCyan 'I regret that lame name!')
$(ColorBlue '3)') $(ColorCyan 'Start over')
$(ColorBlue '0)') $(ColorRed 'Take me outta here!')
"
while true; do
read -r -p "$(ColorBlue 'Choose an option:') " input
case $input in
1) react_install;;
2) react;;
3) menu;;
0) echo; echo -e "$(ColorCyan 'Goodbye!')"; exit 0;;
*) echo -e "$(ColorRed 'Invalid input')" >&2
esac
done
}
nextjs() {
read -r -p "How do you want to call your $nextjs app? " app_name
if [ -z "$app_name" ]; then
echo -e "$(ColorRed 'The name cannot be empty')"; echo
nextjs
fi
echo -ne "
Your app will be created as $(ColorGreen "$app_name"), is that correct?
$(ColorBlue '1)') $(ColorGreen 'Go ahead!')
$(ColorBlue '2)') $(ColorGreen 'I regret that lame name!')
$(ColorBlue '3)') $(ColorGreen 'Start over')
$(ColorBlue '0)') $(ColorRed 'Take me outta here!')
"
while true; do
read -r -p "$(ColorBlue 'Choose an option:') " input
case $input in
1) nextjs_install;;
2) nextjs;;
3) menu;;
0) echo; echo -e "$(ColorGreen 'Goodbye!')"; exit 0;;
*) echo -e "$(ColorRed 'Invalid input')" >&2
esac
done
}
vite() {
read -r -p "How do you want to call your $vite app? " app_name
if [ -z "$app_name" ]; then
echo -e "$(ColorRed 'The name cannot be empty')"; echo
vite
fi
echo -ne "
Your app will be created as $(ColorYellow "$app_name"), is that correct?
$(ColorBlue '1)') $(ColorYellow 'Go ahead!')
$(ColorBlue '2)') $(ColorYellow 'I regret that lame name!')
$(ColorBlue '3)') $(ColorYellow 'Start over')
$(ColorBlue '0)') $(ColorRed 'Take me outta here!')
"
while true; do
read -r -p "$(ColorBlue 'Choose an option:') " input
case $input in
1) vite_install;;
2) vite;;
3) menu;;
0) echo; echo -e "$(ColorYellow 'Goodbye!')"; exit 0;;
*) echo -e "$(ColorRed 'Invalid input')" >&2
esac
done
}
django() {
read -r -p "How do you want to call your $django app? " app_name
if [ -z "$app_name" ]; then
echo -e "$(ColorRed 'The name cannot be empty')"; echo
django
fi
echo -ne "
Your app will be created as $(ColorMagenta "$app_name"), is that correct?
$(ColorBlue '1)') $(ColorMagenta 'Go ahead!')
$(ColorBlue '2)') $(ColorMagenta 'I regret that lame name!')
$(ColorBlue '3)') $(ColorMagenta 'Start over')
$(ColorBlue '0)') $(ColorRed 'Take me outta here!')
"
while true; do
read -r -p "$(ColorBlue 'Choose an option:') " input
case $input in
1) django_install;;
2) django;;
3) menu;;
0) echo; echo -e "$(ColorMagenta 'Goodbye!')"; exit 0;;
*) echo -e "$(ColorRed 'Invalid input')" >&2
esac
done
}
react_install() {
if [ -d "$app_name" ]; then
echo ; echo -e "$(ColorRed 'Directory already exists!')"; echo
react
else
echo; echo -e "$(ColorCyan "Creating React app $app_name...")"; echo
npx create-react-app "$app_name"
cd ./"$app_name" || exit 0
echo; echo -e "$(ColorCyan 'Installing prop-types...')"
yarn add prop-types
echo; echo -e "$(ColorCyan 'Installing eslint and prettier...')"
yarn add -D eslint prettier
echo; echo -e "$(ColorCyan 'Installing eslint peerdeps...')"
npx install-peerdeps -D @gbrachetta/eslint-config -Y
echo; echo -e "$(ColorCyan 'Modifying package.json...')"
jq '.eslintConfig.extends="@gbrachetta/eslint-config" | .+ {prettier: "@gbrachetta/prettier-config"} | .scripts += {lint:"eslint ./src/*.js --ignore-path .gitignore", "lint:fix":"npm run lint -- --fix", format:"prettier --write ./src/*.js \"{,!(node_modules)/**/}*.js\""}' package.json > tmpfile && mv tmpfile package.json
echo; echo -e "$(ColorCyan 'Linting...')"
yarn format ; yarn lint:fix
echo; echo -e "$(ColorCyan 'Finished! Now go and create a great app!')"
code .
exit 0
fi
}
nextjs_install() {
if [ -d "$app_name" ]; then
echo ; echo -e "$(ColorRed 'Directory already exists!')"; echo
nextjs
else
echo; echo -e "$(ColorGreen "Creating Next.js app $app_name... ")"; echo
yarn create next-app "$app_name"
cd ./"$app_name" || exit 0
echo; echo -e "$(ColorGreen 'Installing prop-types...')"
yarn add prop-types
echo; echo -e "$(ColorGreen 'Installing eslint and prettier...')"
yarn add -D eslint prettier
echo; echo -e "$(ColorGreen 'Installing eslint peerdeps...')"
npx install-peerdeps -D @gbrachetta/eslint-config -Y
echo; echo -e "$(ColorGreen 'Modifying package.json...')"
jq '.eslintConfig.extends="@gbrachetta/eslint-config" | .+ {prettier: "@gbrachetta/prettier-config"} | .scripts += {lint:"eslint ./src/*.js --ignore-path .gitignore", "lint:fix":"npm run lint -- --fix", format:"prettier --write ./src/*.js \"{,!(node_modules)/**/}*.js\""}' package.json > tmpfile && mv tmpfile package.json
echo; echo -e "$(ColorGreen 'Finished! Now go and create a great app!')"
code .
exit 0
fi
}
vite_install() {
if [ -d "$app_name" ]; then
echo ; echo -e "$(ColorRed 'Directory already exists!')"; echo
vite
else
file="src/App.jsx"
echo; echo -e "$(ColorYellow "Creating Vite React app $app_name...")"; echo
yarn create @vitejs/app "$app_name" --template react
cd ./"$app_name" || exit 0
echo; echo -e "$(ColorYellow 'Installing Vite dependencies...')"
yarn
echo; echo -e "$(ColorYellow 'Installing prop-types...')"
yarn add prop-types
echo; echo -e "$(ColorYellow 'Installing eslint and prettier..')"
yarn add -D eslint prettier
echo; echo -e "$(ColorYellow 'Installing eslint peerdeps...')"
npx install-peerdeps -D @gbrachetta/eslint-config -Y
echo; echo -e "$(ColorYellow 'Modifying files...')"
jq '.eslintConfig.extends="@gbrachetta/eslint-config" | .+ {prettier: "@gbrachetta/prettier-config"} | .scripts += {lint:"eslint ./src/*.jsx --ignore-path .gitignore", "lint:fix":"npm run lint -- --fix", format:"prettier --write ./src/*.jsx \"{,!(node_modules)/**/}*.js\""}' package.json > tmpfile && mv tmpfile package.json
echo
sed -i '' 's/<button /<button type="button" /g' "$file"
sed -i '' 's/(count) => count/(c) => c/g' "$file"
yarn format
yarn lint:fix
echo -e "$(ColorYellow 'Finished! Now go and create a great app!')"
code .
exit 0
fi
}
django_install() {
if [ -d "$app_name" ]; then
echo ; echo -e "$(ColorRed 'Directory already exists!')"; echo
django
else
echo; echo -e "$(ColorMagenta "Creating Django app $app_name... ")"; echo
mkdir "$app_name"
cd ./"$app_name" || exit 0
echo; echo -e "$(ColorMagenta 'Installing Project...')"
gh repo clone GBrachetta/boilerplate-django .
rm -rf .git
echo; echo -e "$(ColorMagenta 'Installing Django dependencies...')"
pipenv install
pipenv install --dev
git init
pipenv run python manage.py rename boilerplate "$app_name"
echo; echo -e "$(ColorMagenta 'Finished! Now go and create a great app!')"
echo; echo -e "$(ColorMagenta 'Activate your virtual environment and select the python interpreter!')"; echo
code .
exit 0
fi
}
menu