vite-plugin-httpfile

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's package.json or npm 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