Skip to content

05. NiceGUI Interface

In this section, you'll add a simple user interface using NiceGUI to create a landing page for your application.

5.1 Update Project Board

Before starting work:

  1. Navigate to your project board
  2. Find Issue #4 ("Add NiceGUI Shell")
  3. Move it from "Todo" to "In Progress" column

5.2 Review Issue #4

Before starting work, review Issue #4 in your repository to understand the requirements for adding the NiceGUI shell.

Goal: Display a simple landing page with a title and subtitle using NiceGUI.

5.3 Install NiceGUI

NiceGUI is a Python framework for building web interfaces.

uv add nicegui

5.4 Update main.py

  1. Open app/main.py
  2. Add the import at the top of the file:
from nicegui import ui
  1. Add the home page function at the bottom of the file:
@ui.page('/')
def home() -> None:
    ui.label('CSE120 GitHub Workshop').classes('text-2xl font-bold')
    ui.label('Average Calculator').classes('text-lg text-gray-600')

ui.run_with(app)

Your complete app/main.py should now look like:

from fastapi import FastAPI
from nicegui import ui

app = FastAPI(title="CSE120 GitHub Workshop")

@app.get("/health")
async def health_check():
    return {"status": "ok"}

@ui.page('/')
def home() -> None:
    ui.label('CSE120 GitHub Workshop').classes('text-2xl font-bold')
    ui.label('Average Calculator').classes('text-lg text-gray-600')

ui.run_with(app)

5.5 Test the UI

Start the development server unless the FastAPI server is already running:

uv run fastapi dev

Navigate to http://localhost:8000/ in your browser. You should see: - A large bold title: "CSE120 GitHub Workshop" - A subtitle: "Average Calculator"

5.6 Add Tests for the UI

Create tests/test_home_page.py:

from fastapi.testclient import TestClient
from app.main import app

client = TestClient(app)

def test_home_page_renders():
    resp = client.get("/")
    assert resp.status_code == 200
    body = resp.text
    assert "CSE120 GitHub Workshop" in body
    assert "Average Calculator" in body

Run the test to verify all tests pass:

uv run pytest

5.7 Commit Changes

Now that you've added the UI and tests, commit your changes:

VS Code UI: 1. Go to the Source Control panel (icon with three branches) 2. Stage all changes by clicking the + icon next to Changes 3. In the message box, type:

```
feat(ui): add NiceGUI shell with title and subtitle

closes #4
```

Note: Replace `#4` with the actual issue number if it's different.
  1. Click the checkmark icon to commit

Terminal: Alternatively, you can run the following commands in the terminal:

Stop the FastAPI server if it's running with Ctrl+C. Then open your terminal and run.

git add .
git commit -m "feat(ui): add NiceGUI shell with title and subtitle

closes #4"
git push origin fastapi-setup

Learn more

Understanding NiceGUI

NiceGUI is a Python framework for building web interfaces with minimal code:

Key Features: - Easy to Use: Pythonic API, no HTML/CSS/JS required - Reactive: Automatic UI updates - FastAPI Integration: Shares the same ASGI app - Tailwind CSS: Built-in styling classes - Rich Components: Buttons, inputs, charts, and more

Common UI Elements: 

ui.label('Text')           # Display text
ui.button('Click')         # Clickable button
ui.input('Name')           # Text input
ui.textarea('Content')     # Multi-line input
ui.checkbox('Agree')       # Checkbox
ui.select(['A', 'B'])      # Dropdown
ui.slider(min=0, max=100)  # Slider

Styling with Tailwind: 

ui.label('Title').classes('text-2xl font-bold')
ui.label('Subtitle').classes('text-lg text-gray-600')
ui.button('Save').classes('bg-blue-500 hover:bg-blue-700')

Understanding ui.run_with()

The ui.run_with(app) method integrates NiceGUI with FastAPI:

  • Both frameworks share the same ASGI application
  • FastAPI handles API routes (/health)
  • NiceGUI handles UI routes (/)
  • Single server, single port
  • Unified deployment

Great! You've successfully added a user interface to your FastAPI application. In the next section, you'll setup CI/CD and Docker support.

Useful Resources