{"id":21463514,"url":"https://github.com/intesys/ymock","last_synced_at":"2025-07-15T03:31:47.447Z","repository":{"id":43398440,"uuid":"463551224","full_name":"intesys/ymock","owner":"intesys","description":"A minimal administrative UI for MSW (https://mswjs.io).","archived":true,"fork":false,"pushed_at":"2023-11-22T14:32:03.000Z","size":2304,"stargazers_count":15,"open_issues_count":11,"forks_count":1,"subscribers_count":8,"default_branch":"develop","last_synced_at":"2025-04-06T20:15:34.370Z","etag":null,"topics":["admin-ui","mocking","mswjs","service-worker"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/intesys.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-25T13:54:06.000Z","updated_at":"2024-12-06T10:24:32.000Z","dependencies_parsed_at":"2023-02-18T09:01:13.629Z","dependency_job_id":"513ba3ce-5d9d-420a-9078-3d067ef942fb","html_url":"https://github.com/intesys/ymock","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/intesys/ymock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intesys%2Fymock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intesys%2Fymock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intesys%2Fymock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intesys%2Fymock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intesys","download_url":"https://codeload.github.com/intesys/ymock/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intesys%2Fymock/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265397583,"owners_count":23758445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["admin-ui","mocking","mswjs","service-worker"],"created_at":"2024-11-23T07:23:22.384Z","updated_at":"2025-07-15T03:31:47.239Z","avatar_url":"https://github.com/intesys.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# yMock\n\n![yMock home](.preview/scrn-04.png)\n\n## What is yMock?\n\n**TL;DR:** _A full-featured management GUI for [MSW](https://mswjs.io)_\n\n[yMock](https://github.com/intesys/ymock/) is a development tool based on [MSW](https://mswjs.io) that offers a graphic interface for the developer to manage mock data and a service worker that runs underneath. By using yMock, the developer can see the list of endpoint calls to be intercepted by the worker, change the data each one should return in the response body, and turn on/off the worker interception as a whole or in each endpoint response individually.\n\nIt is worth pointing out that, by using the service worker, the interception occurs in the network layer. Therefore the calls are listed and can be inspected in the network tab of your browser's development tools.\n\n## What does it do?\n\n- It presents a graphic interface that favors development experience;\n- It uses a service worker to intercept API calls in the network layer;\n- It lists the URLs registered by MSW to be intercepted;\n- It displays and allows the user to override the mocked response;\n- It allows the user to start/stop the worker as a whole or in each URL individually.\n\n---\n\n## Getting started\n\n### Monorepo structure\n\nThis project is a monorepo, managed with [TurboRepo](https://turbo.build/); here's how it's organized:\n\n```\nymock\n  │\n  └── apps\n        ├── host\n        ├── launcher\n        └── ymock\n      packages\n        └── shared\n      docs\n      website\n```\n\n- `apps`, `packages`: conventional monorepo dirs\n- `host` workspace: the host app (read more later), AKA `ymock-host`\n- `ymock` workspace: you guessed it, AKA `ymock-client`\n- `launcher` workspace: yMock's launcher UI, AKA `ymock-launcher`\n- `docs` workspace: documentation site (WIP)\n- `website` workspace: product website (WIP)\n- `shared` workspace: libraries, utilities, etc\n\n### Initializing the monorepo\n\nIf it's the first time you use the repo, or if you just cloned it, follow this step;\notherwise, skip to the next one.\n\nFrom the root of the repo, run:\n\n```bash\nnpm i\n```\n\nThis will install the deps and register all workspaces to the monorepo manager.\nNotice that each workspace will have its own `node_modules`; plus, there'll be a\nglobal `node_modules` at the root of the repo.\n\n### Installing \u0026 managing deps\n\nAs a rule of thumb, use the global installation when you initially clone the repo\nand if/when you do something that alters the workspace definitions for Turbo\n(i.e. adding/removing workspaces, or changing the disk location of any workspace -- also see [here.](https://turbo.build/repo/docs/handbook/workspaces#managing-workspaces)).\n\nIn all other cases, run per-workspace `npm` commands with `--workspace`. For all the details, please refer to [this guide](https://turbo.build/repo/docs/handbook/package-installation).\n\n### Running the dev server\n\nBefore we start: yMock's use case is to manage a `msw` instance launched by a host app;\nthe host app could be literally any app run by the end user.\n\nTo realistically simulate this behavior, the monorepo contains a `host` app that\n`import`s `ymock-launcher` as a dependency; the launcher's job is to receive the\n`msw` instance and pass it to `ymock-client`, which lives in a `__ymock` directory\nunder the host project's root.\n\n```mermaid\nflowchart\n954045[\"ymock-launcher dist\"] ==\u003e|\"is imported by\"| 747745[\"Host project's source files\"]\nlinkStyle 0 stroke:#004aff\n688838[\"msw\"] ==\u003e|\"is installed to\"| 858379[\"Host project's server\"]\nlinkStyle 1 stroke:#0055ff\n798284[\"ymock-client dist\"] ==\u003e|\"is installed to\"| 385674[\"/__ymock directory\"]\nlinkStyle 2 stroke:#0021ff\nsubgraph 747745[\"Host project's source files\"]\nend\nsubgraph 858379[\"Host project's server\"]\n385674\nend\n```\n\nSo, the global `dev` task will:\n\n- Run client, launcher \u0026 host on their own dev server, in parallel\n- Build launcher \u0026 client _before_ running dev on the host app\n- Import launcher into host as an actual npm dependency, referencing the dist assets\n- Copy the client build into host, reproducing how it should work in the context of the end user's project\n- Rebuild launcher \u0026 client on any dev change, and copy client into host\n\n![Host app \u0026 yMock side by side](.preview/scrn-07.png)\n\nReady? Just run -- from the root:\n\n```bash\nnpm run dev\n```\n\nTo see yMock in action, click the **\"Launch yMock\"** launcher button in the host app.\n\n#### What if I need to run just one app?\n\nWhile the global `dev` command will run the `dev` task _in all workspaces that have one_,\nyou can also run it just in _some_ workspaces by using a filter (like `--workspace=\u003cWORKSPACE\u003e`).\n\n#### Use the power of the monorepo to your advantage\n\nWhen you need to rapidly iterate on ymock's UI, just visit `ymock-client`'s dev server\n-- remember, it's a monorepo, so we're running multiple apps in parallel; in this case, the app won't use an actual reference to `msw`, but a mock object. The changes you make in dev are instantly reflected in the app.\n\n---\n\n### Building\n\n(WIP)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintesys%2Fymock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintesys%2Fymock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintesys%2Fymock/lists"}