Python Anvil Full-Stack Web Development

Building the Frontend: Drag‑and‑Drop UI with Python Logic

Let’s create a simple “Contact Manager” that lets users add and view contacts. Follow these steps:

1. Drag a DataGrid component onto the form; bind it to the contacts table.
2. Add a TextBox for Name and another for Email.
3. Place a Button labeled “Add Contact”.

Now switch to the Code view for the form and implement the click handler:

def add_contact_button_click(self, **event_args):
    # Retrieve user input
    name = self.name_textbox.text.strip()
    email = self.email_textbox.text.strip()

    # Basic validation
    if not name or not email:
        alert("Both name and email are required.")
        return

    # Insert a new row into the Data Table
    app_tables.contacts.add_row(
        name=name,
        email=email,
        created_at=datetime.now()
    )

    # Refresh the grid to show the new entry
    self.contacts_grid.refresh_data_bindings()
    self.name_textbox.text = ""
    self.email_textbox.text = ""

Notice how the entire interaction is handled in pure Python—no AJAX calls, no JavaScript, and no separate API layer. Anvil automatically synchronizes the client‑side UI with the server‑side data.

Writing the Backend: Server Modules and External APIs

For more complex logic, you can create server modules that run on Anvil’s cloud. These modules can import any package from the Python Package Index (PyPI) or your own custom libraries.

Example: Sending a Welcome Email via SendGrid

First, install the sendgrid package from the Anvil UI (Settings → Packages). Then create a server module email_service:

import os
from sendgrid import SendGridAPIClient
from sendgrid.helpers.mail import Mail

def send_welcome_email(to_email, name):
    message = Mail(
        from_email='no-reply@yourapp.anvil.app',
        to_emails=to_email,
        subject='Welcome to Contact Manager',
        html_content=f"<p>Hi {name},</p><p>Thanks for joining our app!</p>"
    )
    try:
        sg = SendGridAPIClient(os.getenv('SENDGRID_API_KEY'))
        response = sg.send(message)
        return response.status_code == 202
    except Exception as e:
        print(f"Email error: {e}")
        return False

Now call this function from the UI after a contact is added:

from ._anvil_designer import ContactFormTemplate
import anvil.server

class ContactForm(ContactFormTemplate):
    def add_contact_button_click(self, **event_args):
        # ... previous code ...

        # Send a welcome email asynchronously
        anvil.server.call('send_welcome_email', email, name)

Because anvil.server.call runs the function in the cloud, the UI remains responsive while the email is dispatched.

Data Management: Working with Anvil Data Tables and External Sources

Anvil’s built‑in Data Tables are perfect for rapid prototypes, but you can also connect to external databases using the anvil.tables or anvil.http modules.

• SQL Integration: Use anvil.server.connect with a PostgreSQL connection string and run SELECT/INSERT statements.
• REST APIs: Call external services with anvil.http.request, handling JSON payloads directly in Python.
• Realtime Updates: Leverage anvil.server.callable decorators to expose functions that clients can invoke on demand.

Example of fetching data from a public API:

import anvil.http

@anvil.server.callable
def get_random_joke():
    response = anvil.http.request("https://official-joke-api.appspot.com/random_joke", json=True)
    return response

You can then display the joke in the UI with a simple button click.

Deploying and Scaling Your Anvil Application

When you’re ready to go live, Anvil offers a one‑click publish workflow:

1. Click Publish in the Designer toolbar.
2. Choose a custom domain (e.g., app.yourdomain.com) or stick with the default sub‑domain.
3. Configure SSL certificates automatically; Anvil handles HTTPS for you.

Behind the scenes, Anvil runs your server code in a containerized environment that scales horizontally based on traffic. If you anticipate high load, consider the Pro or Enterprise plans, which provide dedicated resources, custom domain support, and advanced monitoring.

Tips & Best Practices for Production‑Ready Anvil Apps

• Separate concerns: Keep UI logic in form modules and business logic in server modules. Use @anvil.server.callable to expose clean APIs.
• Validate on both sides: Perform input validation in the client for instant feedback, but also re‑validate on the server to protect against malicious requests.
• Leverage role‑based permissions: Define user roles (admin, user, guest) in the Anvil Users service and restrict data access accordingly.