# vite-api-server

> Adding backend API to your Vite app

Latest version **1.0.0** (published 2024-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-api-server
pnpm add vite-api-server
yarn add vite-api-server
bun add vite-api-server
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-06-26 |
| First published | 2023-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 45.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Keywords | vite, plugin, api, REST, development, express, polka |

## Links

- npm: https://www.npmjs.com/package/vite-api-server
- Repository: https://github.com/flynow10/vite-api-server
- Homepage: https://github.com/flynow10/vite-api-server#readme
- Issues: https://github.com/flynow10/vite-api-server/issues
- npm.io page: https://npm.io/package/vite-api-server

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2024-06-26
- 0.5.5 — 2023-12-22
- 0.5.4 — 2023-12-22
- 0.5.3 — 2023-12-22
- 0.5.2 — 2023-11-01
- 0.5.1 — 2023-11-01
- 0.5.0 — 2023-11-01
- 0.4.4 — 2023-10-26
- 0.4.3 — 2023-10-26
- 0.4.2 — 2023-10-26
- 0.4.1 — 2023-10-26

## README

# vite-api-server

[![npm version](https://badgen.net/npm/v/vite-api-server)](https://npm.im/vite-api-server)

## Motivation

Writing front-end and back-end API in a single project allows faster development (imo), this plugin essentially brings Next.js' API routes to your Vite app.

## Install

```bash
npm i vite-api-server -D
```

```bash
yarn add --dev vite-api-server
```

## Usage

`vite.config.ts`:

```ts
import { defineConfig } from "vite";
import { apiServer } from "vite-api-server";

export default defineConfig({
  plugins: [
    apiServer({
      handler: "./handler.ts",
    }),
  ],
});
```

`handler.ts`:

```ts
import type { Handler } from "vite-api-server";

export const handler: Handler = (req, res, next) => {
  if (req.path === "/hello") {
    return res.end("hello");
  }
  next();
};
```

The `handler` runs before serving static files, so you should make sure to call `next()` as a fallback. You can also use express-compatible middlewares in the handler.

To start developing, run the command `vite` as usual.

To create a production build, run the command `vite build` as usual.

Now `vite build` will create a server build to `./build` folder alongside your regular client build which is the `./dist` folder by default. To run the production build as a Node.js server, run `node build/server.mjs` or if you have `"type": "module"` in your `package.json`, run `node build/server.js` instead.

### Middleware

`vite.config.ts`:

```ts
import { defineConfig } from "vite";
import { apiServer } from "vite-api-server";
import bodyParser from "body-parser";

export default defineConfig({
  plugins: [
    apiServer({
      handler: "./handler.ts",
      middleware: [bodyParser.json()],
    }),
  ],
});
```

The optional `middleware` argument can be used to include extra request transformation layers, like a body parser.

### Request flow

<img src="https://user-images.githubusercontent.com/8784712/116026214-d424af80-a684-11eb-9126-b188d7976be2.png" width="300" alt="request flow">

## Adapters

### Node.js

By default the server is built for Node.js target, you can run `node build/server.mjs` or `node build/server.js` after `vite build` to start the production server.

By default the server runs at port `3000`, you can switch to a custom port by using the `PORT` environment variable.

### Vercel

> **Warning**
>
> This may not work with some packages in a monorepo when using pnpm.

To build for [Vercel](https://vercel.com), use the `vercelAdapter` in `vite.config.ts`:

```ts
import { defineConfig } from "vite";
import { apiServer, vercelAdapter } from "vite-api-server";

export default defineConfig({
  plugins: [
    apiServer({
      handler: "./handler.ts",
      adapter: vercelAdapter(),
    }),
  ],
});
```

Then you can run `vite build` to build for Vercel.

## Guide

### Using Express

```ts
import express from "express";

const app = express();

export const handler = app;
```

### Using Polka

```ts
import polka from "polka";

export const handler = (req, res, next) => {
  const app = polka({
    onNoMatch: () => next(),
  });

  return app.handler(req, res);
};
```

### Using Apollo GraphQL

```ts
import { ApolloServer } from "apollo-server-micro";
import { typeDefs } from "./schemas";
import { resolvers } from "./resolvers";

const apolloServer = new ApolloServer({ typeDefs, resolvers });

const GRAPHQL_ENDPOINT = "/api/graphql";

const apolloHandler = apolloServer.createHandler({ path: GRAPHQL_ENDPOINT });

export const handler = (req, res, next) => {
  if (req.path === "/api/graphql") {
    return apolloHandler;
  }
  next();
};
```

You can also use `express` + `apollo-server-express` if you want.

## License

MIT &copy; [EGOIST](https://github.com/sponsors/egoist)

---
_Source: https://npm.io/package/vite-api-server · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._