|
| 1 | +# Upload track (Web with backend server) |
| 2 | + |
| 3 | +Minimal Vite + React app that lets users **sign in via OAuth** (popup) and **upload a track** using the SDK on a backend server. Use this as a reference for: |
| 4 | + |
| 5 | +- **SDK setup** in a browser / Vite app (singleton, node polyfills) |
| 6 | +- **OAuth popup flow** (scope=write) — opens popup, postMessage for token |
| 7 | +- **uploadTrackFiles** — client uploads audio + cover to storage |
| 8 | +- **Server-side createTrack** — client POSTs `{ userId, metadata }`; server uses developer app bearer |
| 9 | + |
| 10 | +## Requirements |
| 11 | + |
| 12 | +- **Your own server** with `AUDIUS_API_KEY` and `AUDIUS_BEARER_TOKEN` in `.env` |
| 13 | +- **Developer app** at [audius.co/settings](https://audius.co/settings) → Developer Apps |
| 14 | + |
| 15 | +## How to run |
| 16 | + |
| 17 | +### 1. Build the SDK and run the server |
| 18 | + |
| 19 | +From the **apps repo root**: |
| 20 | + |
| 21 | +```bash |
| 22 | +npm install |
| 23 | +npm run build -w @audius/sdk |
| 24 | +cd packages/web/examples/upload/server |
| 25 | +cp .env.example .env |
| 26 | +# Edit .env: AUDIUS_API_KEY, AUDIUS_BEARER_TOKEN |
| 27 | +npm install |
| 28 | +npm start |
| 29 | +``` |
| 30 | + |
| 31 | +Server runs at `http://localhost:3003`: |
| 32 | + |
| 33 | +- `POST /create-track` — body: `{ userId, metadata }` — uses developer app bearer |
| 34 | + |
| 35 | +### 2. Run the client |
| 36 | + |
| 37 | +In another terminal: |
| 38 | + |
| 39 | +```bash |
| 40 | +cd packages/web/examples/upload |
| 41 | +cp .env.example .env |
| 42 | +# Edit .env: VITE_AUDIUS_API_KEY, VITE_WRITE_SERVER_URL=http://localhost:3003 |
| 43 | +npm install |
| 44 | +npm run dev |
| 45 | +``` |
| 46 | + |
| 47 | +Or from repo root: `npm run web:example:upload`. |
| 48 | + |
| 49 | +Open the URL shown (default `http://localhost:5176`). Sign in with Audius (popup) → pick audio/cover → enter title/genre → click **Upload**. |
| 50 | + |
| 51 | +## Flow |
| 52 | + |
| 53 | +1. User clicks "Sign in with Audius" → popup opens, returns token via postMessage |
| 54 | +2. Client verifies token via `verifyIDToken`, gets `userId` |
| 55 | +3. User picks audio (required) + cover (optional), enters title/genre |
| 56 | +4. Client calls `sdk.tracks.uploadTrackFiles({ audioFile, imageFile })` → gets trackCid, etc. |
| 57 | +5. Client POSTs `{ userId, metadata }` to `/create-track` |
| 58 | +6. Server uses `sdk({ apiKey, bearerToken }).tracks.createTrack()` with developer app bearer |
0 commit comments