Heroku Hosting Dynamic Website

Procedure

Set up a heroku account. www.heroku.com
Install heroku command line (CLI). Sign in your account via terminal.


sudo snap install --classic heroku
heroku login
heroku create # in your app folder https://hidden-dusk-28735.herokuapp.com/

Simplest method to directly update your website is via,


git push heroku master

In order to trigger the update event in heroku when github has tested my new code, the following steps are needed,
Authentication is needed to make github and heroku knowing each other. Like, github needs to know your heroku account, heroku needs to know github account,

 
heroku authorizations:create # this gives Client,ID,Description,Scope,Token

Put your token in github repo, Settings tab → Secrets → New repository secret → Enter Name and Value (from heroku authorizations) → Add secret
Also create a secret in it, heroku app name 'hidden-dusk-28735' from url.
Add this to your workflow yml,

 
- name: Deploy to Heroku
  uses: akhileshns/heroku-deploy@v3.12.12
  with: 
    heroku_api_key: ${{ secrets.HEROKU_API_TOKEN }}
    heroku_app_name: ${{ secrets.HEROKU_APP_NAME }}
    heroku_email: ${{ secrets.HEROKU_EMAIL }}

Create a file named Procfile in your repo.


web gunicorn --pythonpath src app:app

Update requirements.txt with gunicorn, and edit a file named runtime.txt


python-3.7.6

Go to your heroku app, Deploy tab → Github Deployment method → Connect to your github account and repo (App connected to GitHub) → Enable Automatic deploys

Structure

flowchart LR A[app.py] -->|render_template| B[index.html]; subgraph b[templates]; B end;

Basics of app.py


# For GET method
@app.route("/",methods=['GET'])
## GET with args
a = requests.args.get('a',None)
## To test GET
r = requests.get('http://ip:port/',params={'a':a})
dct = json.loads(response.content.decode('utf-8'))

# For POST method
@app.route("/",methods=['POST'])
## POST with args
a = requests.values.get('a',None)
## To test POST
r = requests.post('http://ip:port/',params={'a':a}) # for simple datatype
r = requests.post('http://ip:port/',json={'a':list}) # for image list
dct = json.loads(response.content.decode('utf-8'))

# return 
## template
render_template('xx.html',**kwargs)
## json
jsonpify({'output':output,'data':data})

Demo site

https://hidden-dusk-28735.herokuapp.com/

Just want to make a fake api, just like How to use fakestoreapi, some data look like this link https://fakestoreapi.com/products?limit=5.

May encounter this bug: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://hidden-dusk-28735.herokuapp.com/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

Solve by adding this to python


from flask_cors import CORS
app = Flask(__name__)
CORS(app)

Heroku Hosting Dynamic Website

Procedure

Structure

Demo site

References