{"id":40782749,"url":"https://github.com/vedovelli/miragejs-starter-kit","last_synced_at":"2026-01-21T19:33:24.987Z","repository":{"id":39917745,"uuid":"237230556","full_name":"vedovelli/miragejs-starter-kit","owner":"vedovelli","description":"A bolierplate for a Mirage JS server with initial data","archived":false,"fork":false,"pushed_at":"2022-08-19T12:52:01.000Z","size":27,"stargazers_count":70,"open_issues_count":3,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-15T01:30:31.133Z","etag":null,"topics":["api","javascript","miragejs","mocking"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vedovelli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-30T14:28:22.000Z","updated_at":"2024-03-21T13:28:22.000Z","dependencies_parsed_at":"2022-09-21T04:42:27.055Z","dependency_job_id":null,"html_url":"https://github.com/vedovelli/miragejs-starter-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vedovelli/miragejs-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedovelli%2Fmiragejs-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedovelli%2Fmiragejs-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedovelli%2Fmiragejs-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedovelli%2Fmiragejs-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vedovelli","download_url":"https://codeload.github.com/vedovelli/miragejs-starter-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedovelli%2Fmiragejs-starter-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28641273,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T18:04:35.752Z","status":"ssl_error","status_checked_at":"2026-01-21T18:03:55.054Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","javascript","miragejs","mocking"],"created_at":"2026-01-21T19:33:22.609Z","updated_at":"2026-01-21T19:33:24.980Z","avatar_url":"https://github.com/vedovelli.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mirage JS Starter Kit\n\n[From Mirage website](https://miragejs.com/):\n\n\u003e Mirage JS is an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend services.\n\nTheir documentation is straight to the point but it only helps you setting up a simple server without any suggestion of folder organization. This starter kit keeps things separate into their own folders, introducing separation of concerns and making it easier to reason about all the parts.\n\n---\n\n## How to use it\n\n### 1. Having started a React or Vue.js project, copy all the files to the src folder:\n\n```\ncd src \u0026\u0026 npx degit vedovelli/miragejs-starter-kit miragejs\n```\n\n[What is **degit**?](https://github.com/Rich-Harris/degit#readme)\n\nThis will create the `miragejs` folder inside `src`. You can use any folder name you find best.\n\n**IMPORTANT**: do NOT omit the folder name in the degit command otherwise all starter kit's folders will be created inside your src folder, messing up your project organization.\n\n### 2. Make sure all dependencies are installed:\n\n```\nnpm install --save-dev miragejs faker\n```\n\n### 3. Make your project aware of Mirage JS:\n\n**React**\n\n```\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\nif (process.env.NODE_ENV === \"development\") {\n  // You can't use import in a conditional so we're using require() so no\n  // Mirage JS code will ever reach your production build.\n  require('./miragejs/server').makeServer();\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n**Vue.js**\n\n```\nimport Vue from \"vue\";\nimport App from \"./App.vue\";\nimport router from \"./router\";\nimport store from \"./store\";\n\nif (process.env.NODE_ENV === \"development\") {\n  // You can't use import in a conditional so we're using require() so no\n  // Mirage JS code will ever reach your production build.\n  require('./miragejs/server').makeServer();\n}\n\nVue.config.productionTip = false;\n\nnew Vue({\n  router,\n  store,\n  render: h =\u003e h(App)\n}).$mount(\"#app\");\n```\n\n**Next.js**\n\n```\n// pages/_app.js\nimport { makeServer } from \"../miragejs/server\";\n\nif (process.env.NODE_ENV === \"development\") {\n  // Mirage JS code will ever reach your production build.\n  makeServer({ environment: \"development\" })\n}\n\nfunction MyApp({ Component, pageProps }) {\n  return \u003cComponent {...pageProps} /\u003e\n}\n\nexport default MyApp\n```\n \n\n### 4. Calling the API\n\nInside any component of your application and using your favorite HTTP request's library make a call to `api/users`. You will receive back a list of 10 objects with the following shape:\n\n```\n{id: \"1\", name: \"Some name\", mobile: \"+1 555 525636\"}\n```\n\nAdditionally if you call `api/products` you'll receive back a list of 3 objects with the following shape:\n\n```\n{\n  id: \"1\",\n  name: \"Javascript coffee mug\",\n  description: \"We are nothing without coffee\",\n  price: 3.5\n},\n```\n\nThose routes operate with a `resource` meaning they accept all HTTP verbs involved in a CRUD operation.\n\nTo get all the messages associated with an user make a call to `api/messages?userId=\u003cpass a valid user ID\u003e`.\n\n### 5. Adding your own content\n\nLastly tweak `factories`, `fixtures` and `seeds` to accommodate your own needs.\n\n---\n\n## Folder structure\n\n- `factories`: contains the blueprints for the content to be generated by mirage. It uses [faker](https://github.com/Marak/Faker.js#readme) to generate random but credible content;\n- `fixtures`: contains predefined data to be served by Mirage. Use it if you have content to be served from JSON files;\n- `models`: contains all models for the database entities. Every time you create a new resource or a new fixture, it is necessary to create a new model;\n- `routes`: contains the routes for your API;\n- `seeds`: contains the seeds for the data. They determine how many records should be generated and stored in the database. For that purpose they use the Factories.\n\n## Example projects\n\nTo help you see it in action there are 2 example projects. For each one of them all instructions above were followed and the data is displayed in the interface.\n\n**React**: [https://github.com/vedovelli/miragejs-starter-kit-react-example](https://github.com/vedovelli/miragejs-starter-kit-react-example)\n\n**Vue.js**: [https://github.com/vedovelli/miragejs-starter-kit-vuejs-example](https://github.com/vedovelli/miragejs-starter-kit-vuejs-example)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvedovelli%2Fmiragejs-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvedovelli%2Fmiragejs-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvedovelli%2Fmiragejs-starter-kit/lists"}