https://github.com/service-mocker/service-mocker
🚀 Next generation frontend API mocking framework
https://github.com/service-mocker/service-mocker
mock service-worker
Last synced: 10 months ago
JSON representation
🚀 Next generation frontend API mocking framework
- Host: GitHub
- URL: https://github.com/service-mocker/service-mocker
- Owner: service-mocker
- License: mit
- Archived: true
- Created: 2016-12-01T11:19:46.000Z (over 9 years ago)
- Default Branch: develop
- Last Pushed: 2020-07-21T12:35:10.000Z (about 6 years ago)
- Last Synced: 2024-05-09T20:14:25.037Z (about 2 years ago)
- Topics: mock, service-worker
- Language: JavaScript
- Homepage: https://service-mocker.js.org
- Size: 966 KB
- Stars: 1,017
- Watchers: 14
- Forks: 43
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Service Mocker
[](https://travis-ci.org/service-mocker/service-mocker)
[](https://circleci.com/gh/service-mocker/service-mocker/tree/develop)
[](https://codecov.io/gh/service-mocker/service-mocker/branch/develop)
[](https://www.npmjs.com/package/service-mocker)
[](LICENSE)
[](https://saucelabs.com/u/Service_Mocker)
Service Mocker is an API mocking framework for frontend developers. With the power of [service workers](https://w3c.github.io/ServiceWorker/), we can easily set up mocking services **without any real servers**. It sets developers free from intricate workflows, complex documentations and endless proxies from server to server.
> Q: Is Service Worker ready?
>
> A: No, [not yet](https://jakearchibald.github.io/isserviceworkerready/).
>
> Q: Is Service Mocker ready?
>
> A: Yes! Welcome to the future!
## Installation
Since you are likely to run Service Mocker only during development, you will need to add `service-mocker` as a devDependency:
```
npm install service-mocker --save-dev
```
For legacy browsers, you may also need the [polyfills](https://github.com/service-mocker/service-mocker-polyfills):
```
npm install service-mocker-polyfills --save-dev
```
## Features
- **No server is required**.
- **Real** HTTP requests and responses that can be inspected in modern browsers.
- [express](https://github.com/expressjs/express) style routing system.
- IE10+ compatibility.
## Hello new world
A typical mocker includes two parts: `client` and `server`. First, let's create a server script named `server.js`:
```js
// server.js
import { createServer } from 'service-mocker/server';
const { router } = createServer();
router.get('/greet', (req, res) => {
res.send('Hello new world!');
});
// or you can use the shorthand method
router.get('/greet', 'Hello new world!');
```
Then, we need to write a client script to connect to the server:
```js
// app.js
import 'service-mocker-polyfills';
import { createClient } from 'service-mocker/client';
const client = createClient('path/to/server.js');
client.ready.then(async () => {
const response = await fetch('/greet');
console.log(await response.text());
});
```
After that, create a `.html` file and include **ONLY** the client script:
```html
```
Now navigate your browser to your local dev server (e.g. `http://localhost:3000`). Open the console and you will see the following messages:
```
> [mocker:modern] connection established
>
> Hello new world!
```
Welcome to the future :clap:.
## Working with webpack
While using webpack, it's recommended to use [sw-loader](https://github.com/idiotWu/sw-loader) to create a standalone server script:
```js
import scriptURL from 'sw-loader!path/to/server.js';
import { createClient } from 'service-mocker/client';
const client = createClient(scriptURL);
client.ready.then(...);
```
## Docs & Demos
- [Documentation](https://service-mocker.js.org)
- [Examples](https://github.com/service-mocker/service-mocker-demo)
## Team
[](https://github.com/idiotWu) | [](https://github.com/VincentBel)
:---:|:---:
[Dolphin Wood](https://github.com/idiotWu) | [Vincent Bel](https://github.com/VincentBel)
## License
[MIT](LICENSE)