Vite httpfile plugin
An Vite.js plugin to import httpfile for HTTP Request/GraphQL request.
How to use?
- Create a http file, such as
demo.http
, code as following:
### get my ip
//@name myIp
GET https://httpbin.org/ip
User-Agent: curl/7.47.0
### post test
//@name postTest
POST https://{{host}}/post
User-Agent: curl/7.47.0
Content-Type: application/json
{
"name": "{{nick}}",
"age": 42,
"uuid": "{{$uuid}}"
}
- Add
vite-plugin-httpfile
to your project'spackage.json
ornpm add -D vite-plugin-httpfile
.
"devDependencies": {
"vite-plugin-httpfile": "^0.1.1"
}
- In JavaScript/TypeScript file, such as
hello.mjs
, and you can import http file directly. Code as following:
import {myip} from "./demo.http";
let response = await myip();
console.log(await response.json());
vite.config.ts configuration
import {defineConfig} from 'vitest/config';
import viteHttpfilePlugin from "vite-plugin-httpfile";
export default defineConfig({
plugins: [viteHttpfilePlugin(true)]
});
Mock Support
You can mock request by adding //@mock
tag for request. Code as following:
### get my ip
//@name myIp
//@mock {"origin":"127.0.0.1"}
GET https://httpbin.org/ip
For multi lines data, please add more //@mock
lines.
### get csv data
//@name myData
//@mock name,gender
//@mock linux_china,M
GET https://your_service/data
Accept: text/csv
Note: if process.env.NODE_ENV
is production
, then mock data will not be used.
GraphQ over HTTP support
Create GraphQL request in http file, code as following:
### graphql test
//@name graphqlTest
GRAPHQL https://localhost:8787/graphql
query {
welcome(name : "{{nick}}" )
}
Then call let response = await graphqlTest({nick:'your_nick'})
just like normal HTTP request.
Framework Integration
Vitest integration
vite.config.ts
configuration file as following:
import {defineConfig} from 'vitest/config';
import viteHttpfilePlugin from "vite-plugin-httpfile";
export default defineConfig({
define: {
'import.meta.vitest': 'undefined',
},
test: {
includeSource: ['src/**/*.{js,ts}', 'tests/**/*.{js,ts}'],
},
plugins: [viteHttpfilePlugin(true)]
});
Then create tests/first.test.ts
file with following code:
import {test} from "vitest";
import {myIp} from './demo.http';
test("my-ip", async () => {
let response = await myIp();
console.log(await response.json());
})
Finally, run vitest
command to run your tests.
Astro Integration
Astro configuration file astro.config.mjs
as following:
import {defineConfig} from "astro/config";
import viteHttpfilePlugin from "vite-plugin-httpfile";
export default defineConfig({
vite: {
plugins: [viteHttpfilePlugin(true)]
}
}
);
Then import http file in astro file:
---
import {myIp} from "./httpbin.http";
let response = await myIp();
const ip = (await response.json()).origin;
---
<h1>Your ip: {ip}</h1>
References
- Rollup Plugin Overview: https://rollupjs.org/guide/en/#plugins-overview
- esbuild-plugin-httpfile: esbuild plugin for httpfile https://github.com/servicex-sh/esbuild-plugin-httpfile
- rollup-plugin-httpfile: rollup plugin for httpfile https://github.com/servicex-sh/rollup-plugin-httpfile