Web Development with Flask
This is intended for developers with little experience in development. RHHS CS Club Lesson 0.
Things to know
- Flask is a microframework to build web servers in Python.
- Should you build a mobile app, there’s a good chance that you may need to hit a server
- 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
- Do you use a Mac or run Linux? If so, things will just work and you can skip this section.
- 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 ,
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
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__)
return 'Hello, World!'
if __name__ == '__main__':
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.
Flaskis imported from your pip libraries
- Pythons don’t need variables to be ‘declared’
- Variable app is a Flask App
@appuses 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 == 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
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
To use templates, update your first line to import
render_template from Flask. It should be
from flask import Flask, render_template
return in your function, you should return a template instead of the string. It should be
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 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
- 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.
- 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!