|
| 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