Build a Website with FastAPI: A Comprehensive Guide

So, you want to build a website with FastAPI, huh? Awesome! FastAPI is a fantastic , modern web framework for building APIs with Python 3.7+ based on standard Python type hints. It’s fast (as the name suggests), easy to learn, and comes with automatic data validation and API documentation. This guide will walk you through creating a simple yet functional website using FastAPI. Let’s dive in!

Setting Up Your Project

First things first, let’s get our project environment set up. This involves creating a virtual environment and installing FastAPI along with other necessary packages. Trust me; starting with a clean environment is crucial for managing dependencies and avoiding conflicts down the road. Guys, it’s like tidying up your workspace before starting a big project – it just makes everything smoother!

Creating a Virtual Environment

Open your terminal and navigate to the directory where you want to create your project. Then, run the following command to create a virtual environment:

python3 -m venv venv

This creates a directory named venv (you can name it whatever you like, but venv is a common convention) that will contain our isolated Python environment. Next, you need to activate the virtual environment. The activation command depends on your operating system:

• Linux/macOS:

  source venv/bin/activate
  

• Windows:

  venv\Scripts\activate
  

Once activated, you’ll see the name of your virtual environment in parentheses at the beginning of your terminal prompt, like this: (venv) . This indicates that you’re working within the virtual environment.

Installing FastAPI and Dependencies

Now that our virtual environment is active, we can install FastAPI and its dependencies. FastAPI relies on uvicorn for serving the application, so we’ll install that as well. Run the following command:

pip install fastapi uvicorn

This command installs FastAPI and Uvicorn, an ASGI server, which we’ll use to run our application. You might also want to install jinja2 for templating, python-multipart for handling form data, and aiofiles for serving static files asynchronously. These are common dependencies for web applications, and we’ll use them later in the guide. Let’s install them now:

pip install jinja2 python-multipart aiofiles

With these packages installed, we’re ready to start building our website. Remember, keeping your dependencies up-to-date is crucial for security and stability , so make sure to periodically update them using pip install --upgrade <package_name> .

Building the Basic Structure

Alright, let’s get our hands dirty with some code! We’ll start by creating the basic file structure for our website and then define our first FastAPI route. This will give us a simple “Hello, World!” page to make sure everything is working correctly.

Creating the Main Application File

Create a file named main.py in your project directory. This will be the entry point for our FastAPI application. Open main.py in your favorite text editor and add the following code:

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def read_root():
    return {"Hello": "World"}

This code does the following:

1. Imports the FastAPI class from the fastapi library.
2. Creates an instance of the FastAPI class, which we’ll use to define our routes and middleware.
3. Defines a route using the @app.get("/") decorator. This tells FastAPI that when a user visits the root URL (“/”) of our website, it should execute the read_root function.
4. The read_root function is an asynchronous function (defined using async def ) that simply returns a dictionary with the key “Hello” and the value “World”. FastAPI automatically converts this dictionary to a JSON response.

Running the Application

Now that we have our basic application, let’s run it! Open your terminal, navigate to your project directory, and run the following command:

uvicorn main:app --reload

This command tells Uvicorn to run the app object from the main.py file. The --reload flag tells Uvicorn to automatically restart the server whenever you make changes to your code. This is super useful during development because you don’t have to manually restart the server every time you make a change. Once running go to http://127.0.0.1:8000/ and check the hello world message is showing.

Understanding FastAPI Routes

FastAPI uses decorators to define routes. The @app.get() , @app.post() , @app.put() , @app.delete() , and @app.patch() decorators correspond to the HTTP methods GET, POST, PUT, DELETE, and PATCH, respectively. The first argument to these decorators is the path of the route. For example, @app.get("/items/{item_id}") defines a route that matches GET requests to the path /items/{item_id} , where {item_id} is a path parameter. These parameters are very useful when wanting to get items by id for example.

Adding HTML Templates

Serving JSON responses is cool and all, but we want to build a website, which means we need to serve HTML pages. FastAPI makes it easy to integrate with Jinja2, a popular templating engine for Python. Let’s set up Jinja2 and create a simple HTML template.

Setting up Jinja2

First, make sure you have jinja2 installed. If you followed the previous steps, you should already have it installed. If not, run pip install jinja2 . Next, create a directory named templates in your project directory. This is where we’ll store our HTML templates.

Creating an HTML Template

Inside the templates directory, create a file named index.html . Open index.html in your text editor and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>My Awesome Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my website built with FastAPI!</p>
</body>
</html>

This is a simple HTML page with a title, a heading, and a paragraph. Feel free to customize it to your liking. Remember, HTML is the backbone of any website , so understanding its structure and syntax is essential.

Integrating Jinja2 with FastAPI

Now, let’s modify our main.py file to render this template. Add the following code to main.py :

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")


@app.get("/")
async def read_root(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

This code does the following:

1. Imports the Request class from fastapi , Jinja2Templates from fastapi.templating and StaticFiles from fastapi.staticfiles .
2. Mounts the static directory to our app. This will store css, javascript and images files.
3. Creates a Jinja2Templates object, which tells FastAPI where to find our HTML templates.
4. Defines a route that renders the index.html template using the templates.TemplateResponse() method. The request argument is required by TemplateResponse and provides information about the incoming request.

Serving Static Files

To serve static files like CSS, JavaScript, and images, we use the StaticFiles class from fastapi.staticfiles . First, create a directory named static in your project directory. Then, add the following line to your main.py file:

app.mount("/static", StaticFiles(directory="static"), name="static")

This tells FastAPI to serve static files from the static directory at the /static URL. For example, if you have a file named style.css in the static directory, you can access it at http://localhost:8000/static/style.css . You can then link this style.css to your template.

Handling Form Data

Websites often need to handle form data, such as user input from login forms or contact forms. FastAPI makes it easy to handle form data using standard Python type hints. Let’s create a simple form and handle its submission.

Creating a Form

First, let’s create an HTML form in our index.html template. Add the following code to index.html :

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
</form>

This creates a simple form with two fields: name and email . The form submits to the /submit URL using the POST method.

Handling Form Submission

Now, let’s add a route to our main.py file to handle the form submission. Add the following code to main.py :

from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/")
async def read_root(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

@app.post("/submit")
async def submit_form(request: Request, name: str = Form(...), email: str = Form(...)):
    return HTMLResponse(content=f"Name: {name}<br>Email: {email}")

This code does the following:

1. Imports the Form class from fastapi .
2. Defines a route for handling POST requests to the /submit URL.
3. The submit_form function takes two arguments: name and email , which are both of type str and are populated from the form data using the Form(...) syntax. The ... indicates that these fields are required.
4. The function returns an HTML response with the submitted name and email.

Conclusion

And there you have it! You’ve successfully built a basic website using FastAPI. We covered setting up the project, creating routes, rendering HTML templates, serving static files, and handling form data. This is just the beginning, of course. FastAPI is a powerful framework with many more features to explore. From here, you can dive into things like database integration, authentication, and more advanced templating techniques. So keep coding, keep learning, and most importantly, have fun! Guys, building websites is an awesome journey, and FastAPI makes it even more enjoyable.