Made withFlaskTutorial

Building Websites With Flask - Python and Flask #1

J

John Elder

Creator on the Flask channel

Watch on YouTube ↗

79K viewsJan 24, 202017:51 runtime

Learn how to build your first website with Python and Flask in this beginner-friendly tutorial. This video guides you through setting up a project with a virtual environment, installing Flask, and creating your first application. You'll discover how to define routes, render HTML…

Chapters

#flask#tutorial#backend

Introduction to Flask

Flask is a lightweight and minimalist Python web framework, often called a "micro-framework." It's designed to be simple, flexible, and fast, allowing you to build web applications quickly without a lot of boilerplate code. This video demonstrates building a basic static website in just a few minutes.

Initial Setup & Environment

Before writing code, set up the project environment:

Create a Project Directory: mkdir my_flask
Create a Virtual Environment: Use a virtual environment to manage project-specific dependencies.
```
python -m venv virtual
```
Activate the Environment:
- Windows: source virtual/scripts/activate
- Mac/Linux: source virtual/bin/activate
Install Flask: Use pip to install Flask and its dependencies inside the activated environment.
```
pip install Flask
```

Tip
Always use a virtual environment for your Python projects to avoid dependency conflicts.

Creating a Basic Flask App

The core of a Flask application is a single Python file (e.g., app.py).

Key Code Structure:

Import Flask: from flask import Flask, render_template
Create App Instance: app = Flask(__name__)
Define a Route: Use the @app.route() decorator to map a URL to a Python function.
Create a View Function: This function handles requests for the associated route and returns a response.

# app.py
from flask import Flask, render_template

# Create a Flask Instance
app = Flask(__name__)

# Create a route decorator
@app.route('/')
def index():
    return render_template("index.html")

Running the Development Server

Use the flask command to start the local development server, which runs on http://127.0.0.1:5000 by default.

flask run

Important
By default, the Flask development server does not automatically reload when you make code changes. You must stop the server (Ctrl+C) and restart it (flask run) to see your updates. This will be addressed in a future video.

Using HTML Templates

Instead of returning plain strings from view functions, use templates to serve full HTML pages.

render_template() Function: This Flask function finds and renders an HTML file.
templates Directory: By convention, Flask looks for HTML files in a folder named templates in your project's root directory.

Building a Multi-Page Site

To add more pages, simply repeat the pattern of creating a route, a view function, and a corresponding HTML template.

Add a new route in app.py:

@app.route('/about')
def about():
    return render_template("about.html")

Create about.html in the templates folder.
Add links in your HTML to navigate between pages (e.g., <a href="/about">About</a>).

Key Takeaways

Simplicity: Flask allows you to create a functioning website with just a few lines of code.
Separation of Concerns: The application logic (Python in app.py) is kept separate from the presentation layer (HTML in the templates folder).
MVC Pattern: This structure represents the View (HTML templates) and Controller (Python view functions) of a Model-View-Controller architecture. The Model (database) will be covered in future lessons.

Introduction to Flask Web Development

What's going on guys? John Elder here from codingme.com, and in this video we're going to start to look at web development with Python and Flask.

All right guys, like I said, in this video we're going to start to learn how to build websites with Python and Flask. But before we get started, if you like this video and want to see more like it, be sure to smash the like button below, subscribe to the channel, give me a thumbs up for the YouTube algorithm, and check out codingme.com where I have dozens of courses with hundreds of videos that teach you to code. Use coupon code YouTube one to get $30 off membership. That's all my courses, videos, and books for one time fee of just $49, which is insanely cheap.

All right, up until now we've been doing a lot of Django stuff. I thought we'd kind of pivot and start to look at the Flask framework, web framework I guess you would call it. Building websites with Flask. And in this video we're going to build a very, very basic, basic website, and we're going to do it very fast. That's one of the nice things about Flask. And we're going to be able to do a lot more complicated stuff with Flask going forward, and we'll get into that in future videos. But this video I just want to throw up a very basic website just to give you a taste of what you can do with Flask, and just to, you know, sort of show you how easy it is to get started.

