Last active
May 21, 2021 07:49
-
-
Save GBrachetta/6fe0346d897941383e4ce6383746037a to your computer and use it in GitHub Desktop.
Script to scaffold React, Next.js, Vite/React and Django boilerplates
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| # Author: Guillermo Brachetta | |
| # Date Create: 27/04/2021 | |
| # Date Modified: 21/05/2021 | |
| # Description | |
| # Scaffolds React, Next.js, Vite/React, Vite/Vue and Django boilerplates. | |
| # Usage | |
| # Save script in a file without extension (the extension provided here is only for color syntax). | |
| # Grant the file permissions with `chmod +755 <filename>`. | |
| # Move file to /usr/local/bin (MacOS) for global access or to any directory present in $PATH | |
| # Run by typing `<filename>`. | |
| cyan=$'\e[96m' | |
| yellow=$'\e[93m' | |
| red=$'\e[31m' | |
| lred=$'\e[91m' | |
| magenta=$'\e[95m' | |
| nc=$'\e[0m' | |
| green=$'\e[32m' | |
| blue=$'\e[34m' | |
| lgreen=$'\e[92m' | |
| lblue=$'\e[94m' | |
| clear=$'\e[0m' | |
| react="${cyan}""React""${nc}" | |
| vite="${yellow}""Vite""${nc}" | |
| vite_vue="${lred}""Vite - Vue""${nc}" | |
| nextjs="${lgreen}""Nextjs""${nc}" | |
| django="${magenta}""Django""${nc}" | |
| ColorGreen() { | |
| echo -ne "$green${1}${clear}" | |
| } | |
| ColorBlue() { | |
| echo -ne "${blue}${1}${clear}" | |
| } | |
| ColorLightBlue() { | |
| echo -ne "${lblue}${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}" | |
| } | |
| ColorLightRed() { | |
| echo -ne "${lred}${1}${clear}" | |
| } | |
| menu() { | |
| clear | |
| echo -ne " | |
| $(ColorBlue '================================') | |
| $(ColorLightRed ' ____ ____ ____ _ _ ____ ____') | |
| $(ColorLightRed ' |___ |__/ |__| |\/| |___ [__') | |
| $(ColorLightRed ' | | \ | | | | |___ ___]') | |
| $(ColorBlue '================================') | |
| $(ColorLightGreen 'WELCOME TO FRAMES!') | |
| $(ColorBlue '================================') | |
| $(ColorYellow '*') $(ColorLightBlue 'Please select your framework') $(ColorYellow '*') | |
| $(ColorLightBlue '1)') $(ColorCyan 'React') | |
| $(ColorLightBlue '2)') $(ColorYellow 'Vite - React') | |
| $(ColorLightBlue '3)') $(ColorLightRed 'Vite - Vue') | |
| $(ColorLightBlue '4)') $(ColorLightGreen 'Next.js') | |
| $(ColorLightBlue '5)') $(ColorMagenta 'Django') | |
| $(ColorLightBlue '6)') $(ColorBlue 'Help') | |
| $(ColorLightBlue '0)') $(ColorRed 'Exit') | |
| " | |
| while true; do | |
| read -r -p "$(ColorBlue 'Choose an option:') " frame | |
| case ${frame} in | |
| 1) react ;; | |
| 2) vite ;; | |
| 3) vite_vue ;; | |
| 4) nextjs ;; | |
| 5) django ;; | |
| 6) helpme ;; | |
| 0) | |
| echo | |
| echo -e "$(ColorCyan 'Goodbye!')" | |
| exit 0 | |
| ;; | |
| *) | |
| echo -e "$(ColorRed 'Invalid option')" | |
| echo >&2 | |
| ;; | |
| esac | |
| done | |
| } | |
| react() { | |
| echo | |
| 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 ${react} app will be created as $(ColorCyan "${app_name}") in $(ColorCyan "$PWD"/"$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 option')" | |
| echo >&2 | |
| ;; | |
| esac | |
| done | |
| } | |
| nextjs() { | |
| echo | |
| 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 ${nextjs} app will be created as $(ColorLightGreen "${app_name}") in $(ColorLightGreen "$PWD"/"$app_name"), is that correct? | |
| $(ColorBlue '1)') $(ColorLightGreen 'Go ahead!') | |
| $(ColorBlue '2)') $(ColorLightGreen 'I regret that lame name!') | |
| $(ColorBlue '3)') $(ColorLightGreen '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 "$(ColorLightGreen 'Goodbye!')" | |
| exit 0 | |
| ;; | |
| *) | |
| echo -e "$(ColorRed 'Invalid option')" | |
| echo >&2 | |
| ;; | |
| esac | |
| done | |
| } | |
| vite() { | |
| echo | |
| 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 ${vite} app will be created as $(ColorYellow "${app_name}") in $(ColorYellow "$PWD"/"$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 option')" | |
| echo >&2 | |
| ;; | |
| esac | |
| done | |
| } | |
| vite_vue() { | |
| echo | |
| read -r -p "How do you want to call your ${vite_vue} app? " app_name | |
| if [ -z "${app_name}" ]; then | |
| echo -e "$(ColorRed 'The name cannot be empty')" | |
| echo | |
| vite_vue | |
| fi | |
| echo -ne " | |
| Your ${vite_vue} app will be created as $(ColorLightRed "${app_name}") in $(ColorLightRed "$PWD"/"$app_name"), is that correct? | |
| $(ColorBlue '1)') $(ColorLightRed 'Go ahead!') | |
| $(ColorBlue '2)') $(ColorLightRed 'I regret that lame name!') | |
| $(ColorBlue '3)') $(ColorLightRed '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_vue_install ;; | |
| 2) vite_vue ;; | |
| 3) menu ;; | |
| 0) | |
| echo | |
| echo -e "$(ColorLightRed 'Goodbye!')" | |
| exit 0 | |
| ;; | |
| *) | |
| echo -e "$(ColorRed 'Invalid option')" | |
| echo >&2 | |
| ;; | |
| esac | |
| done | |
| } | |
| django() { | |
| echo | |
| 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 ${django} app will be created as $(ColorMagenta "${app_name}") in $(ColorMagenta "$PWD"/"$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 option')" | |
| echo >&2 | |
| ;; | |
| esac | |
| done | |
| } | |
| react_install() { | |
| if [ -d "${app_name}" ]; then | |
| echo | |
| echo -e "$(ColorRed 'Directory already exists!')" | |
| echo | |
| react | |
| else | |
| if command -v brew; then | |
| echo | |
| echo -e "$(ColorCyan "Brew exists, skipping install...")" | |
| else | |
| echo | |
| echo -e "$(ColorCyan "Brew doesn't exist. Installing...")" | |
| echo | |
| /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" | |
| fi | |
| if ! command -v jq &>/dev/null; then | |
| echo | |
| echo -e "$(ColorCyan 'jq not found. Installing...')" | |
| echo | |
| brew install jq | |
| fi | |
| 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 'Initializing git repository')" | |
| echo | |
| git init | |
| git add . | |
| git commit -m "Initial commit by Frames" | |
| 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 | |
| if command -v brew; then | |
| echo | |
| echo -e "$(ColorLightGreen "Brew exists, skipping install...")" | |
| else | |
| echo | |
| echo -e "$(ColorLightGreen "Brew doesn't exist. Installing...")" | |
| echo | |
| /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" | |
| fi | |
| if ! command -v jq &>/dev/null; then | |
| echo | |
| echo -e "$(ColorLightGreen 'jq not found. Installing...')" | |
| echo | |
| brew install jq | |
| fi | |
| echo | |
| echo -e "$(ColorLightGreen "Creating Next.js app ${app_name}... ")" | |
| echo | |
| yarn create next-app "${app_name}" | |
| cd ./"${app_name}" || exit 0 | |
| echo | |
| echo -e "$(ColorLightGreen 'Installing prop-types...')" | |
| yarn add prop-types | |
| echo | |
| echo -e "$(ColorLightGreen 'Installing eslint and prettier...')" | |
| yarn add -D eslint prettier | |
| echo | |
| echo -e "$(ColorLightGreen 'Installing eslint peerdeps...')" | |
| npx install-peerdeps -D @gbrachetta/eslint-config -Y | |
| echo | |
| echo -e "$(ColorLightGreen '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 "$(ColorLightGreen 'Initializing git repository')" | |
| echo | |
| git init | |
| git add . | |
| git commit -m "Initial commit by Frames" | |
| echo | |
| echo -e "$(ColorLightGreen '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 | |
| if command -v brew; then | |
| echo | |
| echo -e "$(ColorYellow "Brew exists, skipping install...")" | |
| else | |
| echo | |
| echo -e "$(ColorYellow "Brew doesn't exist. Installing...")" | |
| echo | |
| /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" | |
| fi | |
| if ! command -v jq &>/dev/null; then | |
| echo | |
| echo -e "$(ColorYellow 'jq not found. Installing...')" | |
| echo | |
| brew install jq | |
| fi | |
| 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 | |
| echo -e "$(ColorYellow 'Initializing git repository')" | |
| echo | |
| git init | |
| git add . | |
| git commit -m "Initial commit by Frames" | |
| echo | |
| echo -e "$(ColorYellow 'Finished! Now go and create a great app!')" | |
| code . | |
| exit 0 | |
| fi | |
| } | |
| vite_vue_install() { | |
| if [ -d "${app_name}" ]; then | |
| echo | |
| echo -e "$(ColorRed 'Directory already exists!')" | |
| echo | |
| vite_vue | |
| else | |
| if command -v brew; then | |
| echo | |
| echo -e "$(ColorLightRed "Brew exists, skipping install...")" | |
| else | |
| echo | |
| echo -e "$(ColorLightRed "Brew doesn't exist. Installing...")" | |
| echo | |
| /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" | |
| fi | |
| if ! command -v jq &>/dev/null; then | |
| echo | |
| echo -e "$(ColorLightRed 'jq not found. Installing...')" | |
| echo | |
| brew install jq | |
| fi | |
| echo | |
| echo -e "$(ColorLightRed "Creating Vite Vue app ${app_name}...")" | |
| echo | |
| yarn create @vitejs/app "${app_name}" --template vue | |
| cd ./"${app_name}" || exit 0 | |
| echo | |
| echo -e "$(ColorLightRed 'Installing Vite dependencies...')" | |
| yarn | |
| echo | |
| echo -e "$(ColorLightRed 'Installing prop-types...')" | |
| yarn add prop-types | |
| echo | |
| echo -e "$(ColorLightRed 'Installing eslint and prettier..')" | |
| yarn add -D eslint prettier | |
| yarn add -D eslint eslint-plugin-vue | |
| echo | |
| echo -e "$(ColorLightRed 'Installing eslint peerdeps...')" | |
| npx install-peerdeps -D @gbrachetta/eslint-config -Y | |
| echo | |
| echo -e "$(ColorLightRed 'Modifying files...')" | |
| jq '.eslintConfig.extends="@gbrachetta/eslint-config" | .+ {prettier: "@gbrachetta/prettier-config"} | .scripts += {lint:"eslint ./src/*.vue --ignore-path .gitignore", "lint:fix":"npm run lint -- --fix", format:"prettier --write ./src/*.vue \"{,!(node_modules)/**/}*.js\""}' package.json >tmpfile && mv tmpfile package.json | |
| echo | |
| # yarn format | |
| # yarn lint:fix | |
| echo | |
| echo -e "$(ColorLightRed 'Initializing git repository')" | |
| echo | |
| git init | |
| git add . | |
| git commit -m "Initial commit by Frames" | |
| echo | |
| echo -e "$(ColorLightRed '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 | |
| if command -v brew; then | |
| echo | |
| echo -e "$(ColorMagenta "Brew exists, skipping install...")" | |
| else | |
| echo | |
| echo -e "$(ColorMagenta "Brew doesn't exist. Installing...")" | |
| echo | |
| /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" | |
| fi | |
| if ! command -v jq &>/dev/null; then | |
| echo | |
| echo -e "$(ColorMagenta 'jq not found. Installing...')" | |
| echo | |
| brew install jq | |
| fi | |
| 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}" | |
| git add . | |
| git commit -m "Initial commit by Frames" | |
| 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 | |
| } | |
| helpme() { | |
| clear | |
| echo -ne " | |
| $(ColorLightRed 'Frames') scaffolds apps in different flavors. | |
| It assumes you have $(ColorCyan 'Visual Studio Code') installed in your system | |
| and starts the editor for the app created. | |
| $(ColorLightRed 'Frames') also checks for the existence of $(ColorCyan 'Homebrew') | |
| and installs it if it's not present. | |
| It also checks for $(ColorCyan 'jq') and eventually installs it. | |
| $(ColorCyan 'jq') is used to modify json files according to the name chosen for the app. | |
| Make sure you run $(ColorLightRed 'Frames') in the parent directory of the app you want to scaffold. | |
| $(ColorLightRed 'Frames') was created by $(ColorLightBlue 'Guillermo Brachetta'). | |
| Feel free to use, modify and suggest changes to this script: | |
| $(ColorCyan 'https://gist.github.com/GBrachetta/6fe0346d897941383e4ce6383746037a') | |
| " | |
| echo | |
| read -r -p "$(ColorLightGreen 'Press enter to go back to the menu ')" | |
| menu | |
| } | |
| menu |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment