Made withFlaskClip

build a meme Python website (Flask Tutorial for Beginners)

N

NetworkChuck

Creator on the Flask channel

Watch on YouTube ↗

674K viewsAug 29, 202213:30 runtime

Learn how to build a dynamic website with this Python Flask tutorial for beginners. This project-based guide walks you through creating a fun meme website that pulls fresh content from a Reddit API every 30 seconds. You will grasp the fundamentals of Flask, a lightweight web…

Chapters

#flask#clip#backend

Introduction to Flask

Flask is a web application micro-framework written in Python. It's designed to be simple, lightweight, and easy to get started with, making it an excellent choice for turning Python scripts into interactive websites.

Pythonic: It feels natural to Python developers.
Lightweight: It provides core functionality without imposing a lot of dependencies or project structure.
Powerful: It's used by major companies like Netflix for various applications.

Project Setup

To build a Flask application, you need a basic development environment.

Environment: A Linux machine is recommended. You can use a cloud provider like Linode to quickly spin one up.
Dependencies: Install the necessary Python packages using the pip package manager.
1. Update your system: sudo apt update
2. Install the package installer: sudo apt install python3-pip
3. Install Flask: pip3 install flask
4. Install Requests for API calls: pip3 install requests

Note
The requests library is a standard and powerful tool for making HTTP requests to external APIs in Python.

Core Flask Concepts

A few key concepts form the foundation of any Flask application.

App Initialization: The line app = Flask(__name__) creates an instance of the Flask application. The __name__ variable tells Flask where to find associated resources like templates.
Routing: The @app.route('/') syntax is a Python decorator. It maps a URL path (in this case, the root URL /) to the Python function defined directly below it.
View Functions: The function associated with a route (e.g., def index():) is called a view function. It contains the logic that runs when a user visits that URL and must return a response, such as a string or rendered HTML.
Running the Server: app.run(host='0.0.0.0', port=80) starts Flask's built-in development server. host='0.0.0.0' makes the server accessible from other machines on the network.

Important
Flask's built-in server is intended for development and testing. For a production website, you would use a more robust web server like Gunicorn or uWSGI.

Building the Meme Website

This project combines Flask with an external API to create a dynamic page.

Project Structure:
- meme_flask.py: The main Python script containing the Flask app logic.
- templates/: Flask requires that HTML files be stored in a folder named templates.
- templates/meme_index.html: The HTML template for the website's front end.
Rendering HTML templates:
- Instead of returning a simple string, you can render a full HTML page using the render_template() function.
- Example: return render_template('meme_index.html', meme_pic=some_variable, subreddit=another_variable)
Passing Data to HTML:
- Variables from your Python script can be passed into the render_template function.
- Inside the HTML file, you can access these variables using a double-curly-brace syntax called Jinja2 templating: {{ meme_pic }}.

Tip
This ability to pass data from Python to HTML is the core of what makes web frameworks like Flask so powerful. It allows you to create dynamic content based on database queries, API calls, or user input.

Project Introduction: A Python Meme Website

Are you ready to harness the power of Python, APIs and Flask? And with these powers, we can make super awesome websites like this meme website, giving you a fresh big meme from Reddit every 30 seconds, by the way, we're gonna build that site in this video. And I built this page to keep track of my daughter's key balances, a cryptocurrency I built for their allowance. And you might remember I used it from my Halloween video back in the day.

So get your coffee ready. We're about to level up our Python skills by interacting with some APIs and learning how to use Flask, a web application framework used by the largest companies in the world. Now, the beautiful part about this is that it's pretty easy to learn and get started with Flask, which means this tutorial is for everyone. Even if you don't know Python, that's okay. Now don't get me wrong, knowing a bit of Python won't hurt, but you will still be able to keep up if you're brand new. So quick coffee break, and let's talk about what you need first.

Setting Up the Development Environment

You'll need a Linux computer. Now, if you don't have one or yours is slow and dumb, do what I do: spin up a wicked fast Linux virtual machine in the cloud with Linode, the sponsor of this video, at just 0.01 cents an hour. This will pretty much almost cost you nothing. Especially if you just wanna try this with me, get a super slick, awesome meme website up and running, let it run for an hour and then delete it. It costs you this much, less than a penny.

