Skip to content

Commit 7ddf1ab

Browse files
Copilothotlong
andcommitted
Add Quick Start guide for MSW React CRUD example
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent cb60d98 commit 7ddf1ab

File tree

1 file changed

+94
-0
lines changed

1 file changed

+94
-0
lines changed
Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Quick Start Guide
2+
3+
This guide will help you get the MSW + React CRUD example up and running in 5 minutes.
4+
5+
## Prerequisites
6+
7+
- Node.js 18 or later
8+
- pnpm package manager
9+
10+
## Step 1: Install Dependencies
11+
12+
From the repository root:
13+
14+
```bash
15+
pnpm install
16+
```
17+
18+
This will install all dependencies for the monorepo, including this example.
19+
20+
## Step 2: Build Required Packages
21+
22+
Build the core packages that the example depends on:
23+
24+
```bash
25+
# Build the spec package (contains type definitions)
26+
pnpm --filter @objectstack/spec build
27+
28+
# Build the client package
29+
pnpm --filter @objectstack/client build
30+
```
31+
32+
## Step 3: Initialize MSW
33+
34+
The MSW service worker file should already be initialized, but if you need to regenerate it:
35+
36+
```bash
37+
cd examples/ui/msw-react-crud
38+
npx msw init public/ --save
39+
```
40+
41+
## Step 4: Start the Development Server
42+
43+
```bash
44+
cd examples/ui/msw-react-crud
45+
pnpm dev
46+
```
47+
48+
The application will start on `http://localhost:3000`
49+
50+
## Step 5: Test CRUD Operations
51+
52+
Once the app is running, you can:
53+
54+
1. **Create** a new task using the form
55+
2. **Read** tasks in the task list
56+
3. **Update** a task by clicking "Edit"
57+
4. **Delete** a task by clicking "Delete"
58+
5. **Toggle completion** status by checking/unchecking the checkbox
59+
60+
## What's Happening Under the Hood?
61+
62+
When you interact with the application:
63+
64+
1. React components call `@objectstack/client` methods (e.g., `client.data.create()`)
65+
2. The client makes HTTP requests to `/api/v1/data/task`
66+
3. MSW intercepts these requests in the browser
67+
4. Mock handlers return data from an in-memory database
68+
5. The UI updates with the response
69+
70+
All network requests visible in DevTools are real HTTP requests - they're just being intercepted and handled by MSW!
71+
72+
## Troubleshooting
73+
74+
**Problem**: MSW worker not starting
75+
**Solution**: Run `npx msw init public/ --save` again
76+
77+
**Problem**: TypeScript errors during build
78+
**Solution**: Make sure you've built the dependency packages first
79+
80+
**Problem**: 404 errors in browser
81+
**Solution**: Check that the MSW worker is registered (look for console message)
82+
83+
## Next Steps
84+
85+
- Modify `src/mocks/browser.ts` to add more fields or objects
86+
- Customize the UI in `src/App.css`
87+
- Add more complex query operations
88+
- Experiment with filters and sorting
89+
90+
## Learn More
91+
92+
- Read the full [README.md](./README.md) for detailed documentation
93+
- Check out [MSW Documentation](https://mswjs.io/)
94+
- Explore the [@objectstack/client API](../../packages/client)

0 commit comments

Comments
 (0)