Simple Login Page with Litestar and Docker

3 min readJun 2, 2024

In this tutorial, we will create a simple login page using the Litestar (formerly Starlite) web framework and dockerize the application. This guide will walk you through setting up the project, writing the necessary code, and building and running a Docker container.

You can clone or fork the repository here: https://github.com/dxsim/litestar-login

Prerequisites

Before we begin, ensure you have the following installed on your machine:

Python 3.11+
Docker

Project Structure

First, let’s set up the project directory structure. Create a directory called litestar-login and structure it as follows:

litestar-login/
├── app.py
├── Dockerfile
├── requirements.txt
└── templates/
└── login.html

Step 1: Create the Application

In the app.py file, we will set up a basic Litestar application with routes for rendering the login page and handling login logic.

app.py :

from litestar import Litestar, get, post, Request
from litestar.contrib.jinja import JinjaTemplateEngine
from litestar.template.config import TemplateConfig
from litestar.response import Template
from pathlib import Path

# Define a route to render the login page
@get("/")
async def login_page() -> Template:
    return Template("login.html")

# Define a route to handle the login logic
@post("/login")
async def login(request: Request) -> dict:
    form_data = await request.form()
    username = form_data.get("username")
    password = form_data.get("password")

    # Simple authentication logic (replace with your own logic)
    if username == "admin" and password == "secret":
        return {"message": "Login successful"}
    return {"message": "Invalid username or password"}

# Initialize the Litestar app with a Jinja template engine and register the routes
app = Litestar(
    route_handlers=[login_page, login],
    template_config=TemplateConfig(
        directory=Path("templates"),
        engine=JinjaTemplateEngine,
    ),
)

# Run the Litestar app
if __name__ == "__main__":
    app.run(host='0.0.0.0')

Step 2: Create the Login Template

Next, create a simple HTML file to serve as the login page template.

templates/login.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .login-container h1 {
            margin-bottom: 20px;
            font-size: 24px;
            text-align: center;
        }
        .login-container label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }
        .login-container button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>Login</h1>
        <form method="post" action="/login">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

Step 3: Create the Requirements File

Create a requirements.txt file to list the necessary Python packages.

requirements.txt:

litestar[standard]==2.8.3

Step 4: Create the Dockerfile

Create a Dockerfile to define the Docker image for our application.

Dockerfile:

# Use an official Python runtime as a parent image
FROM python:3.11-slim

# Set the working directory
WORKDIR /app

# Copy the current directory contents into the container at /app except app.py
COPY requirements.txt /app
COPY templates/ /app/templates/
COPY requirements.txt /app

# Install any needed packages specified in requirements.txt
RUN pip install --no-cache-dir -r requirements.txt

# Copy app.py
COPY app.py /app

# Make port 8000 available to the world outside this container
EXPOSE 8000

# Define environment variable
ENV PYTHONUNBUFFERED=1
ENV LITESTAR_HOST=0.0.0.0

# Litestar run when the container launches
CMD ["litestar", "run"]

Step 5: Build and Run the Docker Container

Run the following commands:

# Build the Docker image
docker build -t litestar-login .

# Run the Docker container
docker run -d --name login-page -p 8000:8000 litestar-login

Step 6: Access the Application

Open your web browser and navigate to http://localhost:8000 to see the login page.

Conclusion

You’ve successfully created a simple login page using the Litestar web framework and dockerized the application. This setup provides a solid foundation that you can expand with more features, such as session management and secure password handling.