Rust server serving React frontend

.github/workflows/server_ci.yaml

@@ -3,21 +3,28 @@ on:
     branches:
       - main
     paths:
+      - 'apps/web/**'
       - server/**
       - crates/**
   pull_request:
     branches:
       - main
     paths:
+      - 'apps/web/**'
       - server/**
       - crates/**
 jobs:
   ci:
     runs-on: blacksmith-4vcpu-ubuntu-2204
     steps:
       - uses: actions/checkout@v4
+      - uses: useblacksmith/rust-cache@v3
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.15.0
+      - run: pnpm install
+      - run: pnpm -F web build
       - run: rustup toolchain install stable --profile minimal --no-self-update
       - run: sudo apt-get update && sudo apt-get install -y libasound2-dev pkg-config
       - uses: arduino/setup-protoc@v3
-      - uses: useblacksmith/rust-cache@v3
       - run: cargo build -p server

.vscode/settings.json

@@ -1,3 +1,12 @@
 {
-  "swift.disableSwiftPackageManagerIntegration": true
+  "swift.disableSwiftPackageManagerIntegration": true,
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
 }

Taskfile.yaml

@@ -9,5 +9,11 @@ tasks:
     silent: true
     deps: ['fmt:yaml', 'fmt:toml', 'fmt:rs', 'fmt:swift', 'fmt:js']
 
-  server:dev: shuttle run
-  server:deploy: shuttle deploy
+  server:dev:
+    cmds:
+      - pnpm -F web build
+      - shuttle run
+  server:deploy:
+    cmds:
+      - pnpm -F web build
+      - shuttle deploy

apps/server/Cargo.toml

@@ -11,11 +11,12 @@ shuttle-axum = "0.49.0"
 shuttle-runtime = "0.49.0"
 shuttle-shared-db = { version = "0.49.0", features = ["postgres", "sqlx"] }
 shuttle-posthog = { path = "../../crates/shuttle-posthog" }
+shuttle-clerk = { path = "../../crates/shuttle-clerk" }
 
 tokio = { workspace = true }
 futures = { workspace = true }
 axum = { version = "0.7.4", features = ["ws"] }
-tower-http = { version = "0.6.2", features = ["timeout"] }
+tower-http = { version = "0.6.2", features = ["fs", "timeout"] }
 reqwest = "0.12.9"
 async-openai = { version = "0.26.0", default-features = false }
 sentry = { workspace = true }
@@ -33,4 +34,3 @@ schemars = { workspace = true, features = ["preserve_order"] }
 
 lettre = "0.11.11"
 async-stripe = { version = "0.39.1", features = ["runtime-tokio-hyper"] }
-clerk-rs = { version = "0.4.0", features = ["axum"] }

apps/server/src/main.rs

@@ -5,12 +5,17 @@ use axum::{
     routing::{get, post},
     Router,
 };
+
+use shuttle_clerk::{ClerkClient as Clerk, ClerkLayer, MemoryCacheJwksProvider};
 use shuttle_posthog::posthog::Client as Posthog;
 use shuttle_runtime::SecretStore;
 
 use sqlx::PgPool;
 use std::time::Duration;
-use tower_http::timeout::TimeoutLayer;
+use tower_http::{
+    services::{ServeDir, ServeFile},
+    timeout::TimeoutLayer,
+};
 
 mod auth;
 mod enhance;
@@ -22,6 +27,7 @@ mod transcribe;
 async fn main(
     #[shuttle_runtime::Secrets] secrets: SecretStore,
     #[shuttle_shared_db::Postgres] db: PgPool,
+    #[shuttle_clerk::Clerk(secret_key = "{secrets.CLERK_SECRET_KEY}")] clerk: Clerk,
     #[shuttle_posthog::Posthog(
         api_base = "https://us.i.posthog.com",
         api_key = "{secrets.POSTHOG_API_KEY}"
@@ -37,7 +43,15 @@ async fn main(
         posthog,
     };
 
-    let api_router = Router::new()
+    let web_router = Router::new()
+        .route("/health", get(health))
+        .layer(ClerkLayer::new(
+            MemoryCacheJwksProvider::new(clerk),
+            None,
+            true,
+        ));
+
+    let native_router = Router::new()
         .route(
             "/enhance",
             post(enhance::handler).layer(TimeoutLayer::new(Duration::from_secs(20))),
@@ -52,9 +66,17 @@ async fn main(
             auth::middleware_fn,
         ));
 
+    let web_dir = std::path::PathBuf::from(env!("CARGO_MANIFEST_DIR")).join("../web");
+
     let router = Router::new()
-        .nest("/api", api_router)
+        .nest("/api/native", native_router)
+        .nest("/api/web", web_router)
         .route("/health", get(health))
+        .fallback_service(
+            ServeDir::new(web_dir.join("dist"))
+                .append_index_html_on_directories(false)
+                .fallback(ServeFile::new(web_dir.join("dist/index.html"))),
+        )
         .with_state(state);
 
     Ok(router.into())

apps/web/.gitignore

@@ -0,0 +1,18 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+.vinxi
+.output
+.vercel
+.netlify
+.wrangler
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

apps/web/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hypr</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/web/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@hypr/web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "dev": "vite --port=3001",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@tanstack/router-plugin": "^1.91.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "tailwindcss": "^3.4.16",
+    "vite": "^6.0.3"
+  },
+  "dependencies": {
+    "@clerk/clerk-react": "^5.21.0",
+    "@tanstack/react-query": "^5.62.10",
+    "@tanstack/react-router": "^1.92.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zustand": "^5.0.2"
+  }
+}

apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/web/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/web/src/main.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+//
+
+import "./index.css";
+import { ClerkProvider } from "@clerk/clerk-react";
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+const rootElement = document.getElementById("app")!;
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+
+  root.render(
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
+      <RouterProvider router={router} />
+    </ClerkProvider>,
+  );
+}