Articles in this section

Flask App Serving React Code

Pankhuri Verma
  • Updated
Follow

Here is an example of a flask app serving react code.

Create the files

Create an __init__.py file in the flask_app folder. This file will make flask_app a Python package. In that file put the following:

from flask import Flask

class ReverseProxied(object):
 def __init__(self, app):

     self.app = app
 def __call__(self, environ, start_response):

     script_name = environ.get('HTTP_X_SCRIPT_NAME', '')
     if script_name:

         environ['SCRIPT_NAME'] = script_name
         path_info = environ['PATH_INFO']
         if path_info.startswith(script_name):

             environ['PATH_INFO'] = path_info[len(script_name):]
     # Setting wsgi.url_scheme from Headers set by proxy before app
     scheme = environ.get('HTTP_X_SCHEME', 'https')
     if scheme:

       environ['wsgi.url_scheme'] = scheme
     # Setting HTTP_HOST from Headers set by proxy before app
     remote_host = environ.get('HTTP_X_FORWARDED_HOST', '')
     remote_port = environ.get('HTTP_X_FORWARDED_PORT', '')
     if remote_host and remote_port:

         environ['HTTP_HOST'] = f'{remote_host}:{remote_port}'
     return self.app(environ, start_response)

app = Flask(__name__,static_folder='static/build')
app.wsgi_app = ReverseProxied(app.wsgi_app)

And create file views.py in same folder

From flask_app import app
from flask import send_from_directory
import os

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):

   if path != "" and os.path.exists(app.static_folder + '/' + path):
       return send_from_directory(app.static_folder, path)

   else:
       return send_from_directory(app.static_folder, 'index.html')

Back in your Files section of Domino create a new file called run.py. In run.py add the following:

from flask_app import app
from flask_app import views

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

Change your app.sh file in the Files section of Domino to:

#!/usr/bin/env bash
export FLASK_APP=run.py

export FLASK_DEBUG=1
python -m flask run --host=0.0.0.0 --port=8888

At this point we are done with flask part, let’s move to the React. Add following parameter to the package.json

“homepage”: “.”

After that build React app with help of 

npm run build
It will produce build/ folder which you can upload to the flask_app/static/build/ And now application may be published

Related articles

Comments

0 comments

Please sign in to leave a comment.