Gathering detailed insights and metrics for vite-plugin-api-routes
vite-plugin-api
A Vite.js plugin that creates API routes by mapping the directory structure, similar to Next.js API Routes. This plugin enhances the functionality for backend development using Vite.
vite-plugin-build-routes
A Vite plugin to simplify the build of API routes: copy all files from a _target_ directory to a _build_ output directory.
Create API routes from path directory like to Nextjs
npm install vite-plugin-api-routesTypescript
Module System
Node Version
NPM Version
59.7
Supply Chain
88.4
Quality
87.7
Maintenance
100
Vulnerability
98.6
License
TypeScript (62.51%)
JavaScript (35.83%)
HTML (1.66%)
Total Downloads
4,501
Last Day
6
Last Week
93
Last Month
438
Last Year
3,873
38 Stars
103 Commits
4 Forks
2 Watching
7 Branches
5 Contributors
Minified
Minified + Gzipped
Latest Version
1.2.0-beta
Package Id
vite-plugin-api-routes@1.2.0-beta
Unpacked Size
52.05 kB
Size
11.23 kB
File Count
16
NPM Version
10.8.2
Node Version
20.18.0
Publised On
08 Jan 2025
Cumulative downloads
Total Downloads
Last day
-71.4%
6
Compared to previous day
Last week
69.1%
93
Compared to previous week
Last month
50%
438
Compared to previous month
Last year
516.7%
3,873
Compared to previous year
1
7
🙏 Dear Community,
We sincerely apologize for the recent project name changes. After careful consideration and feedback, we've settled on the name vite-plugin-api-routes. We understand that these changes might have caused confusion, and we appreciate your understanding.
Thank you for your continued support and flexibility.
Best regards,
For more detailed information and resources related to vite-plugin-api-routes, please refer to the following:
Enhance API routing in ViteJS based on directory structure for improved visibility and project structure in Node.js and Express.
See the tutorial
1> tree src/api/ 2src/api/: 3├───admin 4│ ├───auth 5│ │ ├───login.js 6│ │ └───status.js 7│ └───user 8│ ├───index.js 9│ └───[userId] //Remix Format 10│ ├───index.js 11│ └───detail.js 12├───site 13│ ├───article 14│ │ ├───$articleId.js //NextJS Format 15│ │ └───new.js 16│ └───page 17│ ├───$pageId.js 18│ └───new.js 19└───index.js
The directory tree is exported as router rules tree:
1GET /api/site/ 2GET /api/routers 3USE /api/admin/user 4GET /api/admin/user 5GET /api/admin/user/ 6POST /api/admin/user/ 7GET /api/admin/auth/login 8POST /api/admin/auth/login 9GET /api/site/article/new 10GET /api/admin/auth/status 11POST /api/admin/auth/status 12GET /api/site/page/:pageId 13GET /api/admin/user/:userId/ 14PUT /api/admin/user/:userId/ 15DELETE /api/admin/user/:userId/ 16GET /api/site/article/:articleId 17GET /api/admin/user/:userId/detail
For example, the src/api/admin/user/$userId.js file exports allowed request methods:
1//file:src/api/admin/user/$userId.js 2export const DELETE = (req, res, next) => { 3 res.send("DELETE REQUEST"); 4}; 5export const PUT = async (req, res, next) => { 6 res.send("PUT REQUEST"); 7}; 8// Support default, GET, HEAD, POST, PUT, DELETE by default 9// For CONNECT, OPTIONS, TRACE, PATCH, and others, you need to add the mapping to the mapper attribute config 10 11// If you need middlewares for a route, simply export an array containing all middlewares as the default 12export default [authMiddleware, secondMiddleware /* ... */];
Similarly, the [userId].js or $userId.js file name is exported as a request parameter /user/:userId, following the Next.js/Remix framework.
1yarn add vite-plugin-api-routes
In order to have proper access to the plugin's alias definitions, you need to include /.api/env.d.ts in either src/vite-env.d.ts or in your tsconfig.json.
In your src/vite-env.d.ts, add the following line:
1/// <reference path="../.api/env.d.ts" />
In vite.config.ts:
1import { defineConfig } from "vite"; 2import { pluginAPIRoutes } from "vite-plugin-api-routes"; 3 4export default defineConfig({ 5 plugins: [ 6 pluginAPIRoutes({ 7 // moduleId: "@api", 8 // cacheDir: ".api", 9 // server: "[cacheDir]/server.js", 10 // handler: "[cacheDir]/handler.js", 11 // configure: "[cacheDir]/configure.js", 12 // routeBase: "api", 13 // dirs: [{ dir: "src/api"; route: "", exclude?: ["*.txt", ".csv", "data/*.*"] }], 14 // include: ["**/*.js", "**/*.ts"], 15 // exclude: ["node_modules", ".git"], 16 // mapper: { default: "use", GET: "get", ... }, 17 // disableBuild: false, 18 // clientOutDir = "dist/client", 19 // clientMinify = true, 20 // clientBuild = (config: InlineConfig) => config, 21 // serverOutDir = "dist", 22 // serverMinify = false, 23 // serverBuild = (config: InlineConfig) => config, 24 }), 25 ], 26});
Note: When building the project, the server entry will be built first, before the client is compiled.
Default Value
1mapper: { 2 //[Export Name]: [Http Verbose] 3 default: "use", 4 GET: "get", 5 POST: "post", 6 PUT: "put", 7 PATCH: "patch", 8 DELETE: "delete", 9 // Overwrite 10 ...mapper, 11};
/vite.config.js
1export default defineConfig({ 2 plugins: [ 3 pluginAPIRoutes({ 4 mapper: { 5 /** 6 * export const PING = ()=>{...} 7 * Will be mapped to express method 8 * app.get('/path/dir', PING) 9 */ 10 PING: "get", 11 /** 12 * export const OTHER_POST = ()=>{...} 13 * Will be mapped to possible method 14 * app.post2('/path/dir', OTHER_POST) 15 */ 16 OTHER_POST: "post2", 17 /** 18 * export const PATCH = ()=>{...} 19 * Will not be mapped 20 */ 21 PATCH: false, 22 }, 23 }), 24 ], 25});
You can disable a method by setting its value to false. In the example PATCH: false, the PATCH method is disabled.
/src/api/index.js
1export const PING = (req, res, next) => { 2 res.send({ name: "Ping Service" }); 3}; 4export const OTHER_POST = (req, res, next) => { 5 res.send({ name: "Other Service" }); 6}; 7export const PATCH = (req, res, next) => { 8 res.send({ name: "Path Service" }); 9};
/src/handler.js or see handler.js
1import express from "express"; 2import { applyRouters } from "@api/routers"; 3import * as configure from "@api/configure"; 4 5export const handler = express(); 6 7configure.handlerBefore?.(handler); 8 9applyRouters((props) => { 10 const { method, route, path, cb } = props; 11 if (handler[method]) { 12 if (Array.isArray(cb)) { 13 handler[method](route, ...cb); 14 } else { 15 handler[method](route, cb); 16 } 17 } else { 18 console.log("Not Support", method, "for", route, "in", handler); 19 } 20}); 21 22configure.handlerAfter?.(handler);
/src/server.ts or see server.ts
1import { handler } from "@api/handler"; 2import { endpoints } from "@api/routers"; 3import * as configure from "@api/configure"; 4import express from "express"; 5 6const server = express(); 7configure.serverBefore?.(server); 8const { PORT = 3000, PUBLIC_DIR = "import.meta.env.PUBLIC_DIR" } = process.env; 9server.use("import.meta.env.BASE", express.static(PUBLIC_DIR)); 10server.use("import.meta.env.BASE_API", handler); 11configure.serverAfter?.(server); 12server.on("error", (error) => { 13 console.error(`Error at http://localhost:${PORT}`, error); 14 configure.serverError?.(server, error); 15}); 16server.on("listening", () => { 17 console.log(`Ready at http://localhost:${PORT}`); 18 configure.serverListening?.(server, endpoints); 19}); 20server.listen(PORT);
/src/configure.ts or see configure.ts
1import express from "express"; 2import { 3 CallbackHook, 4 StatusHook, 5 ServerHook, 6 HandlerHook, 7 ViteServerHook, 8} from "vite-plugin-api-routes/configure"; 9// import { ApplyRouter, ApplyRouters } from "vite-plugin-api-routes/routes" 10// import { Callback, RouteInfo, RouteModule } from "vite-plugin-api-routes/handler" 11 12export const serverBefore: ServerHook = (server) => {}; 13export const serverAfter: ServerHook = (server) => {}; 14export const serverListening: StatusHook = (server, endpoints) => {}; 15export const serverError: StatusHook = (server, error) => {}; 16export const handlerBefore: HandlerHook = (handler) => {}; 17export const handlerAfter: HandlerHook = (handler) => {}; 18export const viteServerBefore: ViteServerHook = (server) => {}; 19export const viteServerAfter: ViteServerHook = (server) => {};
No vulnerabilities found.
No security vulnerabilities found.