New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vite-express
Advanced tools
vite-express - npm Package Compare versions
Comparing version 0.1.0 to 0.1.1
| { | ||
| "name": "vite-express", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "main": "dist/main.js", | ||
| "types": "dist/main.d.ts", | ||
| "author": "szymmis", | ||
| "repository": "https://github.com/szymmis/vite-express", | ||
| "description": "Vite integration module for Express", | ||
| "license": "MIT", | ||
@@ -10,3 +13,4 @@ "scripts": { | ||
| "dev": "yarn build --watch", | ||
| "playground": "cd playground && nodemon index.ts --watch index.ts --watch ../dist" | ||
| "playground": "cd playground && nodemon index.ts --watch index.ts --watch ../dist", | ||
| "format": "rome format lib --write" | ||
| }, | ||
@@ -13,0 +17,0 @@ "dependencies": { |
@@ -8,2 +8,8 @@ # ⚡ Vite + Express | ||
| - [💬 Introduction](#-introduction) | ||
| - [📦🔧 Installation \& usage](#-installation--usage) | ||
| - [🤔 How does it work?](#-how-does-it-work) | ||
| - [📝 Documentation](#-documentation) | ||
| - [🏦 License](#-license) | ||
| ## 💬 Introduction | ||
@@ -33,27 +39,2 @@ | ||
| ## 🤔 How does it work? | ||
| The way it works is very simple, thanks to [**Vite's** wonderfully simple API](https://vitejs.dev/guide/api-javascript.html). | ||
| - First we need you register middlewares which will make our server act like a proxy that will forward our static files related traffic to **Vite dev server** | ||
| - We also need to register a get route handler that will catch all un-handled routes from your app. We do this to make client-side routing possible. The way it works inside **vite-express** is that there is a `get("/*")` route. That is why `ViteExpress.listen()` needs to be called after your last `get` route. Otherwise it will be handled by **vite-express** and not your API. | ||
| - Lastly we start up **Vite dev server** that listens on port **5173** and for now ⚠️ this can't be changed ⚠️ due to the way internals works. It will be hopefully resolved soon. | ||
| - All the necesary configuration is taken from **Vite** config file, so you don't need to worry about additional configs. | ||
| The fact that you need to start-up `vite-express` so late in your app might cause trouble when you have some kind of *auth* middleware. Because the *static files* middleware is registered when you invoke `ViteExpress.listen()`, it could be blocked by auth. That's why there is a `ViteExpress.static()` method exposed that let's you manually register a middleware to serve the *static files*. | ||
| ***Example*** | ||
| ```javascript | ||
| const express = require("express"); | ||
| const ViteExpress = require("vite-express"); | ||
| const app = express(); | ||
| ViteExpress.static(app); | ||
| app.use(authMiddleware()); | ||
| app.get("/message", (_, res) => res.send("Hello from express!")); | ||
| ViteExpress.listen(app, 3000, () => console.log("Server is listening...")); | ||
| ``` | ||
| That way static files requests shouldn't be blocked by your auth middleware. | ||
| ## 📦🔧 Installation & usage | ||
@@ -63,12 +44,12 @@ | ||
| - Start by creating **Vite** project | ||
| 1. Start by creating **Vite** project | ||
| ```bash | ||
| $ yarn create vite | ||
| ``` | ||
| - Follow the prompts to configure your project using your favourite framework. | ||
| - Install `express` and `vite-express` packages | ||
| 2. Follow the prompts to configure your project using your favourite framework. | ||
| 3. Install `express` and `vite-express` packages | ||
| ```bash | ||
| $ yarn add express vite-express | ||
| ``` | ||
| - Create a server script inside project root directory | ||
| 4. Create a server script inside project root directory | ||
| ```javascript | ||
@@ -86,10 +67,36 @@ //e.g server.js | ||
| ⚠️ For some frameworks like **React**, **Vite** sets the `package.json` `type` field to `module` so you need to use ESModules `import` syntax despite writing a node script. If that's a problem you can freely change the `type` back to `commonjs` as Vite uses `ESModules` for front-end either way! | ||
| - Run the express script | ||
| 5. Run the express script | ||
| ```bash | ||
| $ node server.js | ||
| ``` | ||
| - Open your browser at `http://localhost:3000` | ||
| - Change the client code and see the beauty of [HMR](https://vitejs.dev/guide/features.html#hot-module-replacement) in action! | ||
| - Congrats, you've just created your first `vite-express` app! 🎉 | ||
| - Happy hacking! | ||
| 6. Open your browser at `http://localhost:3000` | ||
| 7. Change the client code and see the beauty of [HMR](https://vitejs.dev/guide/features.html#hot-module-replacement) in action! | ||
| Congrats, you've just created your first `vite-express` app! 🎉 Happy hacking! | ||
| ## 🤔 How does it work? | ||
| The way it works is very simple, thanks to [**Vite's** wonderfully simple API](https://vitejs.dev/guide/api-javascript.html). | ||
| - First we need you register middlewares which will make our server act like a proxy that will forward our static files related traffic to **Vite dev server** | ||
| - We also need to register a get route handler that will catch all un-handled routes from your app. We do this to make client-side routing possible. The way it works inside **vite-express** is that there is a `get("/*")` route. That is why `ViteExpress.listen()` needs to be called after your last `get` route. Otherwise it will be handled by **vite-express** and not your API. | ||
| - Lastly we start up **Vite dev server** that listens on port **5173** and for now ⚠️ this can't be changed ⚠️ due to the way internals works. It will be hopefully resolved soon. | ||
| - All the necesary configuration is taken from **Vite** config file, so you don't need to worry about additional configs. | ||
| The fact that you need to start-up `vite-express` so late in your app might cause trouble when you have some kind of *auth* middleware. Because the *static files* middleware is registered when you invoke `ViteExpress.listen()`, it could be blocked by auth. That's why there is a `ViteExpress.static()` method exposed that let's you manually register a middleware to serve the *static files*. | ||
| ***Example*** | ||
| ```javascript | ||
| const express = require("express"); | ||
| const ViteExpress = require("vite-express"); | ||
| const app = express(); | ||
| ViteExpress.static(app); | ||
| app.use(authMiddleware()); | ||
| app.get("/message", (_, res) => res.send("Hello from express!")); | ||
| ViteExpress.listen(app, 3000, () => console.log("Server is listening...")); | ||
| ``` | ||
| That way static files requests shouldn't be blocked by your auth middleware. | ||
| ## 📝 Documentation | ||
@@ -96,0 +103,0 @@ |
Fixed alerts
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.7%
9470
- Number of package files
- increased by16.67%
7
- Lines of code
- increased by33.33%
24
- Number of low maintenance alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by7.14%
105
No dependency changes