In this post, I will give a quick introduction of how to build a web app using Flask. Flask is a web framework written in Python. It is not as mature as Django (the other popular Python web framework) as it lacks database abstraction layer, form validation, or direct integration with the pre-existing third party libraries. But, it is very easy to learn for beginners and can be made to work with third party libraries with some easy tweaks. As, this post is not about the differences between Flask and Django, so I will skip this part.
For more details on how to use Flask, visit Flask Tutorial.
Or for the detailed tutorial, visit miguelgrinberg.com
Build your first flask application
python -m venv venv
pip install flask
Create a package
In Python, a directory that contains
__init__.py is considered a package and can be imported to build an app (in this case).
from flask import Flask
app = Flask(__name__) #the name of the module and necessary to configure Flask
from app import routes
Then you need to create the files:
from app import app
return "Hello, World!"
from app import app
At this level, your project directory should look like this:
│ ├── __init__.py
│ ├── __pycache__
│ └── routes.py
Execute the app
So, your first app is ready. You can run the app by simply executing
This will return:
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 124-492-379
You can copy and paste the
http://127.0.0.1:5000/ into your preferred browser to view the return of this application. In this case, it will simply print
Hello, World. Next, we structure this application with some html templates with the help of Jinja2. Jinga is a template engine for the Python and handles templates in a sandbox.
Preview of SLRM application
Download SLRM Codes
git clone https://github.com/earthinversion/Sea-Level-Rise-Monitoring-Web-Application-Source-Code.git
Please note that SLRM application uses several other libraries inclduing the
boto3 API (for storing data into AWS-S3). This post do not deal with the description of the installation and use of the
boto3 API. But a look into the SLRM project directory may help you in building advanced apps.
How to deploy the app
Let us deploy the app on Heroku using
Heroku is a cloud platform supporting several programming languages. It allows a developer to build, run, and scale different applications. Heroku hosts its services on the Amazon’s EC2 cloud computing platform. The Heroku applications have a unique domain name “appname.herokuapp.com” which routes the run requests to the correct application containers or “dynos”.
For deploying an app on the Heroku server, we first need to install Heroku on the local computer. On Mac, just install using the Heroku and Git installer and it should do the job.
Change directory to the Sea-Level-Rise-Monitoring-Web-Application-Source-Code
Initialize the git and create virtual environment locally
python -m venv venv #create a virtual environent
source venv/bin/activate #activate the virtual environment
virtualenv creates a fresh Python instance. You need to install all the Python dependencies. The dependencies are listed in the
All these dependencies can be quickly installed using the command:
pip install -r requirements.txt
Prepare the folder
For the app to be deployed, you need the following file:
run.py: this file reads the `slrm` app that exists in the directory `app`
.gitignore: to ignore all the files you don't want to deploy on the server
web: gunicorn run:app
pip freeze > requirements.txt
Deploy on Heroku
heroku create slrm-app # change slrm-app to a unique name
git add . # add all files to git
git commit -m 'Initial app boilerplate'
git push heroku master # deploy code to heroku
heroku ps:scale web=1 # run the app with a 1 heroku "dyno"
Then, you should be able to view the app on
Edit the app
You can edit and redeploy the app, following:
git status # view the changes
git add . # add all the changes
git commit -m 'a description of the changes'
git push heroku master
Disclaimer of liability
The information provided by the Earth Inversion is made available for educational purposes only.
Whilst we endeavor to keep the information up-to-date and correct. Earth Inversion makes no representations or warranties of any kind, express or implied about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services or related graphics content on the website for any purpose.
UNDER NO CIRCUMSTANCE SHALL WE HAVE ANY LIABILITY TO YOU FOR ANY LOSS OR DAMAGE OF ANY KIND INCURRED AS A RESULT OF THE USE OF THE SITE OR RELIANCE ON ANY INFORMATION PROVIDED ON THE SITE. ANY RELIANCE YOU PLACED ON SUCH MATERIAL IS THEREFORE STRICTLY AT YOUR OWN RISK.