Version 2 - This is a more flexible version. Just follow the instructions in the comments within the bash script below:
#!/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
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