Axum + Svelte Full Stack Toy Project

A minimalist web app to explore full stack development with a Svelte frontend and Rust backend.

Shows a simple time trending chart for birth names based on this SSA dataset.

Features

• Axum API

  • tokio_postgres and bb8 - flexible and performant PostgreSQL database transactions with connection pooling.
  • refinery - version controlled database migrations.
  • tracing and opentelemetry - queryable structured JSON logging and performance profiling.
  • thiserror - simple error handling and propagation.
  • jsonwebtoken - validate bearer access tokens in auth middleware.
  • utoipa - Automated OpenAPI docs and Swagger UI.
  • Google Distroless - minimal runtime docker image for performance and security.

• SvelteKit SPA

  • daisyUI - lightweight pure CSS component library to power up tailwindcss.
  • oidc-client-ts - acquire API access token using secure Authorization Code Flow with PKCE.
  • ag-charts - powerful and easy to use charting library.

• Docker Compose

  • Simplify development by running the api, database, and Jaegar opentelemetry collector locally.
  • cargo-chef - faster iteration with build caching.

• Auth0

  • Identity platform with a generous free tier.

• Insomnia

  • Easy to author integration testing for the API.

Setup

Software

• Rust
• Node
• If using Visual Studio Code, the following extensions may be useful:
  • rust-analyzer
  • Rust Syntax
  • Even Better TOML
  • Error Lens
  • Svelte for VS Code
• Docker Desktop

Auth0

See this official SPA + API tutorial.

Breadcrumbs for this process:

• Create a custom API.
  • Enable RBAC and add permissions to Access Token.
  • Create a read:ssa_stats permission (see the Axum controller which checks it).
• Create a custom Default role and assign the read:ssa_stats permission to it.
• Create an M2M app for integration testing, this is what Insomnia will use.
  • Grant it the read:ssa_stats permission.
• Create an M2M app for user management and use it to automatically assign new users to the Default role.
  • See this official tutorial.

To allow the integration tests to vary the user auth context (so we can test various scenarios), you might also create an M2M / Client-Credentials action like this

exports.onExecuteCredentialsExchange = async (event, api) => {
  if (event.client.client_id === event.secrets.clientId) {
    const integrationUser = event.request.body['x-integration-user'];

    if (!integrationUser) {
      api.access.deny('invalid_request', 'x-integration-user field is required.');
      return;
    }

    api.accessToken.setCustomClaim('https://demoapp/email', integrationUser);
  }
};

Adding the test user context to the claims simplifies the API code; you could alternatively have the API handle special headers that only apply for tokens associated to the integration testing app.

Env Files

Create .env files from both the backend .sample.env and frontend .sample.env, and fill out the placeholders. Note the .env files are ignored by git as they contain sensitive values.

Create Database

Start the database

docker compose up database

Apply migrations

cargo run -p database_migrations

Download the SSA Baby Names dataset to the path ./temp/names.zip, then insert into the database

cargo run -p database_seed

(Optional) Browse the database and confirm data is loaded

docker compose exec database psql -U postgres

Running

Backend

Run it all in Docker Compose

docker compose up --build api

Or run the API from the host

docker compose up database otel

cargo run -p backend_axum

Notice that you can access

• Swagger UI - http://localhost:8080/swagger-ui/
• Jaegar - http://localhost:16686/

Frontend

cd frontend_svelte

npm i

npm run dev --open

Testing

Set up Insomnia and import the example collection which demonstrates acquiring an access token as a test user (via the M2M app) and invoking the single controller method. Note some environment variables need to be set from your Auth0 configuration, and secrets can be stored in an Insomnia Vault.