Prerequisites and Tool Setup

So, let's head over to the Flask website real quick, and it's just flask.palletsprojects.com.

Uh you can Google it. And this is the Flask website. There's not much to it, you know, very basic website. But if you come down to the quick start guide, uh you can see basically this is all you really need to get started with Flask. So, we're going to kind of walk through a basic application. We're going to build a website with, you know, three or four pages just to show you how to get a very basic static website running quickly.

So, I'm going to use uh a few tools in this video, Sublime Text for my coding. Uh we're going to use the Git Bash terminal. I like to use that. And I think that's pretty much it. So, if you're not familiar with the Git Bash terminal, check out some of my other videos.

Uh just Google Git Bash. And it is, let's see get-scm.com/downloads. Download the latest version, install it. There's a bunch of installation screens. You're just going to have to click next for each one and that should be fine.

You also need Python. So go to python.org if you haven't installed this already, click the download link and download the latest version. Very important, the very first screen that pops up when you install Python, there's a little box at the bottom that says add Python to path. It's unchecked by default. You would have to check that box. Make sure it's checked and then just walk through the rest of the installation and you should be fine.

So let's see, one last thing, Sublime Text. It says sublimetext.com. Download the latest version for Windows, Mac or Linux. Now I'm on Windows, hopefully you are too. If you're on Mac, you should be able to follow along, no big deal and you should be good to go.

Creating the Project and Virtual Environment

So let's just dive right in here and get started. Open your Git Bash terminal and let's make a directory to hold our our Flask files. So mkdir and I want to put this in the C drive and let's just call this my Flask. Doesn't really matter. Then we need to change into that directory with the CD command. So CD /my_flask.

All right. So we can see there's nothing in here. So now I want to create a virtual environment. I just always do this whenever I create almost anything. So I'm going to go python -m venv and then I'm just going to call this virtual.

There we go. And this usually takes a few seconds to do its thing while it's spinning it up.

Okay, so that's done. Now if we list the stuff here, we see there's this virtual directory. So I can turn on my virtual environment now by typing source virtual/scripts/activate. And we see now we've got this little virtual thing above our command prompt. That tells us that our virtual environment has been turned on. If you're on a Mac or a Linux, I think the command is source bin/activate, I think. I don't quote me on that, but I think that's what it is. If If If that doesn't work, just Google it and you should be able to figure it out.

All right, to turn this guy off, we can deactivate. And when we do that, the thing disappears. And I'll go ahead and turn it back on.

Installing Flask and Its Dependencies

Okay. So, now we should open up our Sublime Text. And let's create a new file.

So, new file. And let's go file save as and then navigate to your C drive and then find that my_flask directory. And let's just call this app.py. Okay.

So, we've got this. Now, let's head back over to our virtual environment. We actually need to pip install Flask. So, it's just pip install Flask. And when we do that, it's downloading and installing Flask.

Now, if we go pip freeze, we can see a whole bunch of stuff has been installed. Click, Flask, It's Dangerous, Jinja2, MarkupSafe, and Werkzeug. So, we got a whole bunch of cool stuff installed and now we're ready to go.

Creating the First "Hello, World!" App

So, let's head back over to our app. And we just want to from Flask import Flask, capital F Flask. And let's also import render_template. And we'll see what this is in just a second.

So, first things first, we have to create an app. And we call this capital Flask. And that's just __name__. All right? So, that creates an app in an instance of Flask running. Creates an app for us.

Now, we want to set a route. And we'll just create one right now. So, app.route. And then we want this to be the forward slash. So, we want this to be our index page, our home page, our root route. So, we just use a slash for that.

Now, let's let's create some logic for this. Let's go def index. So, we want to create this index. Oops. And inside of here, we can just return pretty much anything we want.

So, let's go hello world.

So, if we save this, that's basically all we need to get started. We can head back over to our terminal and just type in flask run, which is kind of silly, but it works.

Now, if you have problems, if you get an error doing that, you might have to type in let's control C to break out of this. Uh you can type in it is python -m flask run, uh but you don't have to. Flask run should work just fine for you. Uh so, control C to break out of this again.

