This asumes you have node.js, ionic cli, git and heroku cli install in your computer. Follow these simple steps which provide the commands you will needs. I will not go into detail but rather the commands which you will need. My setups is a windows 10 laptop with Visual Code.
Open a terminal. If you are using Windows 10, I recommend Git CMD. Otherwise, powershell or Command prompt. I am using Windows PowerShell.
If you already have your Ionic App created, you can skipt to step 3.
Enter the name of your app to generate the appropiate custom commannds for your applicaiton:
1. Start by creating a new blank app. Let's create a unique name: start ionic-react-202110091633pm. With this command you will create a simple blank react app and avoid all the prompts and go straight to the applcation:
$ ionic start ionic-react-202110091633pm blank --type=react -capacitor --confirm --no-interactive
2. Change Directory to newly created app
$ cd ionic-react-202110091633pm
IMPORTANT: If you already have your app ready to be build. Make sure you test it with ionic serve
3. Build the application with the public url which is going to be the heroku server url:$ ionic build --public-url=https://ionic-react-202110091633pm.herokuapp.com
4. Get our of the newly created application and go down one level where we will create a copy of the build directory in standalone.$ cd ../
5. Make a new directory for our Heroku App. Here we are using the -p option to create the necessary directory structure.$ mkdir -p builds/ionic-react-202110091633pm
6. cd to the newly created app directory.$ cd builds/ionic-react-202110091633pm
7. Now copy the build/ directory from our IONIC app. NOTE. Change "build" to "www" for Angular.$ cp -r ../../ionic-react-202110091633pm/build ./
8. Download the package.json template file from ionic git repository
NOTE: Don't run this command from VS Code. It gets stuck. Rather, run it from external OS terminal$ curl -o package.json https://raw.githubusercontent.com/ionic-team/ionic-heroku-button/master/package.json
9. Download the server.js template file from ionic git repository.$ curl -o server.js https://raw.githubusercontent.com/ionic-team/ionic-heroku-button/master/server.js
10. Open folder in VS Code from the OS Terminal (ei: powershell or Command prompt)$ code .
BACK TO VS CODE:
11. In server.js change the xpress.static file to match your application type, Reactjs(build) or Angular(www)
app.use(express.static('www'));
TO
app.use(express.static('build'));
12. Install all dependencies.$ npm install
Optional: Star node server.
$ npm start
Express server listening on port 5000
OPEN BROWSWER TO: http://localhost:5000/
NOTE: you wont see anything because we set public-url=https://ionic-react-202110091633pm.herokuapp.com
13. Save git commit$ git init$ git add .$ git commit -m "Ready for Heroku ionic-react-202110091633pm"
14. Login to Herokup$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
15. Create app$ heroku create ionic-react-202110091633pm
16. set git remote heroku to https://git.heroku.com/ionic-react-202110091633pm.git$ heroku git:remote -a ionic-react-202110091633pm
17. Publish the app on heroku$ git push heroku master
18. View app on browser:$ heroku open
or
https://ionic-react-202110091633pm.herokuapp.com