#!/bin/bash # HOW TO USE THIS SCRIPT: RUN THIS SCRIPT OUTSIDE OF THE IONIC APP FOLDER # AND THIS SCRIPT WILL BUILD THE BUIL/ FOLDER THAT WILL UPLOADED TO HEROKU # OR simply say yes to download a sample app in the prompt # The purpose of this script is to create a build file from an IONIC application and deploy it in Heroku. # Usage: To use this script, in linux bash terminal type the following command and follow the prompts: # curl -s https://www.webune.com/forums/deply-ionic-app-to-heroku.html | bash clear thisScriptFileName="$(basename "$(test -L "$0" && readlink "$0" || echo "$0")")" #echo $thisScriptFileName currentWorkingDir=${PWD} # FULL PATH currentWorkingDirName=${PWD##*/} # THIS FOLDER NAME #https://stackoverflow.com/questions/1371261/get-current-directory-name-without-full-path-in-a-bash-script #echo ${PWD##*/} # name of current working folder only #exit date=`date "+%Y%m%d-%H%M%S"` appNameDefault="ionic-app-$date" printf "Hello\nPlease Read: The purpose of this script is to automate the deployment of IONIC apps (React or Angular) to Heroku. This scripts will generated a build/ folder from the ionic app and download the necessary node.js files to push the app into a heroku container.\n\nInstructions: Place this script file one folder level outside of the ionic app folder and provide the name of the IONIC app folder in the next prompt. If you want to create a new app from git you will be prompted in the 2nd prompt.\n\n" read -p "What is the name of this App [$appNameDefault] " appName if [[ $appName == "" ]]; then appName=$appNameDefault currentWorkingDirName=$appNameDefault set -e fi # EXAMPLE APP: ionic-app-20211014-172612 appTypeDefault="build" # defaul for react read -p "Is this a React or Angular App? [react] or angular" appType if [[ $appType == "" ]] || [[$appType == "react"]] then appType=$appTypeDefault set -e elif [[ $appType == "angular" ]] then appType="wwww" fi # this public-url will be used to generate the build and provide the public-url=[] option in the command publicUrlDefault="https://$appName.herokuapp.com" read -p "What is the PUBLIC URL where this script will be published? : [$publicUrlDefault] (type 'none' for the default /) " publicUrl if [[ $publicUrl == "" ]] then publicUrl="--public-url=$publicUrlDefault" set -e elif [[ $publicUrl == "none" ]] then publicUrl="" fi printf "Want to Ionic Serve?\n" read -p "NOTE: Script will serve app and not create an app in Heroku y/n [n] " ionicServe # check if IONIC APP ALREADY EXISTS OR CREATE A NEW ONE USING ionic.config.json exists if [ -f $appName/ionic.config.json ]; then echo "[OK] $appName was found" cd $appName else # IONIC APP DOESN'T EXISTS printf "APP FOLDER NOT FOUND: $appName\n" read -p "Do you want to clone from github? y/n? [y] :" download if [[ $download == "" ]] || [[ $download == "y" ]] then defaultRepo="https://github.com/edwinaquino/Ionic-react-Basic-Math-App.git" # Math App printf "Please provide the gihub repository\n" read -p "[$defaultRepo]" gitRepo if [[ $gitRepo == "" ]]; then gitRepo=$defaultRepo fi git clone --depth=1 $gitRepo $appName cd $appName npm install # CD into new APP Folder for next step to build set -e else echo "[x] No app was created. Exit." exit fi fi # NOTE: Script will serve app and not create an app in Heroku if [[ $ionicServe == "y" ]] then ionic serve exit fi echo "################################################" echo "VARIABLES:" echo "appName=$appName" newAppFolder=$currentWorkingDir/$appName echo "newAppFolder=$newAppFolder" newAppBuildFolder=$newAppFolder/$appType/ echo "newAppBuildFolder=$newAppBuildFolder" buildsFolder="../builds/$appName" echo "buildsFolder=$buildsFolder" newAppBuilsdFolder="$buildsFolder/$appType/" echo "newAppBuilsdFolder=$newAppBuilsdFolder" echo "publicUrl=$publicUrl" echo "appType=$appType" echo "currentWorkingDirName=$currentWorkingDirName" echo "################################################" #exit; # AT THIS POINT. INSIDE THE NEW IONIC APP NAME DIRECTORY if [ -d "build/" ]; then read -p "a build already exists. Do you want to re-build? y/n [y]" rebuild if [ rebuild == "y" ]; then echo "REBULDING...." ionic build $publicUrl cd $appName fi else echo "[OK] Creating Ionic Build to $publicUrl ..." ionic build $publicUrl fi echo "[OK] Copying build/ to $buildsFolder ..." # DELETE ANY PREVIOUS BUILD/ folder rm -rf $newAppBuilsdFolder # mkdir ../builds/appName/build mkdir -p $buildsFolder cp -r $newAppBuildFolder $buildsFolder # cd into the new app build folder cd $buildsFolder # cd to the newly builds/appname/ folder # NOW ON builds/appname/ echo "############# NOW ON builds/appname/ folder:" pwd packageFilePath="https://raw.githubusercontent.com/ionic-team/ionic-heroku-button/master/package.json" packageFile="package.json" echo "Downloading $packageFile ..." curl -o $packageFile $packageFilePath serverFilePath="https://raw.githubusercontent.com/ionic-team/ionic-heroku-button/master/server.js" serverFile="server.js" echo "Downloading $serverFile ..." curl -o $serverFile $serverFilePath # Add files to gitignore echo "node_modules" > .gitignore echo $thisScriptFileName > .gitignore echo "#### LS to show dowloaded files ######" ls echo "#### ######" #bash find string and replace in file #https://linuxhint.com/replace_string_in_file_bash/ # REPLACE www with build in server.js if [[ $appType == "build" ]] then # this is a react app, change the name of wwww folder to build sed -i 's/www/build/' $serverFile fi echo "[OK] Installing Dependencies..." npm install echo "[OK] Adding git to app.." git init git add . git commit -m "[Auto Generated by script] Ready for Heroku $appName" echo "[OK] Login to Heroku.." heroku login echo "[OK] Creating App in Heroku appName=$appName" heroku create $appName echo "[OK] Creating App git in Heroku" heroku git:remote -a $appName echo "[OK] Push App to Heroku" git push heroku master echo "[OK] Opening Heroku App in Browser" heroku open read -p "Do you want to open app new VS Code? y/n [y]" openCode if [[ $openCode == "y" ]] then echo 'Opening VS Code with build folder...' code . fi