Angular/Node Express + Flask API + Heroku, unsure about Procfile

Question

so my application is served by express locally with a flask API, so running

node server.js and python runner.py will initiate the frontend/backend.

However when deploying to heroku, only the frontend seems to work without any connection to the flask API, no backend resources get loaded.

This is my procfile with two dynos

web: node server.js
server: python runner.py

So when I navigate to the application after it has been deployed, just the frontend content is working.

However when I run python runner.py on my local machine all the backend content on Heroku starts to work. I'm not really sure how or why that works, but I want Heroku to deal with hosting the API.

If anyone has any tips or advice I'd appriciate it.

Runner.py

import os
from flask import Flask, request, jsonify, json, render_template
from flask_cors import CORS

app = Flask(__name__)

CORS(app)

# Runs the application
if __name__ == "__main__":
    app.run(debug=True) 

Server.js

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(__dirname + '/dist/client'));

app.get('/*', function(req,res) {

res.sendFile(path.join(__dirname+'/dist/client/index.html'));
});

app.listen(process.env.PORT || 8080);

Package.json scripts

  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --prod"
  }

Proxy.conf.json

{
    "/api": {
        "target": "http://localhost:5000",
        "secure": false
    }
}

Edit: May have found the issue - https://stackoverflow.com/a/54381386/12314065

Will give it a try and report back

Answer 1

The way I hosted my Angular/Flask project on Heroku single dyno was:

Procfile:

web: gunicorn wsgi:app

Runtime.txt:

python-3.7.6

wsgi.py

from app import app 

if __name__ == "__main__": 
        app.run() 

app.py

from flask import Flask,render_template, request, jsonify
from flask_compress import Compress

# initialize flask application
app = Flask(__name__,static_url_path='',static_folder='dist',template_folder='dist')
Compress(app)


@app.route('/')
def test():
    return render_template("index.html")


if __name__ == '__main__':
    # run web server
    app.run()

Package.json Scripts:

"scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.conf.json",
        "build": "ng build --aot --prod",
        "test": "echo \"Error: no test... minimal project\" && exit 1",
        "lint": "echo \"Error: no lint... minimal project\" && exit 1",
        "e2e": "echo \"Error: no e2e... minimal project\" && exit 1"
    }

Project Files:

How this works is:

1. Add NodeJS and Python buildpacks in Heroku.
2. Create Requirements.txt and Runtime.txt in root folder.
3. package.json must also be present in root folder.
4. Deploy the package.
5. The Angular project is built and stored in dist folder which is passed as parameter for flask app.
6. Flask app uses this a it's static folder for webpage contents.