How do i host a python flask web application?
by Salvador Villalon
Introduction
In each section, I will show pieces of code for you to follow along. All the code used in the tutorial is available in this GitHub Repository.
What is HTTP and What Does it Have to do with Flask?
HTTP is the protocol for websites. The internet uses it to interact and communicate with computers and servers. Let me give you an example of how you use it everyday.
When you type the name of a website in the address bar of your browser and you hit enter. What happens is that an HTTP request has been sent to a server.
For example, when I go to my address bar and type google.com, then
hit enter, an HTTP request is sent to a Google Server. The Google Server receives the request and needs to figure how to interpret that request. The Google Server sends back an HTTP response that contains the information that my web browser receives. Then it displays what you asked for on a page in the browser.
How is Flask involved?
We will write code that will take care of the server side processing. Our code will receive requests. It will figure out
what those requests are dealing with and what they are asking. It will also figure out what response to send to the user.
To do all this we will use Flask.
What is Flask?
Home
About
{% block content %}
{% endblock %}
Line 13–14: We use the function calledurl_for[]
. It accepts the name of the function as an argument. Right now we gave it the name of the function. More information on url_for[]
function.
The two lines with the curly brackets will be replaced by the content of home.html and about.html. This willdepend on the URL in which the user is browsing.
These changes allow the child pages [home.html and about.html] to connect to the parent [template.html]. This allows us to not have to copy the code for the navigation menu in the about.html and home.html.
Content of about.html:
About Flask
{% extends "template.html" %}
{% block content %}
About Flask
Flask is a micro web framework written in Python.
Applications that use the Flask framework include Pinterest,
LinkedIn, and the community web page for Flask itself.
{% endblock %}
Content of home.html:
Flask Tutorial
{% extends "template.html" %}
{% block content %}
My First Try Using Flask
Flask is Fun
{% endblock %}
Let’s try adding some CSS.
Adding CSS to Our Website
An important note to remember
In the same way as we created a folder called templates to store all our HTML templates, we need a folder called static.
In static, we will store our CSS, JavaScript, images, and other necessary files. That is why it is important that
you should create a CSS folder to store your stylesheets. After you do this, your project folder should look like this:
Linking our CSS with our HTML file
Our template.html is the one that links all pages. We can insert
the code here and it will be applicable to all child pages.
Flask Parent Template
{% block content %}
{% endblock %}
Line 7: Here we are giving the path to where the template.css is located.
Now see the changes: //localhost:5000/about.
Moving Forward with Flask and virtualenv
Now that you are familiar with using Flask, you may start using it in your future projects. One thing to always do is use virtualenv.
Why use virtualenv?
You may use Python for others projects besides web-development.
Your projects might have different versions of Python installed, different dependencies and packages.
We use virtualenv to create an
isolated environment for your Python project. This means that each project can have its own dependencies regardless of what dependencies every other project has.
Getting started with virtualenv
First, run this command on your command prompt or terminal:
pip install virtualenv
Second, do the following:
virtualenv “name of virtual environment”
Here you can give a name to the environment. I usually give it a name of virtual. It will look like this: virtualenv virtual
.
After
setting up virtual environment, check your project folder. It should look like this. The virtual environment needs to be created in the same directory where your app files are located.
How the directory looks likeActivating
the virtual environment
Now go to your terminal or command prompt. Go to the directory that contains the file called activate. The file called activate is found inside a folder called Scripts for Windows and bin for OS X and Linux.
For OS X and Linux Environment:
$ name of virtual environmnet/bin/activate
For Windows Environment:
name of virtual environment\Scripts\activate
Since I am using a Windows machine, when I activate the environment it will look like this:
You should see this at beginning of your command prompt lineThe next step is to install flask on your virtual environment so that we can run the application inside our environment. Run the command:
pip install flask
Run your application and go to
//localhost:5000/
We finally made our web application. Now we want to show the whole world our project.
[More information on virtualenv can be found in the following guides on virtualenv and Flask Official
Documentation]
Let’s send it to the Cloud
To show others the project we made, we will need to learn how to use Cloud Services.
Deploy Your Web Application to the Cloud
To deploy our web application to the cloud, we will use Google App Engine [Standard Environment]. This is an example of a Platform as
a Service [PaaS].
PaaS refers to the delivery of operating systems and associated services over the internet without downloads or installation. The approach lets customers create and deploy applications without having to invest in the underlying infrastructure [More info on PaaS check out TechTarget].
Google App Engine is a
platform as a service offering that allows developers and businesses to build and run applications using Google’s advanced infrastructure — TechOpedia.
Before you Start:
You will need a Google
Account. Once you create an account, go to the Google Cloud Platform Console and create a new project. Also, you need to install the Google Cloud SDK.
At the end of this tutorial your project structure will look like this.
Project Folder StructureWe will need to create three new files: app.yaml, appengine_config.py, and requirements.txt.
Content of app.yaml:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /static
static_dir: static
- url: /.*
script: main.app
libraries:
- name: ssl
version: latest
If you were to check
Google’s Tutorial in the part where they talk about content of the app.yaml, it does not include the section where I wrote about libraries.
When I first attempted to deploy my simple web app, my deployment never worked. After many attempts, I learned that we needed to include the SSL library.
The SSL Library allows us to
create secure connections between the client and server. Every time the user goes to our website they will need to connect to a server run by Google App Engine. We need to create a secure connection for this. [I recently learned this, so if you have a suggestions for this let me know!]
Content of appengine_config.py:
from google.appengine.ext import vendor
# Add any libraries installed in the "lib" folder.
vendor.add['lib']
Content of requirements.txt:
Flask
Werkzeug
Now inside our virtual environment
[make sure your virtualenv is activated],we are going to install the new dependencies we have in requirements.txt. Run this command:
pip install -t lib -r requirements.txt
-t lib: This flag copies the libraries into a lib folder, which uploads to App Engine during deployment.
-r requirements.txt: Tells pip to install everything from requirements.txt.
Deploying the Application
To deploy the application to
Google App Engine, use this command.
gcloud app deploy
I usually include — project [ID of Project]
This specifies what project you are deploying. The command will look like this:
gcloud app deploy --project [ID of Project]
The Application
Now check the URL of your application. The application will be store in the following way:
"your project id".appspot.com
My application is here:
//sal-flask-tutorial.appspot.com
Conclusion
From this tutorial, you all learned how to:
- Use the framework called Flask to use Python as a Server Side Language.
- Learned how to use HTML, CSS, and Flask to make a website.
- Learned how to create Virtual Environments using virtualenv.
- Use Google App Engine Standard Environment to deploy an
application to the cloud.
What I learned
I learned three important things from this small project.
First, I learned about the difference between a static website and a web application
Static Websites:
- Means that the server is serving HTML, CSS, and JavaScript files to the client. The content of the site does not change when the user interacts with it.
Web
Applications:
- A web application or dynamic website generates content based on retrieved data [most of the time is a database] that changes based on a user’s interaction with the site. In a web application, the server is responsible for querying, retrieving, and updating data. This causes web applications to be slower and more difficult to deploy than static websites for simple applications
[Reddit].
Server Side and Client Side:
- I learned that a web application has two sides. The client side and the server side. The client side is what the user interacts with and the server side is where the all the information that the user inputted is processed.
Second, I learned about Cloud
Services
Most of my previous projects were static websites, and to deploy them I used GitHub Pages. GitHub Pages is a free static site hosting service designed to host projects from a GitHub Repository.
When working with web applications, I could not use GitHub Pages to host them. GitHub Pages is only meant for static websites not for something dynamic like a web application that requires a server and a
database. I had to use Cloud Services such as Amazon Web Services or Heroku
Third, I learned how to use Python as a Server Side Language
To create the server side of the web application we had to use a server side language. I learned that I could use the framework called Flask to use Python as the Server Side Language.
Next Steps:
You can build all sorts of things with Flask. I realized that Flask helps make the code behind the website easier to read. I have made the following applications during this summer of 2018 and I hope to make more.
Personal Projects
- A Twilio SMS App
- My Personal
Website
During my internship
- Part of a project where I learned about Docker and Containers
Here is the list of resources that helped me create this tutorial:
- “App Engine — Build Scalable Web & Mobile Backends in Any Language | App Engine | Google Cloud.” Google, Google,
cloud.google.com/appengine/.
- “Building a Website with Python Flask.” PythonHow, pythonhow.com/building-a-website-with-python-flask/.
- “Flask — Lecture 2 — CS50’s Web Programming with Python and JavaScript.” YouTube, 6 Feb. 2018,
youtu.be/j5wysXqaIV8.
- “Getting Started with Flask on App Engine Standard Environment | App Engine Standard Environment for Python | Google Cloud.” Google, Google, cloud.google.com/appengine/docs/standard/python/getting-started/python-standard-env.
- “Installation.”
Welcome | Flask [A Python Microframework], flask.pocoo.org/docs/0.12/installation/.
- “Python — Deploying Static Flask Sites for Free on Github Pages.” Reddit,
www.reddit.com/r/Python/comments/1iewqt/deploying_static_flask_sites_for_free_on_github/.
- Real Python. “Python Virtual Environments: A Primer — Real Python.” Real Python, Real Python, 7 Aug. 2018,
realpython.com/python-virtual-environments-a-primer/.
- “What Is Cloud Services? — Definition from WhatIs.com.” SearchITChannel, searchitchannel.techtarget.com/definition/cloud-services.
- “What Is Google App Engine [GAE]? — Definition from Techopedia.”
Techopedia.com, www.techopedia.com/definition/31267/google-app-engine-gae.
If you have any suggestions or questions, feel free to leave a comment.
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
How do I host a Flask Web App?
Step 1: Creating a Python Virtual Environment for your Project. Before you get started, you need to set up your Python developer environment. ... .
Step 2: Creating a Minimal Flask App. ... .
Step 3: Setting Up Your Gunicorn Configuration. ... .
Step 4: Pushing the Site to GitHub. ... .
Step 5: Deploying to DigitalOcean with App Platform..
Where can I host a Flask website?
Easiest and fastest way to host Flask Python.
PythonAnywhere.com [web-SSH; web-instant-MySQL-db; web-IDE; instant deployment of flask, free; easy logs; github/single-file-upload support; SFTP/SSH requires pay].
Nitrious.io [web-IDE; SSH; free; requires "websocket"-supporting browser; upgradeable cloud service].
How do you deploy a Python Flask Web app for free?
How can I deploy my flask web app on vercel?.
Download vercel cli using npm i -g vercel . Refer here..
add requirements. txt file with all the python packages mentioned you've used..
add vercel.json file and add the below content[here I am using app.py as my main file].
How do I host a Flask API in Python?
So, let's hit it!.
Create a repo on GitHub. First things first, we need our working code to be available on GitHub, because that's how we are linking it to Heroku. ... .
Create a venv. ... .
Activate the venv. ... .
Install flask and gunicorn. ... .
Create the . ... .
Create the api.py file. ... .
Create a requirements. ... .
Create a Procfile..