And if you do wanna leave it up forever, because of course you don't wanna deprive your friends of sweet, sweet memes. It's just five bucks a month. That's it. So head on over to linode.com/networkchuck and check this out. If you're new to Linode, you get a hundred dollars credit free for 60 days. So yeah, that means you can run your meme website for free for 60 days. That's a lot of memes, totally worth it.

So again, Linux computer can be a server, can be Linode, doesn't matter. And the last, but certainly not least, everything in it requires a delicious cup of coffee, i.e., chuck.coffee. So here we go. Let's get started. If you haven't already, go ahead and spin up your Linux VM in the cloud. I'm gonna make mine right now. It'll take just a few moments. I'll run the latest version of Ubuntu in Dallas. It's gonna cost me 0.08 cents. And then in just a few sips of coffee, I'll be up and running and mine is running. I'm gonna go ahead and copy this SSH command, copy, launch, command, prompt, or terminal on Mac and Linux and paste that command. Here we go. Accept fingerprint. Yes. And I'm in.

What is Flask?

Now, before we build our website with Flask, let's first talk about what even is Flask and how do we use it with Python? Flask is a web application framework, basically just a tool we use to build a website, but what's cool about Flask is that it's actually written in Python. And as a result, it feels like Python, which we know feels awesome. And that's why I love Flask because I already know some Python, which means I don't have to learn really much else to make Flask do stuff. That's the power here. You'll actually use Python to populate data with Flask and a big reason people use Flask is that it's really, really lightweight. It's referred to as a micro framework because it's designed to keep things simple. And I love simple.

So yeah, we are kind of doing something dumb here, building a meme website, but just know the foundational skills you're learning to do that are used in fortune 500 companies. It's a skill that you wanna learn if for anything, just to be able to produce websites outta Python for your projects and your hobbies. So enough talking about it, let's actually install it right now.

Installing Flask and Other Dependencies

And just like Flask itself, the installation is pretty simple. First, let's make sure we have pip3 installed for Python. So we'll do a sudo apt update to update our repositories, take a little coffee break while it does that. And then we'll do an apt install python3-pip, which if you don't know what pip is, it's what we use to install a bunch of Python libraries, basically additional tools we can use inside our Python scripts. And then I'll do a -y at the end, hit enter. Let that sucker install. Again, one more coffee break. Mine is done.

And then with one command we can install flask. It'll be pip3 install flask. That's it, hit enter, and it's gonna do its thing. That was it. It's done.

Now real quick, we are gonna install one more tool. Type in pip3 install requests. Requests is what we'll use to interact with APIs. That's how we're gonna get those memes from Reddit. So go ahead, install that right now. Mine was already installed. You might get that message. Cool. And now here in about 30 seconds, we're gonna run a website. You ready? Here we go.

Building a Basic Flask App

Type in nano flask_test.py and hit enter. Got to do your shebang. The first thing we'll do with our Python script is import the libraries we need. So first I'll type in from flask import Flask, keeping in mind that case is important here. And then right after this, we'll create a variable. We'll call it app and we'll have that equal Flask(__name__).

Now what happened here? Well we created our variable app and we had that set or equal to the function Flask and inside that function is a special Python variable called __name__. All this is doing is telling the application Flask, "Hey, everything you need to run this website from files to folders to whatever it is, it's all right here. You don't have to go anywhere else. It's in your current directory."

And just after setting that variable, we're gonna do something a bit strange. We're gonna do some decorating. You like decorating, right? Maybe not, but we're about to do it. Go ahead and type in the @ symbol. And then right after that type in app.route('/'). Now what is going on right here? What's that @ symbol doing? Now I'm not gonna go too deep, but this is known as a Python decorator. And all you have to know about it right now is that it's going to decorate or add more functionality to a function we're gonna reference right below. And then right after the @ symbol is what we're gonna decorate our functions with. Notice we're calling the app variable, which we just set up here, which is Flask. And then part of Flask, we're calling .route. And when you hear the word route, I want you to think, okay, the place to go, where to go, the location. And that's what we're doing right here in the parentheses, a back slash. What that's telling the application, the function is that when someone navigates to the website, let's just say, networkchuck.com, when they go to the root of the website, just right here, nothing after the URL, when they go to that location, we're gonna do some stuff down here in the next function.