Now, the Flask documentation says first you have to punch in this command export flask_app=app.py, whatever your your file is named. Um that's setting an environmental variable that tells Flask where your app is, but uh we only have one file, and so we can just go flask run, and it seems to work.

So, when then when we do that, we get this URL, and this is just our localhost, and it's port 5000. So, the uh Flask server web server is running on port 5000. It's listening, and uh we can head over to our web browser, and just paste that in, and boom, we get hello world. So, just that simple. It took like 2 minutes to create an an app. So, this is a very silly app, right? It just says hello world. We're not really creating any websites this way. We're just making something work, right?

Serving HTML with Templates

To actually create a website, we can come back here, and we can get rid of all of this, and instead, let's point this app to an actual HTML file that has our actual website. So, we could go render_template and then point this to index.html. Now, this render template of course is this guy up here that we imported at the beginning of the video. So, go ahead and ahead and save this.

Now, I'm going to head over here to the project file or the project menu here and let's add a new project or let's add a folder to the project right here and then navigate to my flask and then so, you were in C and go down to your my flask and select the folder and then it'll pop up all of our things here. So, we see this virtual um this is our virtual environment. We can just sort of ignore that. Pi cache there's nothing in here. Here's our app.py file.

Come up to the top level, right click and let's create a new folder and down here at the bottom you could see we can type in the name for it. So, let's call it templates. When we do that pops up. So, now we can create a new file inside of templates and let's file save as and let's call this index.html. And inside of here we can create actual uh you know, HTML. So, <h1>Hello World</h1>. So, if we save this and remember we're now calling this file and Flask knows to look in the templates directory for it.

So, we can head back over here and if we hit reload, likely nothing is going to happen and it didn't. That's because Flask doesn't realize at this point that anything's changed. So, we need to do a control C on our keyboard the control button and the C button at the same time to break out of here and we need to run this guy again. Now, we'll we'll fix this later on so it's always listening for updates, but that's a topic for another time. We're just throwing up some quick stuff right now. So, here if we hit reload, boom, we get hello world and it's you know, actually big and cool and it's an actual HTML file. So, all right, we're starting to get somewhere.

Integrating the Bootstrap Framework

Let's head over to getbootstrap.com and this is just the Bootstrap CSS framework. I use this for all kinds of stuff. Click on getting started and then just scroll down here to the starter template. I'm just going to copy this whole thing and then head back over to Sublime and click the index page and let's just paste in all that starter code. And if you know HTML, you can this is just very basic stuff.

Um, let's make a couple of little quick changes. So, we hit control S to save this file and then come back here and control C to break out of here and run our server again. Then come back to our website and hit reload. Boom, this has now changed to Bootstrap and if we view the page source, we can see all this other Bootstrap stuff is in there and that's cool.

So, now we can head back over to Bootstrap and uh let's play around with this a little bit. Let's head over to the documentation and I think components and then we let's grab a quick navbar. So, I'm just going to scroll down and I like this one, it looks fine. So, let's copy it. And let's just head back over here and right below our body we just paste in all that that code. And then this H1, let's wrap this in a div. So, this is go let's go <div class="container">. This is just a Bootstrap class that um well, I'll show you what it does in just a second.

All right, so go ahead and save this. It just moves everything over and down a little bit from off the side of the screen because right now we have everything up crammed right up into the corner and we just want to kind of move it a little bit. So, now we can come back over to our terminal and break out of here again and run the terminal again. I know it's kind of silly. And when we do, boom, we have this drop down. It has some things. It's very cool. Awesome.

All right, so now let's get rid of this search thing. So I'm just going to come up here and I'm going to look for the search thing. Uh, where is it? Right here, form. So we can get rid of that. Save this. What else do we want to get rid of really quickly? Uh this disabled and this drop down link. We don't really need that. So here's the disabled thing. We can just get rid of that. Let's see. Here's the drop down thing. So I'm just clicking the the opening LI and the closing LI highlight so I know I can get rid of all of that.

