{"id":1915,"date":"2020-09-25T15:55:09","date_gmt":"2020-09-25T15:55:09","guid":{"rendered":"https:\/\/data-science.gotoauthority.com\/2020\/09\/25\/create-and-deploy-your-first-flask-app-using-python-and-heroku\/"},"modified":"2020-09-25T15:55:09","modified_gmt":"2020-09-25T15:55:09","slug":"create-and-deploy-your-first-flask-app-using-python-and-heroku","status":"publish","type":"post","link":"https:\/\/wealthrevelation.com\/data-science\/2020\/09\/25\/create-and-deploy-your-first-flask-app-using-python-and-heroku\/","title":{"rendered":"Create and Deploy your First Flask App using Python and Heroku"},"content":{"rendered":"<div id=\"post-\">\n<p><b>By <a href=\"https:\/\/www.linkedin.com\/in\/shahdivy\/\" target=\"_blank\" rel=\"noopener noreferrer\">Divy Shah<\/a>, Data Scientist<\/b>.<\/p>\n<p><img class=\"aligncenter size-large\" src=\"https:\/\/miro.medium.com\/max\/1250\/1*tRhiCu75pUVHeAJTliJTbA.png\" width=\"90%\"><\/p>\n<p><strong>Prerequisites<\/strong><\/p>\n<p><strong>Installation<\/strong><\/p>\n<p>After installing Python, install the other frameworks and libraries listed. You can easily install flask using the following command.<\/p>\n<div>\n<pre>pip install Flask\r\n#pip install \r\n\r\n<\/pre>\n<\/div>\n<p>\u00a0<\/p>\n<h3>Define the structure of your web app<\/h3>\n<p>\u00a0<\/p>\n<div>\n<pre>static\r\n    |_main.css\r\ntemplate\r\n    |_display.html\r\napp.py\r\ntrending.py\r\nrequirements.txt\r\n<\/pre>\n<\/div>\n<p>\u00a0<\/p>\n<p>The static directory contains your CSS files, and the template contains the HTML file, which is used for rendering.<\/p>\n<p>You can create a separate .py file for your logic and other operations or write code in the same app.py. I suggest creating a separate file will reduce the confusion.<\/p>\n<p>\u00a0<\/p>\n<h3>Step 1:<\/h3>\n<p>\u00a0<\/p>\n<p><em>Create your\u00a0<strong>app.py<\/strong>\u00a0file<\/em><\/p>\n<p>I used the waitress service because using this library is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library.<\/p>\n<p><strong>Install waitress<\/strong><\/p>\n<p>\u00a0<\/p>\n<p><img class=\"aligncenter size-large\" src=\"https:\/\/miro.medium.com\/max\/875\/1*7qcgOXBcIj8VClWBeLt2ZA.png\" width=\"90%\"><\/p>\n<p><em>app.py<\/em><\/p>\n<div>\n<pre>import requests\r\nfrom flask import Flask, render_template, redirect, url_for, request\r\nfrom datetime import datetime, timedelta\r\nimport time\r\nimport json\r\nimport os\r\nfrom trending import get_trending\r\n\r\napp = Flask(__name__)\r\n\r\n@app.route('\/')\r\n\r\ndef trending():\r\n   info = get_trending()\r\n   render_template('display.html', info=info['data'])\r\n   return res\r\n\r\nif __name__ == \"__main__\":\r\n     app.debug = False\r\n     port = int(os.environ.get('PORT', 33507))\r\n     waitress.serve(app, port=port)\r\n\r\n<\/pre>\n<\/div>\n<p>\u00a0<\/p>\n<p>As shown above, we used the\u00a0<strong>GET\u00a0<\/strong>Method to send data from the server.<\/p>\n<p>There are several other methods also available, which are:<\/p>\n<p><strong>POST:\u00a0<\/strong>It is used to send user\/form-data to the server and doesn\u2019t cache the transmitted data.<\/p>\n<p><strong>HEAD:<\/strong>\u00a0It is similar to GET, but the difference is it is used without the response body.<\/p>\n<p><strong>PUT:\u00a0<\/strong>It is<strong>\u00a0<\/strong>used to replace the current resource with uploaded content.<\/p>\n<p><strong>DELETE:<\/strong>\u00a0It is used to delete the target resource provided in the URL.<\/p>\n<p>\u00a0<\/p>\n<h3>Step 2:<\/h3>\n<p>\u00a0<\/p>\n<p>Create trending.py file, which is basically the file that contains your business logic. After creation import main function in app.py file.<\/p>\n<div>\n<pre>from trending import get_trending\r\n\r\n<\/pre>\n<\/div>\n<p>\u00a0<\/p>\n<p>Below, my trending.py file looks like:<\/p>\n<p><img class=\"aligncenter size-large\" src=\"https:\/\/miro.medium.com\/max\/875\/1*roXMOYAJXdR15qfTZHn9tw.png\" width=\"90%\"><\/p>\n<p><em>trending.py<\/em><\/p>\n<p>After collecting the data, we can render the output using an HTML file.<\/p>\n<p>The output data will be displayed on the HTML page.<\/p>\n<p>\u00a0<\/p>\n<h3>Step 3:<\/h3>\n<p>\u00a0<\/p>\n<p>Create an HTML file to render the output that you collected from the response object.<\/p>\n<p>Below is how my display.html file looks:<\/p>\n<p><img class=\"aligncenter size-large\" src=\"https:\/\/miro.medium.com\/max\/875\/1*ya6kNdtxUpCMv4I6X-lG4w.png\" width=\"90%\"><\/p>\n<p><em>display.html<\/em><\/p>\n<p>You are almost done with the coding part, and now it\u2019s time to deploy our first flask app.<\/p>\n<p>Before deploying the app, first, check the flask app on the localhost.<\/p>\n<p>\u00a0<\/p>\n<h3>Deployment Steps<\/h3>\n<p>\u00a0<\/p>\n<p><strong>1. Login to your Heroku account using CLI<\/strong><\/p>\n<p>You can log in by writing the following command in the terminal:<\/p>\n<p>\u00a0<\/p>\n<p><strong>2. Create a web app on Heroku<\/strong><\/p>\n<p>You can create a new application on Heroku using the following command:<\/p>\n<div>\n<pre>heroku create &lt; your_app_name &gt;\r\n\r\n<\/pre>\n<\/div>\n<p>\u00a0<\/p>\n<p><strong>3. Create\u00a0<em>requirements.txt<\/em>file in the same project directory<\/strong><\/p>\n<p>To generate the requirement.txt file, you can use the following command\u201d<\/p>\n<div>\n<pre>pip freeze &gt; requirements.txt\r\n\r\n<\/pre>\n<\/div>\n<p>\u00a0<\/p>\n<p><strong>4. Create a Procfile<\/strong><\/p>\n<p><em>Procfile<\/em>\u00a0is a Process file that is required for all Heroku applications. <em>Procfile<\/em> specifies the commands that are executed by the app on startup.<\/p>\n<p><a href=\"https:\/\/devcenter.heroku.com\/articles\/procfile\" target=\"_blank\" rel=\"noopener noreferrer\">Click here<\/a>\u00a0to read more on\u00a0<em>Procfile<\/em><\/p>\n<p>Enter the following in <em>Procfile<\/em>:<\/p>\n<p>\u00a0<\/p>\n<p>Here, the app is the name of your main (.py) file. In my case, it is app.py.<\/p>\n<p>If you haven\u2019t yet installed the gunicorn web server, then install it by using the following command:<\/p>\n<p>\u00a0<\/p>\n<p><em>NOTE: you have to create a Procfile without any file extensions.<\/em><\/p>\n<p><strong>5. Create\u00a0<em>runtime.txt\u00a0<\/em>to specify the Python version at runtime<\/strong><\/p>\n<p>After creating a runtime.txt, add your build Python version like below:<\/p>\n<p>\u00a0<\/p>\n<p>Now, we are all set!<\/p>\n<p><strong>6. Initialize an empty git repository and push the code<\/strong><\/p>\n<p>\u00a0<\/p>\n<p>Next, it is time to commit your final code using the following steps:<\/p>\n<div>\n<pre>git add .\r\ngit commit -m \"My first commit\"\r\ngit push heroku master\r\n\r\n<\/pre>\n<\/div>\n<p>\u00a0<\/p>\n<p>Your app is live now, and you can see your web app using the generated URL.<\/p>\n<p><em>Please check out my demo web application at:\u00a0<\/em><a href=\"https:\/\/trending-shows.herokuapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/trending-shows.herokuapp.com\/<\/a><\/p>\n<p><a href=\"https:\/\/medium.com\/towards-artificial-intelligence\/create-and-deploy-your-first-flask-app-using-python-and-heroku-aee04eaddc71\">Original<\/a>. Reposted with permission.<\/p>\n<p>\u00a0<\/p>\n<p><strong>Bio:<\/strong>\u00a0<a href=\"https:\/\/www.linkedin.com\/in\/shahdivy\/\" target=\"_blank\" rel=\"noopener noreferrer\">Divy Shah<\/a>\u00a0is passionate about solving real life and FinTech industries problem with the help of Data Science and Machine Learning Algorithms, and is always eager to learn and explore new Data Science algorithms and frameworks.<\/p>\n<p><b>Related:<\/b><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/www.kdnuggets.com\/2020\/09\/flask-app-using-python-heroku.html<\/p>\n","protected":false},"author":0,"featured_media":1916,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/posts\/1915"}],"collection":[{"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/comments?post=1915"}],"version-history":[{"count":0,"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/posts\/1915\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/media\/1916"}],"wp:attachment":[{"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/media?parent=1915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/categories?post=1915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wealthrevelation.com\/data-science\/wp-json\/wp\/v2\/tags?post=1915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}