VERSION 2

Version 2 - This is a more flexible version.  Just follow the instructions in the comments within the bash script below:

You can try to run the script with the following linux shell command:

curl -s https://www.webune.com/forums/ionic-heroku-bash.html | bash
#!/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


VERSION 1

With these commands you can deploy an IONIC + React or Angular application to Heroku. This collection of commands you can create a bash script shell file for example, lets call this file exportHeroku.sh:

#!/bin/bash
# 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

currentWorkingDir=${PWD}

echo $projectPath
date=`date "+%Y%m%d-%H%M%S"`
appNameDefault="webune-ionic-app-$date"
read -p "What is the name of this App [$appNameDefault] " appName
if [[ $appName == "" ]]; then
    appName=$appNameDefault
    set -e
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

buildFolderDefault="../builds/"
read -p "Full path of where you want to create the build folder?  [$buildFolderDefault] " buildFolder
if [[ $buildFolder == "" ]]
then
    buildFolder=$buildFolderDefault
    set -e
fi

appTypeDefault="build"
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



newAppFolder=$buildFolder/$appName
newAppFolderBuild=$newAppFolder/$appType
echo "appName=$appName"
echo "publicUrl=$publicUrl"
echo "buildFolder=$buildFolder"
echo "appType=$appType"
echo "Copy build folder= $currentWorkingDir/$appType"

#exit

echo "[OK] Creating Ionic Build to $publicUrl ..."
ionic build --$publicUrl
echo "[OK] Copying new build to $buildFolder ..."

mkdir -p $newAppFolder
cp -r $currentWorkingDir/$appType $newAppFolderBuild
cd $newAppFolder

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 $serverFilePath ..."

curl -o $serverFile $serverFilePath

echo "node_modules" > .gitignore

#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]" openCode
if [[] $openCode == "n"]]
then
    echo 'Opening VS Code with build folder...'
    code .
fi