danabra.mov
forked from
samuel.fm/statusphere-react
the statusphere demo reworked into a vite/react app in a monorepo
samuel.fm
1# Statusphere React
2
3A status sharing application built with React and the AT Protocol.
4
5This is a React implementation of the [example application](https://atproto.com/guides/applications) covering:
6
7- Signin via OAuth
8- Fetch information about users (profiles)
9- Listen to the network firehose for new data
10- Publish data on the user's account using a custom schema
11
12## Structure
13
14- `packages/appview` - Express.js backend that serves API endpoints
15- `packages/client` - React frontend using Vite
16
17## Development
18
19```bash
20# Install dependencies
21pnpm install
22
23# Run this once, to run codegen from the lexicons
24pnpm build:lexicon
25
26pnpm dev
27```
28
29### Additional Commands
30
31```bash
32# Build commands
33pnpm build # Build in correct order: lexicon → client → appview
34pnpm build:lexicon # Build only the lexicon package (type definitions)
35pnpm build:client # Build only the frontend
36pnpm build:appview # Build only the backend
37
38# Start commands
39pnpm start # Start the server (serves API and frontend)
40pnpm start:client # Start frontend development server only
41pnpm start:dev # Start both backend and frontend separately (development only)
42
43# Other utilities
44pnpm typecheck # Run type checking
45pnpm format # Format all code
46```
47
48## Deployment
49
50For production deployment:
51
521. Build all packages in the correct order:
53
54 ```bash
55 pnpm build
56 ```
57
58 This will:
59
60 - Build the lexicon package first (shared type definitions)
61 - Build the frontend (`packages/client`) next
62 - Finally build the backend (`packages/appview`)
63
642. Start the server:
65 ```bash
66 pnpm start
67 ```
68
69The backend server will:
70
71- Serve the API at `/xrpc/*` and `/oauth/*` endpoints
72- Serve the frontend static files from the client's build directory
73- Handle client-side routing by serving index.html for all non-API routes
74
75This simplifies deployment to a single process that handles both the API and serves the frontend assets.
76
77## Environment Variables
78
79Copy the `.env.template` file in the appview to `.env`:
80
81```
82cd packages/appview
83cp .env.template .env
84```
85
86## Requirements
87
88- Node.js 18+
89- pnpm 9+
90
91## License
92
93MIT