{"id":103,"date":"2020-06-14T02:12:54","date_gmt":"2020-06-14T02:12:54","guid":{"rendered":"http:\/\/www.ridgeline-analytics.com\/?p=103"},"modified":"2020-09-30T02:54:25","modified_gmt":"2020-09-30T02:54:25","slug":"build-a-web-app-with-python-flask-and-aws-elastic-beanstalk","status":"publish","type":"post","link":"https:\/\/www.ridgeline-analytics.com\/index.php\/2020\/06\/14\/build-a-web-app-with-python-flask-and-aws-elastic-beanstalk\/","title":{"rendered":"Build a Web App with Python, Flask and AWS Elastic Beanstalk"},"content":{"rendered":"\n

Flask<\/a> is a popular framework for building lightweight server-side web applications with Python. As an antidote to the more complex and fully-featured siblings such as Django, Flask excels with a minimal footprint, intuitive MVC-style routing and view controls, and a host of thoughtful plugins for things like SQLAlchemy. <\/p>\n\n\n\n

In this article we’ll review my experience building a single-page Flask app and deploying it to AWS Elastic Beanstalk (EB), Amazon’s single-click scale-out application server. AWS EB orchestrates everything from spinning up an EC2 instance to setting up load balancing to configuring alerts and monitoring, all from a single command.

If you wish to take a look at the source code you can find it here: https:\/\/github.com\/Sassberto\/MP-GPX\/<\/a>

The example application can be found here: http:\/\/gpx.ridgeline-analytics.com\/<\/a><\/p>\n\n\n\n

As with all good programming projects I had an itch to scratch.  In my spare time I enjoy rock climbing and mountaineering, and I use a site called MountainProject.com<\/a> to identify, select and  research potential climbing routes.  The site has a handy feature which allows me to add routes to a todo list, where I can easily find them later.  This route data has all sorts of stuff, but most important is the latitude and longitude of the climb itself. <\/p>\n\n\n\n

\"\"
My todo list on MountainProject. Doesn’t do me much good if I’m not online…<\/figcaption><\/figure>\n\n\n\n

I needed to get this location data off the web site and onto a GPS device, or smartphone GPS app, so I could use it offline when I\u2019m in the field and out of cell reception.  
There\u2019s no really good way to do this with the web site, so enter the Mountain Project Data API:  https:\/\/www.mountainproject.com\/data<\/a>.vvI figured I could fetch my todo list, get all the routes on the list and their GPS data, and create a GPX file that could uploaded to my GPS device and would work offline.<\/p>\n\n\n\n

\"\"
Example of the GPX file loaded into Google Earth – Red Rock Canyon, Las Vegas NV<\/em><\/figcaption><\/figure>\n\n\n\n

Thankfully there is a Python library called gpxpy https:\/\/pypi.org\/project\/gpxpy\/<\/a> which seemed to be the ticket.  This library would allow me to create a GPX file with tracks and waypoint data.  By mapping the API fields from MountainProject to the gpxpy object, I could send a GPX file to the end user\u2019s device, which could now work offline.

The first step is to set up the development environment.  This is important to get right if you are going to use Elastic Beanstalk or want to package your app for automated deployment on a WSGI server.  Later we are going to look at the EB command line utility, but for now, set up your application something like this, with your flask app in the application.py file. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Install Flask and gpxpy using pip<\/a>, then use pip freeze > requirements.txt<\/code> to hold the external dependencies list for EB.  You\u2019ll also want to use git as the EB CLI allows you to deploy directly from a git repo, package to a zip, upload, and deploy all in one go. <\/p>\n\n\n\n

\"\"
Example of requirements.txt<\/figcaption><\/figure><\/div>\n\n\n\n

Creating the basic Flask app shell using the excellent tutorial<\/a> is enough to get started. Rigging routes to the controller and passing request variables is really handled very nicely. I figured I needed a form and a results page.  In my first iteration I just served the file on form submit, but that didn\u2019t give the end user much feedback, so I switched to two views, a form view and a results view. <\/p>\n\n\n\n

\"\"
application.py contains all the view logic and application routing.<\/figcaption><\/figure>\n\n\n\n

The MountainProject.com<\/a> API was pretty simple, it returns JSON which I passed mostly back as strings or lists.  It\u2019s pretty easy to map this to gxpy as you see below.  I elected to send the XML as an attachment to the request vs. write it to a temp file, it just seemed cleaner with no temp files to delete.   I used very little of Bootstrap to implement some styling and the built-in javascript validation.<\/p>\n\n\n\n

\"\"
The main function that gets Lat \/ Long from the API and makes GPS waypoints.<\/figcaption><\/figure>\n\n\n\n

Jinja2 templating is clean and and allows for nested templates and layouts.  I just used a single template with minimal show & hide UI logic.  It worked well with Flask’s message-flashing feature that allows for snappy UI responses.   You can also use the built-in development server for Flask, which will auto-restart when it detects a code change – very nice indeed.<\/p>\n\n\n\n

\"\"
Jinja2 template block for showing info and error messages.<\/figcaption><\/figure>\n\n\n\n
\"\"
The GPS Generator in action, showing flashed messages and dynamic content.<\/figcaption><\/figure><\/div>\n\n\n\n

Finally it was time to deploy this thing on EB.   EB is essentially a series of scrips that manage a virtual environment.  These environments can put up a scale-out web server infrastructure in just a few minutes.  As you can imagine they are very sensitive to configuration so you’ll want to get familiar with finding the logs in the AWS console. I won\u2019t  get into the details, but you can find comprehensive info here:https:\/\/docs.aws.amazon.com\/elasticbeanstalk\/latest\/dg\/create-deploy-python-flask.html<\/a><\/p>\n\n\n\n

\"\"
Just commit your code and run eb deploy – the rest is done for you.<\/figcaption><\/figure>\n\n\n\n

Once up and running managing the EB instance is very simple, and you can configure monitoring and alerts.  Setting up DNS and SSL would be a logical next step and requires a bit more technical work.   If millions of people somehow wanted to download their todo lists as GPS files, this would be a fantastic set up for a cloud-based application that needs scalability.<\/p>\n\n\n\n

\"\"
AWS Cloudwatch metrics up and running automatically. You can add lots more.<\/figcaption><\/figure>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Flask is a popular framework for building lightweight server-side web applications with Python. As an antidote to the more complex and fully-featured siblings such as Django, Flask excels with a minimal footprint, intuitive MVC-style routing and view controls, and a host of thoughtful plugins for things like SQLAlchemy. In this article we’ll review my experience … <\/p>\n

Continue reading “Build a Web App with Python, Flask and AWS Elastic Beanstalk”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[5,4],"_links":{"self":[{"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/posts\/103"}],"collection":[{"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":12,"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/posts\/103\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ridgeline-analytics.com\/index.php\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}