So let's do that right now. Let's tell it what to do. So go ahead and hit enter, and we'll define a function. So def, and we'll call this index. Type an index() open and closing parenthesis. Now, if you're in the process of learning Python, you never heard the word function. It's just a collection of a few lines of code that we can call and use later in the script. So then we'll hit enter space four times 1, 2, 3, 4, like a spacing. And Python is very important. Don't forget it. And we'll do one simple thing. We'll type in return "drink more coffee right now".

So while this does look kind of weird, here's all we're doing with Flask right now. We're saying when someone goes to the base URL networkchuck.com, whatever it is, just simply return, "drink more coffee right now!" And then we have one more line of code to run. Type in app.run. So we're calling that app variable, which is Flask. We're telling it to run. And inside that function, we're gonna pass in host='0.0.0.0' and then comma space port=80. And if you have a conflict, you can try port 5001, but port 80 should work most of the time. Go and close that out with a closing parenthesis and that's the code. This last line of code is basically saying flask.run. It's telling it to run on our host and on port 80.

Running the "Hello World" App

Let's try it out. Hit control X, Y, and enter to save. python3 flask_test.py. Here we go. Okay. It's running. Notice that by saying 0.0.0.0. we're telling it to run on all the addresses. Perfect. And also notice we get this kind of scary warning. Like, "Hey, this is for development only." And you're like, "Chuck, I thought you said big companies ran this. Netflix doesn't do this. Right?" They do use Flask, but not quite like this. That's a video for another time. This is fine for you right now. It's fine for a meme website. So we'll see if it worked. Let's uh, grab this URL right here. Copy. And let's go visit a website. Paste that sucker in. Bam. Let's go. It works. Okay. Now let's take that simple website and turn it into a meme website. Are you ready? Let's do this.

Planning the Meme Website Structure

So getting back to our terminal, to close out your Flask app, just hit control C to stop running it. Control C again, here we go. Okay. It's done. So now that you understand the basics of how Flask works, let's actually build the meme website. Let's start with making a directory, a directory that's gonna store all our information for it. mkdir meme_flask. Bam. And let's CD into there. cd meme_flask.

Now our meme website is going to involve two things. First, we'll have our Python script, which we'll call meme_flask.py. He has two jobs. First, run Flask. We just saw how that works. Second, we're gonna use him to call out to an API, specifically this API right here. So thank you to this person. And what this will allow us to do is get a random meme from a subreddit in the interval of our choice.

The second thing we're gonna need is some HTML, just some basic stuff to build a little static webpage. We'll call this simply index.html, and don't worry. I'm not gonna make you build or learn HTML right now. I've got a script below, just copy and paste. So let's get to work on building these two things right now, which by the way, both those things are below. So feel free to copy and paste, but I'm gonna walk you through a few of these things right now, so you can possibly build your own stuff like I did with my daughter's tracking their key balance cryptocurrency. Let's work on Python.

Writing the Meme Website Python Script

First I'll type in nano meme_flask.py. Make sure you do its best practice to start out. It won't be too different. We'll import Flask: from flask import Flask, but we're also going to import the render_template function. This little magic piece of code is what allows us to reference and use an external HTML code or script. And then we'll import a few more things. We'll start with importing requests. Remember, we'll use that to interact with our API. And then we'll import good old json.

And before we decorate with our app.route, we're first gonna paste in some code right here. We'll paste it right now. Again, all code below. A function we're defining and we'll use here in a bit is what we're using to interact with the Reddit API, or not the Reddit API, an API that allows us to talk to Reddit. I don't wanna get in trouble. There's a ton of fun stuff going on here. I'm not gonna cover it right now. I may make another video on how to interact and play with APIs. Just know you're gonna get a sweet, sweet meme from this and make sure you read the comment here about getting certain memes that might, you know, might not be safe for work and stuff.

