Web Development with Flask

This is intended for developers with little experience in development. RHHS CS Club Lesson 0.

Things to know

  1. Flask is a microframework to build web servers in Python.
  2. Using Flask still requires use of HTML, CSS and Javascript for the frontend. It will help you manage routing and your database.
  3. Should you build a mobile app, there’s a good chance that you may need to hit a server
  4. Like a lot of other frameworks, especially for Web Development, it may be difficult to use without bash / a unix-like system. Many dev tools will assume that you have bash and Linux or OSX. A majority of all servers are on unix-like systems.

Setting up a dev environment

  1. Do you use a Mac or run Linux? If so, things will just work and you can skip this section.
  2. Do you have a Chromebook, a version of Windows <10, or a particularly slow Windows machine? Register for codeanywhere and pick a Ubuntu Blank Development Stack. Ubuntu is a Linux flavour and will offer you bash.

3. Get bash on Windows. This might take a while, so setting up a codeanywhere account (following Step 2) may be faster. Otherwise, Google “bash on Windows” and follow those instructions.

4. Get a text editor. https://atom.io/ is always a good choice. Your text editor will handle syntax highlighting, linting, and in the future git tracking. Many developers prefer text editors or IDEs as they may be dealing with several different languages and are likely running their program from command line.

Creating your project

Create a folder. You can do this with a GUI, or from your terminal / bash. You can use cd foldername , cd ..,ls to navigate through your folders. ls will list folders and files in your current directory, cd will let you change directories (try hitting tab after typing the first few letters of your folder/file) and cd .. will let you exit the current directory. You can learn more here.

Now type in the following commands:

pip3 install flask

nano main.py

This should open up a lovely text editor! Now paste the following in, then exit and save the file.

from flask import Flask
app = Flask(__name__)

def hello_world():
return 'Hello, World!'

if __name__ == '__main__':

Now run python3 main.py . Provided no errors come up in your console, visiting localhost:5000 should give you a page that reads “Hello, World!”

Well great! You’ve just copied and pasted some code and it did something. Here’s Flask’s explanation of what the code does;

Now a lot of other things are going on too.

  • Flask is imported from your pip libraries
  • Pythons don’t need variables to be ‘declared’
  • Variable app is a Flask App
  • @app uses a decorator. This is a bit of a complex concept, but all you need to know is that @app.route('/link') will define the functions for what happens when you visit that page.
  • App is run with debug=true ; this causes Flask to display information about the errors instead of 404s or whatnot.

Before continuing, try adding another page with a different message.

Rendering Templates

Rendering templates == returning an HTML page instead of a string.

In the same folder as your main.py run the following:

mkdir templates to create a static folder

cd templates

touch index.html to create index.html. Of course, this can all be done through a GUI but this is good practice.

Visit https://html5up.net/ or any other location where you can find free HTML templates. Alternatively, you can build your own. You can learn about HTML (content) and later CSS (styling) at w3schools.

After downloading the template, copy the template’s index.html into your project/templates/index.html .

To use templates, update your first line to import render_template from Flask. It should be from flask import Flask, render_template

On the return in your function, you should return a template instead of the string. It should be return render_template('index.html')

Now if you restart the process running python3 main.py and visit localhost:5000 again then you’ll see something that looks probably very ugly since Flask still doesn’t know where any of your styles are.

To add styles, create a folder static in your project root directory (next to the templates folder) Put any styles and scripts from your template into that static folder.

Now go open index.html in your text editor. You’ll see a lot of styles included as so (there may be some other attributes);

<link rel="stylesheet" href="file_name_and_location">

The href is the link attribute and tells your browser where to find this file you’re trying to include. For each of these imports, add static/ to the link. All style imports should be at the top of the file, but you’ll also have script (javascript) imports at the bottom of the file. You should add static/ to these too. Don’t change anything with an http as that’s looking for a file somewhere on the internet.

Then everything should work fine and dandy! Try adding some more HTML pages and editing some of the HTML.

Other things if you’re bored

  1. Google stuff. Seriously, I probably spend around 10% of my time actually typing code. Read documentation and look online for help, even if you have an idea on how to do things. Look into Flask docs.
  2. Flask is one of many ways to build web servers. Other options include Django, Rails and NodeJS. Try researching them to learn about the pros and cons!
  3. Still bored? Learn some weird things about Javascript; https://medium.com/@daffl/javascript-the-weird-parts-8ff3da55798e
Like what you read? Give Carol Chen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.