Gathering detailed insights and metrics for vite-plugin-simple-json-server
Installations
npm install vite-plugin-simple-json-serverDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=15.7.0
Node Version
16.19.0
NPM Version
8.19.3
Score
65.7
Supply Chain
91.5
Quality
75.6
Maintenance
50
Vulnerability
98.6
License
Releases
23
vite-plugin-simple-json-server@0.6.2
vite-plugin-simple-json-server@0.6.2
Updated on Feb 08, 2023
vite-plugin-simple-json-server@0.6.1
vite-plugin-simple-json-server@0.6.1
Updated on Sep 27, 2022
vite-plugin-simple-json-server@0.6.0
vite-plugin-simple-json-server@0.6.0
Updated on Sep 14, 2022
vite-plugin-simple-json-server@0.5.5
vite-plugin-simple-json-server@0.5.5
Updated on Sep 10, 2022
vite-plugin-simple-json-server@0.5.4
vite-plugin-simple-json-server@0.5.4
Updated on Sep 09, 2022
vite-plugin-simple-json-server@0.5.3
vite-plugin-simple-json-server@0.5.3
Updated on Sep 08, 2022
Contributors
2
Unable to fetch Contributors
Languages
4
TypeScript
JavaScript
HTML
Shell
TypeScript (98.08%)
JavaScript (1.48%)
HTML (0.25%)
Shell (0.2%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
alextim
Download Statistics
Total Downloads
25,236
Last Day
93
Last Week
413
Last Month
1,841
Last Year
15,610
GitHub Statistics
MIT License
8 Stars
155 Commits
3 Forks
1 Watchers
6 Branches
2 Contributors
Updated on Oct 21, 2024
Maintainers
1
Package Meta Information
Latest Version
0.6.2
Package Id
vite-plugin-simple-json-server@0.6.2
Unpacked Size
107.03 kB
Size
25.86 kB
File Count
6
NPM Version
8.19.3
Node Version
16.19.0
Published on
Feb 08, 2023
Total Downloads
Cumulative downloads
Total Downloads
25,236
Last Day
-27.9%
93
Compared to previous day
Last Week
-20.1%
413
Compared to previous week
Last Month
35.8%
1,841
Compared to previous month
Last Year
147.9%
15,610
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
vite-plugin-simple-json-server
Provide a file-based mock API for Vite in dev mode.
- Why vite-plugin-simple-json-server
- Installation
- Usage
- OpenAPI (Swagger)
- Configuration
- Examples
- Contributing
- Changelog
- Inspirations
Why vite-plugin-simple-json-server?
This plugin is for lazy developers to create a mock API quickly. Simply place some json files into the mock folder and your file based API is ready. Out of the box you have pagination, sorting, filter and basic CRUD operations.
Additionally the plugin serves static files such as html, js, css, txt.
As well you can define the custom route's handlers in the plugin config.
As bonus, you can visualize the OpenAPI Specification schema generated by the plugin in an interactive UI (Swagger) with zero efforts.
The plugin is lightweight and has only a few dependencies.
Installation
First, install the vite-plugin-simple-json-server package using your package manager.
1# Using NPM 2npm add -D vite-plugin-simple-json-server 3 4# Using Yarn 5yarn add -D vite-plugin-simple-json-server 6 7# Using PNPM 8pnpm add -D vite-plugin-simple-json-server
Then, apply this plugin to your vite.config.* file using the plugins property:
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 // ... 5 plugins: [jsonServer()], 6};
Then, restart the dev server.
This configuration assumes that all json files are in the mock folder under Vite root.
To work correctly, the plugin requires Node version 15.7.0 or higher.
Usage
The vite-plugin-simple-json-server injects own middleware into development and preview servers.
By default it is invoked only for serve mode.
The plugin first serves the handler routes, then the json API and at the very end, the static files.
Any query parameters are ignored for static files.
Pagination and count is only available for array-based json. For sorting and filtering the json must be an array of objects.
If there is a parameter in the filter or sort request that is not among the json fields, that parameter will be ignored.
Let's have the products.json in the mock folder.
1[ 2 { 3 "id": 1, 4 "name": "Banana", 5 "price": 2, 6 "weight": 1, 7 "packing": { 8 "type": "box", 9 } 10 }, 11 { 12 "id": 2, 13 "name": "Apple", 14 "price": 2, 15 "weight": 1, 16 "packing": { 17 "type": "box", 18 } 19 }, 20 { 21 "id": 3, 22 "name": "Potato", 23 "price": 2, 24 "weight": 10, 25 "packing": { 26 "type": "bag", 27 } 28 }, 29 30 ... 31 32]
Pagination
Default limit is 10.
1curl http://localhost:5173/products?offset=0 2 3 4curl http://localhost:5173/products?offset=20
For the custom limit, pass it to the query:
1curl http://localhost:5173/products?offset=200&limit=100
The server sets the Link response header with URLs for the first, previous, next and last pages according to the current limit. Also it sets the X-Total-Count header.
Sorting
Default sort order is ascending.
1curl http://localhost:5173/products?sort=name 2
For the descending order prefix a field name with -:
1curl http://localhost:5173/products?sort=-name
Multiply field sorting is supported.
1curl http://localhost:5173/products?sort=name,-price 2
Use . to access deep properties.
1curl http://localhost:5173/products?sort=packing.type
Filtering
1curl http://localhost:5173/products?id=2 2 3 4curl http://localhost:5173/products?id=2&id=3 5 6 7curl http://localhost:5173/products?price=2&weight=1
If the requested resource has an id property, you can append the id value to the URL.
1curl http://localhost:5173/products/2 2
Deep properties
Use . to access deep properties.
1 2curl http://localhost:5173/products?packing.type=box
Operators
The plugin supports ne, lt, gt, lte, gte and like operators.
1 2curl http://localhost:5173/products?id[ne]=2 3 4curl http://localhost:5173/products?id[gt]=1&id[lt]=10 5 6
Like is performed via RegExp.
1 2curl http://localhost:5173/products?name[like]=ota 3
Count
The count will be returned in the response header X-Total-Count.
1curl -I http://localhost:5173/products
You can filter as well while count.
1curl -I http://localhost:5173/products?price=2
:bulb: The pagination is available with sort and filter.
CRUD
Full CRUD operations are only available for array-like JSON with a numeric id property.
Array-like
| HTTP Verb | CRUD | Entire Collection (e.g. /products) | Specific Item (e.g. /products/{id}) |
|---|---|---|---|
| HEAD | Read | 204 (OK), items count in X-Total-Count header. | 405 (Method Not Allowed) |
| GET | Read | 200 (OK), list of items. Use pagination, sorting and filtering to navigate large lists. |
|
| POST | Create |
| 405 (Method Not Allowed). |
| PUT | Update/Replace | 405 (Method Not Allowed). |
|
| PATCH | Update/Modify | 405 (Method Not Allowed). |
|
| DELETE | Delete | 405 (Method Not Allowed). |
|
Object
| HTTP Verb | CRUD | Entire Object (e.g. /profile) | Specific Item (e.g. /profile/{id}) |
|---|---|---|---|
| GET | Read | 200 (OK), object. | 404 (Not Found). |
| POST | Create |
| 404 (Not Found). |
| PUT | Update/Replace | 200 (OK), replaced object. | 404 (Not Found). |
| PATCH | Update/Modify | 200 (OK), modified object. | 404 (Not Found). |
| DELETE | Delete | 405 (Method Not Allowed). | 404 (Not Found). |
OpenAPI (Swagger)
The plugin generates JSON according to the OpenAPI Specification v3.0.
It is available on /{api}/v3/openapi.json route.
Also you can explore your API directly on /{api}/v3/openapi page (Swagger UI).
To perform CRUD operations, the plugin assumes that each array-like JSON has a numeric id property.
Configuration
To configure this plugin, pass an object to the jsonServer() function call in vite.config.ts.
vite.config.ts
1... 2export default defineConfig({ 3 plugins: [jsonServer({ 4 handlers: ... 5 })] 6});
disable
| Type | Required | Default value |
|---|---|---|
Boolean | No | false |
If true the plugin won't run its middleware while dev or preview.
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 plugins: [ 5 jsonServer({ 6 disable: true, 7 }), 8 ], 9};
mockDir
| Type | Required | Default value |
|---|---|---|
String | No | mock |
It's a subfolder under the Vite root. Place all your JSON files here.
If the file name is index.* then its route will be the parent directory path.
| Type | Supported methods |
|---|---|
json (object) | GET |
json (array-like) | GET, POST, PUT, PATCH, DELETE |
html | htm | shtml | GET |
js | mjs | GET |
css | GET |
txt | text | GET |
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 5 plugins: [ 6 jsonServer({ 7 mockDir: 'json-mock-api', 8 }), 9 ], 10};
staticDir
| Type | Required | Default value |
|---|---|---|
String | No | options.mockDir |
It's a subfolder under the Vite root. An alternative to the mockDir folder for static files such as html, css and js.
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 5 plugins: [ 6 jsonServer({ 7 staticDir: 'public', 8 }), 9 ], 10};
urlPrefixes
| Type | Required | Default value |
|---|---|---|
String[] | No | [ '/api/' ] |
Array of non empty strings.
The plugin will look for requests starting with these prefixes.
Slashes are not obligatory: plugin will add them automatically during option validation.
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 plugins: [ 5 jsonServer({ 6 urlPrefixes: [ 7 '/fist-api/', 8 '/second-api/', 9 ], 10 }), 11 ], 12};
noHandlerResponse404
| Type | Required | Default value |
|---|---|---|
Boolean | No | true |
If its value is false the server won't respond with 404 error.
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 plugins: [ 5 jsonServer({ 6 noHandlerResponse404: false, 7 }), 8 ], 9};
logLevel
| Type | Required | Default value |
|---|---|---|
LogLevel | No | info |
Available values: 'info' | 'warn' | 'error' | 'silent';
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 plugins: [ 5 jsonServer({ 6 logLevel: 'error', 7 }), 8 ], 9};
handlers
| Type | Required | Default value |
|---|---|---|
MockHandler[] | No | undefined |
For the custom routes. Array of mock handlers.
The MockHandler type consists of pattern, method, handle and description fields.
pattern
String, required.
Apache Ant-style path pattern. It's done with @howiefh/ant-path-matcher.
The mapping matches URLs using the following rules:
?matches one character;*matches zero or more characters;**matches zero or more directories in a path;{spring:[a-z]+}matches the regexp[a-z]+as a path variable namedspring.
method
String, optional.
Any HTTP method: GET | POST etc;
MockFunction: (req: Connect.IncomingMessage, res: ServerResponse, urlVars?: Record<string, string>): void
req:Connect.IncomingMessagefrom Vite;res:ServerResponsefrom Node http;urlVars: key-value pairs from parsed URL.
handle
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 plugins: [ 5 jsonServer({ 6 handlers: [ 7 { 8 pattern: '/api/hello/1', 9 handle: (req, res) => { 10 res.end(`Hello world! ${req.url}`); 11 }, 12 }, 13 { 14 pattern: '/api/hello/*', 15 handle: (req, res) => { 16 res.end(`Hello world! ${req.url}`); 17 }, 18 }, 19 { 20 pattern: '/api/users/{userId}', 21 method: 'POST', 22 handle: (req, res, urlVars) => { 23 const data = [ 24 { 25 url: req.url, 26 urlVars 27 }, 28 ]; 29 res.setHeader('content-type', 'application/json'); 30 res.end(JSON.stringify(data)); 31 }, 32 }, 33 ], 34 }), 35 ], 36};
:exclamation: Handlers are served first. They intercept namesake file routes.
limit
| Type | Required | Default value |
|---|---|---|
Number | No | 10 |
Number of items to return while paging.
Usage:
1curl http://localhost:5173/products?offset=300&limit=100
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 plugins: [ 5 jsonServer({ 6 limit: 100, 7 }), 8 ], 9};
delay
| Type | Required | Default value |
|---|---|---|
Number | No | 0 |
Add delay to responses (ms).
vite.config.ts
1import jsonServer from 'vite-plugin-simple-json-server'; 2 3export default { 4 plugins: [ 5 jsonServer({ 6 delay: 1000, 7 }), 8 ], 9};
Examples
| Example | Source | Playground |
|---|---|---|
| basic | GitHub | Play Online |
| CRUD | GitHub | Play Online |
Contributing
You're welcome to submit an issue or PR!
Changelog
See CHANGELOG.md for a history of changes to this plugin.
Inspirations
No vulnerabilities found.
No security vulnerabilities found.