Just below that function is where we'll start to decorate. And I'll go ahead and copy and paste this code again. The same story, we started decorating and telling the next function that's gonna run, "Hey, when they go here, when they go to the base of the URL, do this." And all we're doing here is using that get_meme function that we defined up here, and then using that magical render_template, I told you about, we're gonna return or pass two variables to this meme_index.html file, which is the HTML for the website. So these two variables right here, which will be populated by this script or by this function. And then our script is almost done. Just one more command: app.run(host='0.0.0.0', port=80) to run on every single IP address and then specify your ports. I'm going to say 80, and that's it. Hit control X, Y and enter. So Python script done.

Creating the HTML Template

Now it's time to build out the HTML file, which I told you we're not gonna do anything, we're just gonna make it. Now, Flask is kind of finicky. It'll look for the HTML inside a folder called templates. We have to make that folder for it. So we'll do mkdir templates. Then we'll CD into that folder. And here we'll make our HTML file: nano meme_index.html. And then simply copy and paste the code.

Now, before you save it, let me show you two really cool things. Look at the two things between the double brackets. That's the variables we're passing through, and that's the relationship between our Python Flask script and its HTML. So let's go ahead and save it. Control X, Y, enter to save. I'm gonna cd .. to get back a directory. And now all we have to do is run that Python script and we're good.

Live Debugging and Final Result

So Python three meme_flask.py. Ready? Set. Go. Well, I forgot something. What did I forget? This is fun. Live troubleshooting. It tells me right here, NameError: app is not defined. So you probably already, already guessed what I missed. If I jump back in that script, I forgot to define the app down here. app.route. I didn't define what app was. We did that earlier, so I'm gonna put that right up top: app = Flask(__name__). Okay. There we go. That should solve it. Control X, Y, enter to save. Let's try it once more. Okay. It's on, it's running. Let's see if it works. And bam, just like that, your very own meme website.

Conclusion: The Power of Flask and Next Steps

Now I love Flask because I can quickly take a project I'm working on in Python and make a webpage out of it. So the example I gave you of my daughters having cryptocurrency that I give them as allowance. I wanted to track how much they had without having to look at their wallets or go to solscan. So using Python, the solscan API and Flask, I have a nice, cool dashboard. And that's what I wanted to unlock for you in this video. Not that I'm gonna teach you everything you could ever know about Flask, because that would take forever. And I don't know it. I wanted to show you what you can do with Flask, give you one solid example and how you can start to build from that and do your own things.

So what I want you to do is take what I've done here, have your own meme thing, do that, or take it and make something else. And I know that some of you probably watched this video and were like, "Wow, I don't know what you're talking about. I'm still very new in Python or I don't know any Python. And you said the word Flask, and I don't know what you're talking about." I went high level on purpose because it would take forever to make this video, which is already probably too long anyway, but I hope I gave you enough code and just enough bread crumbs to follow along that you could build on the knowledge you already have.

So anyways, I wanna see your websites. If you make some Flask websites, dude, put it below. I wanna see that. And I know you're probably thinking this too, "Chuck, how do I make it to where it's persistent? Like what if my server reboots or my computer reboots? How do I make it come back up?" Great question. And we already covered that. I'm not gonna cover that here in this video again and make it too long, but we do have it in our write up and our lab walkthrough, which will have in a link below, which will include all these scripts. So yeah, just go crazy, have fun with Flask. And I hope this opens up a whole new world for you. At least it did for me because I love writing stuff in Python. Python's so fun and I love to make it available to people through a website. So anyways, I hope this video was helpful for you. Um, I really do appreciate you taking the time to just have some coffee with me. Talk about Python and Flask and APIs who doesn't wanna do that. It's just fun. And also make sure you hack the YouTube algorithm today. Make that like button, notification bell, comment, subscribe. You've gotta hack YouTube today. Ethically of course. And yeah, that's all I have. I'll catch you guys next time.