vite-express - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

dist/main.d.ts

@@ -10,5 +10,2 @@ /// <reference types="qs" />
     mode: "production" | "development";
-    vitePort: number;
-    viteServerSecure: boolean;
-    printViteDevServerHost: boolean;
 };
@@ -15,0 +12,0 @@ type ConfigurationOptions = Partial<Omit<typeof Config, "viteServerSecure">>;

dist/main.js

@@ -5,3 +5,2 @@ 'use strict';
 var fs = require('fs');
-var fetch = require('node-fetch');
 var path = require('path');
@@ -39,10 +38,3 @@ var pc = require('picocolors');
     mode: (NODE_ENV === "production" ? "production" : "development"),
-    vitePort: 5173,
-    viteServerSecure: false,
-    printViteDevServerHost: false,
 };
-function getViteHost() {
-    const protocol = `${Config.viteServerSecure ? "https" : "http"}`;
-    return `${protocol}://localhost:${Config.vitePort}`;
-}
 function info(msg) {
@@ -55,37 +47,18 @@ const timestamp = new Date().toLocaleString("en-US").split(",")[1].trim();
 }
-const stubMiddleware = (req, res, next) => next();
 function serveStatic() {
     return __awaiter(this, void 0, void 0, function* () {
-        info(`Running in ${pc.yellow(Config.mode)} mode`);
-        if (Config.mode === "production") {
-            const config = yield Vite.resolveConfig({}, "build");
-            const distPath = path.resolve(config.root, config.build.outDir);
-            if (!fs.existsSync(distPath)) {
-                info(`${pc.yellow(`Static files at ${pc.gray(distPath)} not found!`)}`);
-                yield build();
-            }
-            info(`${pc.green(`Serving static files from ${pc.gray(distPath)}`)}`);
-            return express.static(distPath, { index: false });
+        const config = yield Vite.resolveConfig({}, "build");
+        const distPath = path.resolve(config.root, config.build.outDir);
+        if (!fs.existsSync(distPath)) {
+            info(`${pc.yellow(`Static files at ${pc.gray(distPath)} not found!`)}`);
+            yield build();
         }
-        return (req, res, next) => {
-            if (isStaticFilePath(req.path)) {
-                fetch(new URL(req.url, getViteHost())).then((viteResponse) => __awaiter(this, void 0, void 0, function* () {
-                    if (!viteResponse.ok)
-                        return next();
-                    viteResponse.headers.forEach((value, name) => res.set(name, value));
-                    if (req.path.match(/@vite\/client/)) {
-                        const text = yield viteResponse.text();
-                        return res.send(text.replace(/hmrPort = null/, `hmrPort = ${Config.vitePort}`));
-                    }
-                    viteResponse.body.pipe(res);
-                }));
-            }
-            else
-                next();
-        };
+        info(`${pc.green(`Serving static files from ${pc.gray(distPath)}`)}`);
+        return express.static(distPath, { index: false });
     });
 }
-function injectStaticMiddleware(app) {
+const stubMiddleware = (req, res, next) => next();
+function injectStaticMiddleware(app, middleware) {
     return __awaiter(this, void 0, void 0, function* () {
-        app.use(yield serveStatic());
+        app.use(middleware);
         const stubMiddlewareLayer = app._router.stack.find((layer) => layer.handle === stubMiddleware);
@@ -100,37 +73,32 @@ if (stubMiddlewareLayer !== undefined) {
 }
-function startDevServer() {
+function injectViteIndexMiddleware(app, server) {
     return __awaiter(this, void 0, void 0, function* () {
-        const server = yield Vite.createServer({
-            clearScreen: false,
-            server: { port: Config.vitePort },
+        const config = yield Vite.resolveConfig({}, "build");
+        const template = fs.readFileSync(path.resolve(config.root, "index.html"), "utf8");
+        app.get("/*", (req, res, next) => __awaiter(this, void 0, void 0, function* () {
+            if (isStaticFilePath(req.path))
+                next();
+            else
+                res.send(yield server.transformIndexHtml(req.originalUrl, template));
+        }));
+    });
+}
+function injectIndexMiddleware(app) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const config = yield Vite.resolveConfig({}, "build");
+        const distPath = path.resolve(config.root, config.build.outDir);
+        app.use("*", (_, res) => {
+            res.sendFile(path.resolve(distPath, "index.html"));
         });
-        yield server.listen();
-        const vitePort = server.config.server.port;
-        if (vitePort && vitePort !== Config.vitePort)
-            Config.vitePort = vitePort;
-        Config.viteServerSecure = Boolean(server.config.server.https);
-        if (Config.printViteDevServerHost)
-            info(`Vite is listening ${pc.gray(getViteHost())}`);
-        return server;
     });
 }
-function serveHTML(app) {
+function startServer(server) {
     return __awaiter(this, void 0, void 0, function* () {
-        if (Config.mode === "production") {
-            const config = yield Vite.resolveConfig({}, "build");
-            const distPath = path.resolve(config.root, config.build.outDir);
-            app.use("*", (_, res) => {
-                res.sendFile(path.resolve(distPath, "index.html"));
-            });
-        }
-        else {
-            app.get("/*", (req, res, next) => __awaiter(this, void 0, void 0, function* () {
-                if (isStaticFilePath(req.path))
-                    return next();
-                fetch(new URL(req.path, getViteHost())).then((viteResponse) => {
-                    viteResponse.headers.forEach((value, name) => res.set(name, value));
-                    viteResponse.body.pipe(res);
-                });
-            }));
-        }
+        const vite = yield Vite.createServer({
+            clearScreen: false,
+            appType: "custom",
+            server: { middlewareMode: true },
+        });
+        server.on("close", () => vite.close());
+        return vite;
     });
@@ -141,15 +109,15 @@ }
         Config.mode = config.mode;
-    if (config.vitePort !== undefined)
-        Config.vitePort = config.vitePort;
-    if (config.printViteDevServerHost !== undefined)
-        Config.printViteDevServerHost = config.printViteDevServerHost;
 }
 function bind(app, server, callback) {
     return __awaiter(this, void 0, void 0, function* () {
+        info(`Running in ${pc.yellow(Config.mode)} mode`);
         if (Config.mode === "development") {
-            const devServer = yield startDevServer();
-            server.on("close", () => devServer === null || devServer === void 0 ? void 0 : devServer.close());
+            const vite = yield startServer(server);
+            yield injectStaticMiddleware(app, vite.middlewares);
+            yield injectViteIndexMiddleware(app, vite);
         }
-        yield injectStaticMiddleware(app);
-        yield serveHTML(app);
+        else {
+            yield injectStaticMiddleware(app, yield serveStatic());
+            yield injectIndexMiddleware(app);
+        }
         callback === null || callback === void 0 ? void 0 : callback();
@@ -156,0 +124,0 @@ });

package.json

 {
   "name": "vite-express",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "main": "dist/main.js",
@@ -5,0 +5,0 @@ "types": "dist/main.d.ts",

README.md

@@ -47,4 +47,3 @@ # ⚡ Vite + Express
 
-- spinning up **Vite's Dev Server**
-- injecting necessary middlewares to **static files** from your API
+- injecting necessary middleware to serve **static files** from your express server
 - managing unhandled routes to make **client-side routing** possible
@@ -126,3 +125,3 @@
 
-By default vite-express runs in **development** mode, when server acts as a simple proxy between client and Vite's Dev Server utilizing the power of HMR and native browser modules. This is not suitable for production as described [here](https://vitejs.dev/guide/why.html#why-bundle-for-production), so in production we want to serve static files that Vite spits out during it's build process. That's why you need to invoke [`vite build`](https://vitejs.dev/guide/cli.html#build) command first. Then you need to run your app in production mode.
+By default vite-express runs in **development** mode, when server uses Vite's Dev Server in middleware mode (which means that no separate Vite process is running) utilizing the power of HMR and native browser modules. This is not suitable for production as described [here](https://vitejs.dev/guide/why.html#why-bundle-for-production), so in production we want to serve static files that Vite spits out during it's build process. That's why you need to invoke [`vite build`](https://vitejs.dev/guide/cli.html#build) command first. Then you need to run your app in production mode.
 
@@ -161,6 +160,4 @@ You have these options to achieve that
 
-- Lastly **Vite Dev Server** is started up, listening on port **5173** or the one that you pass into configuration.
+Because `ViteExpress.listen` is an async function, in most cases it doesn't matter when you invoke it, but it is generally the best to do it at the end of file to avoid `get("*")` handler overriding your routes.
 
-Because `ViteExpress.listen` is an async function, in most cases it doesn't matter when you invoke it, but it is generally the best to do it at the end of file to avoid `get("*")` handler overriting your routes.
-
 ## 📝 Documentation
@@ -188,7 +185,5 @@
 
-| name                   | description                                                                                                                            | default       | valid values                |
-| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------- |
-| mode                   | When set to development Vite Dev Server will be utilized, in production app will serve static files built with `vite build` command    | `development` | `development`, `production` |
-| vitePort               | Port that Vite Dev Server will be listening on                                                                                         | `5173`        | any number                  |
-| printViteDevServerHost | When set to true, Vite's dev server host (e.g. `http://localhost:5173`) will be printed to console. Should be used only for debug info | `false`       | boolean                     |
+| name | description                                                                                                                         | default       | valid values                |
+| ---- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------- |
+| mode | When set to development Vite Dev Server will be utilized, in production app will serve static files built with `vite build` command | `development` | `development`, `production` |
 
@@ -195,0 +190,0 @@ ### `listen(app, port, callback?) => http.Server`

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

21316

decreased by-9.27%

Lines of code

150

decreased by-18.92%

Number of lines in readme file

250

decreased by-1.96%

No dependency changes