{"library":"miragejs","title":"Mirage JS","description":"Mirage JS is a client-side server library for JavaScript applications, designed to mock API requests during development, testing, and prototyping. It intercepts network requests (XHR and Fetch) and returns defined responses, allowing front-end development to proceed independently of a live backend. The current stable version is 0.1.48, with an experimental 0.2.x alpha branch actively exploring integration with MSW as an alternative interceptor to the default Pretender. Mirage JS is distinguished by its full-featured ORM-like data layer, including models, factories, and serializers, which enables complex data relationships and realistic mock API interactions, setting it apart from simpler request mocking tools. Its release cadence appears to be several patches per month on the 0.1.x branch, with larger architectural changes being developed in the 0.2.x alpha line.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install miragejs"],"cli":null},"imports":["import { createServer } from 'miragejs';","import { Model, Factory, Response } from 'miragejs';","type MyServer = ReturnType<typeof createServer>;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createServer, Model, Factory, Response } from 'miragejs';\n\nasync function setupMirage() {\n  const server = await createServer({\n    environment: 'development',\n\n    models: {\n      user: Model,\n      post: Model,\n    },\n\n    factories: {\n      user: Factory.extend({\n        name(i) { return `User ${i}`; },\n        email(i) { return `user${i}@example.com`; }\n      }),\n      post: Factory.extend({\n        title(i) { return `Post ${i} Title`; },\n        content: 'Lorem ipsum dolor sit amet.',\n        createdAt: () => new Date()\n      })\n    },\n\n    seeds(server) {\n      let users = server.createList('user', 5);\n      users.forEach(user => {\n        server.createList('post', 2, { user });\n      });\n    },\n\n    routes() {\n      this.namespace = 'api';\n      this.timing = 200; // Simulate network latency\n\n      this.get('/users', (schema) => {\n        return schema.users.all();\n      });\n\n      this.get('/users/:id', (schema, request) => {\n        const id = request.params.id;\n        const user = schema.users.find(id);\n        if (!user) {\n          return new Response(404, { 'Content-Type': 'application/json' }, { errors: ['User not found'] });\n        }\n        return user;\n      });\n\n      this.post('/posts', (schema, request) => {\n        const attrs = JSON.parse(request.requestBody);\n        return schema.posts.create(attrs);\n      });\n\n      // Pass through unhandled requests\n      this.passthrough('/some-external-api/**');\n    },\n  });\n\n  console.log('Mirage JS server initialized:', server);\n  // Example fetch call against the mock server\n  const response = await fetch('/api/users');\n  const data = await response.json();\n  console.log('Fetched users:', data.users);\n\n  // In a real app, you would integrate this into your app's startup logic.\n  // Don't forget to call server.shutdown() when done (e.g., in teardown).\n}\n\n// Call the async setup function\nsetupMirage().catch(console.error);\n","lang":"typescript","description":"This quickstart demonstrates setting up a basic Mirage JS server with models, factories, seeds, and routes, then making a mock API call.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}