wooden table with flask, watch, camera, knife

Did you know you can host a webpage using nothing but Python code? You don’t have to use things like IIS or Apache. While you may not get all of the same features. When you are trying to write a simple application. Or if you want to host an API, this route is an option for you. In this article, I will describe how to create a basic webpage using Python and Flask.

Prerequisites

To follow this tutorial, you need the following three prerequisites:

  • install Python 3
  • Install Pip
  • Install Flask

To fulfill the first two, take a look at our article on Python Basics. That will describe how to install Python and pip.

Once you have python and pip installed, you can install flask by running:

Pip install flask

-or-

Pip3 install flask

Which command you run depends on whether you are running Python 2 or python 3. For the rest of the article, I will assume you are running Python 3.

Hello World

As is tradition, let’s start with a hello world example of Flask. When you execute the code below, it will start an instance of flask which will display hello world! in your web browser:

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
return 'Hello World!'

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

Save the above code into a file on your computer named myflask.pyTo run, type: python3 myflask.py

Should see the following displayed in your terminal window:* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Open your browser and browse to: http://127.0.0.1:5000. You should see the following:

Hello World Screenshot

If your screen looks like what is shown above, everything is working as expected. If you go back to your terminal, you should see some additional output:* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)127.0.0.1 – – [11/Feb/2018 14:03:00] “GET / HTTP/1.1” 200 -127.0.0.1 – – [11/Feb/2018 14:03:01] “GET /favicon.ico HTTP/1.1” 404 –

The first line is what we saw before telling us that the application is running and listening on port 5000. The next line is showing that our browser did an HTTP get command and the 200 tells us that it was successful. The last line is where it is trying to download the favicon, but it is not able to. The 404 error means that favicon.ico cannot be found. This makes sense because we did not create a favicon. For those who do not know, the favicon is the little icon that your web browser shows in the address bar for a web page. Not all web browsers even show them.

 

Working with Paths

In the previous example, we were just using the default path of ‘/‘. As you build out your application, you will want to serve different content based on the path the user browsed to. Let’s add a bit to our code:

from flask import Flask

app = Flask(__name__)

@app.route('/')
  def hello_world():
  return 'Hello World!'

@app.route(‘/aboutus')
  def hello_world():
  return ‘We are Awesome!'

@app.route(‘/aboutus')
  def hello_awesome():
  return ‘We are Awesome!'

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

In the above code, we have added another section:

@app.route(‘/aboutus')
  def hello_world():
  return ‘We are Awesome!'

this code adds a second path “/aboutus” that a user can navigate to and get a different result.

If we save the file again and run it again, you can still go to http://127.0.0.1:5000/ and see the same hello world output. But, you can now go here: http://127.0.0.1:5000/aboutus and you should see the following:

Hello Awesome

 

Showing HTML

Up to this point we have just been displaying plain text. What if we want to show something a bit more complicated? To show HTML in your page, we will need to import an additional module called render_template.

Change the first line of the example to be:

from flask import Flask, render_template

Then we are going to add another section to our example:

@app.route('/html')
  def static_page():
  return render_template('page.html')

Next. Create a folder called templates in the same folder as your myflask.py file.In the templates folder, create a file called page.html and input the following HTML:

<html>
<head></head>
<body>
<img src="https://i0.wp.com/www.idkrtm.com/wp-content/uploads/2018/02/1518385014_featured.jpeg?zoom=2&resize=777%2C437&ssl=1">
</body>
</html>

Your new myflask.py should look like this:

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
  def hello_world():
  return 'Hello World!'

@app.route('/aboutus')
  def hello_awesome():
  return 'We are Awesome!'

@app.route('/html')
  def static_page():
  return render_template('page.html')

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

When you run myflask.py you should still be able to go to the original two paths to see “Hello World!” and “We are Awesome!”. But now if you go to http://127.0.0.1:5000/html you should see an image of a guy wearing VR goggles:

vr goggles

Let’s exaplain this section a. bit more. We created a folder called templates and put in a file called page.html. Flask treats the HTML files in the templates folder as templates. Templates are static HTML files where you can optionally insert variables. In our case, we are not inserting any variable.s

We then imported the render_template module and used it to render a web page any time we visited the /html path.

In a future article we will further cover templates and what you can do with them. At this stage you should be able to create a basic flask application that shows different HTML files or messages depending on the URI path you visit.