All right, so let's save this and reload our server again. See how that looks. Okay, so that's looking better. Let's change this navbar to something else. Uh instead of it saying navbar, let's say uh John Elder. We're making a a basic personal website. Change this to forward slash. Save this.

One more time come back here and break out of here. Run it again. And all right, we've got this John Elder. We click on it, it goes there. It says hello world. Okay, so we've got something here. We've got the beginnings of a website. And uh that's cool.

Building a Multi-Page Website

But what else can we do with this? Well, let's head back over to our app.py and let's create some more pages.

So we can go app.route and let's call this about. And this needs to be wrapped in quotation marks. And then we can go define about and we can return render_template and let's call oops about.html.

All right, so if we save this now let's head over to our templates and right click and create a new file and go file save as. And let's call this about.html. And let's just copy everything from our index page and just paste it in here. But at the top instead of hello world, let's go <h1>about John Elder</h1>. And then here it says John Elder and then down here instead of hello world, let's say about me... I don't know. Okay.

And let's change this from link to about. And let's change this href to /about. And let's save this and let's do the same thing for our index page. Let's come over here. Let's change this home to that. Let's change this link to /about. And let's change this to about. Save this and we also need to change this home guy right here. Okay, so all right, that's looking good.

Let's break out of our server again. Run it again. And you can see as we're going, things are appearing in the server as we load pages and stuff. That's because this terminal has now become our web server. So it's logging everything that we're doing and outputting things onto the screen as we're doing them. That's kind of cool. All right, so let's hit reload here. Now we have home and about. And if we click here, boom, it goes to about. You notice it's /about cuz that's the route we created. It's showing our about.html page. We can toggle back and forth to our home page and our about page. And okay, very very cool.

Recap and What's Next

Now, this is a ridiculously simple website, obviously, but this is everything you need, right, to build a website. We've got templates, we've got a nav bar, we've got some actual code and stuff and navigation and and it was all done basically with 11 lines of code, right?

How simple is that? And this is the beauty of Flask. You can just do stuff very quickly and it just works. Now, I understand, I get it. This is not a complicated website. There's no database, there's no forms, there's no, you know, dynamic stuff going on. We'll get to all that in future videos. In this video, I just wanted to show you that it's ridiculously easy to get started with Flask and it's a lot of fun to do. I mean, you know, Django is great. I love Django. I use Django for everything. But, Django's got a lot of stuff going on, right? And you got to learn a lot of stuff to start using it. It's been 15 minutes we've been working on this and we've got a completely functioning, working, real website. Very, very easy. And there's nothing to it. There's literally one file and then a couple HTML files.

And you'll notice we've already broken apart our website logic in one file, the visual views in another file. So, if you think of a model-view-controller framework, where the model is the database, the the views are the HTML, and the controller is the brains behind the scenes, we've basically got that. We don't have the M yet. We don't have the models. We'll do that later. But, we've got the views and the controllers just this easily. And that's very, very cool.

So, I'm going to call this one done. I just wanted to really just kind of wet your appetite and show you the most basic stuff with Flask, the most basic static website you can build, and just how quick and easy you can do it. And I'll think about templates. In my last series, we did a a dental website with Django and we used a template file, a dental website template file. You can do that same exact thing with that same exact template using Flask in moments. You just import those files and uh you don't have to render up the static stuff. You just put them in a templates file and you're good to go. Very, very cool and very powerful and and a lot of fun.

Conclusion

So, uh in the next few videos, we'll get into this in more detail. We'll start learning how to do cooler things and then we'll look at databases and show you how to make stuff dynamic and all that good stuff. Like I said, in this video I just wanted to wet your appetite and hopefully get you excited for Flask. So, that's all for this video. If you liked it, be sure to smash the like button below, subscribe to the channel, give me a thumbs up for the YouTube algorithm, which really, really helps the channel and I really appreciate. And check out codemy.com where you can use coupon code YouTube1 to get $30 off membership. So, you pay just $49 to access over 40 of my courses, hundreds of videos, and the PDF versions of all my best-selling coding books. Join over 80,000 students learning to code just like you. My name is John Elder from codemy.com, and we'll see you in the next video.