@netlify/dev 4.1.3 → 4.2.0

package/README.md

@@ -8,7 +8,7 @@ users, it is primarily designed as a foundational library for higher-level tools
 [Netlify Vite Plugin](https://docs.netlify.com/integrations/vite/overview/).
 
 It provides a local request pipeline that mimics the Netlify platform’s request handling, including support for
-Functions, Blobs, Static files, and Redirects.
+Functions, Blobs, Static files, Redirects, and Image CDN.
 
 ## 🚧 Feature Support
 
@@ -21,7 +21,7 @@ Functions, Blobs, Static files, and Redirects.
 | Redirects and Rewrites | ✅ Yes    |
 | Headers                | ✅ Yes    |
 | Environment Variables  | ✅ Yes    |
-| Image CDN              | ❌ No     |
+| Image CDN              | ✅ Yes    |
 
 > Note: Missing features will be added incrementally. This module is **not** intended to be a full replacement for the
 > Netlify CLI.

package/dist/main.cjs

@@ -41,6 +41,7 @@ var import_dev_utils = require("@netlify/dev-utils");
 var import_dev = require("@netlify/edge-functions/dev");
 var import_dev2 = require("@netlify/functions/dev");
 var import_headers = require("@netlify/headers");
+var import_images = require("@netlify/images");
 var import_redirects = require("@netlify/redirects");
 var import_static = require("@netlify/static");
 
@@ -314,6 +315,7 @@ var NetlifyDev = class {
   #config;
   #features;
   #headersHandler;
+  #imageHandler;
   #logger;
   #projectRoot;
   #redirectsHandler;
@@ -336,6 +338,7 @@ var NetlifyDev = class {
       environmentVariables: options.environmentVariables?.enabled !== false,
       functions: options.functions?.enabled !== false,
       headers: options.headers?.enabled !== false,
+      images: options.images?.enabled !== false,
       redirects: options.redirects?.enabled !== false,
       static: options.staticFiles?.enabled !== false
     };
@@ -366,6 +369,11 @@ var NetlifyDev = class {
         type: "edge-function"
       };
     }
+    const imageMatch = this.#imageHandler?.match(readRequest);
+    if (imageMatch) {
+      const response = await imageMatch.handle();
+      return { response, type: "image" };
+    }
     const functionMatch = await this.#functionsHandler?.match(readRequest, destPath);
     if (functionMatch) {
       if (functionMatch.preferStatic) {
@@ -380,7 +388,13 @@ var NetlifyDev = class {
     }
     const redirectMatch = await this.#redirectsHandler?.match(readRequest);
     if (redirectMatch) {
-      const functionMatch2 = await this.#functionsHandler?.match(new Request(redirectMatch.target), destPath);
+      const redirectRequest = new Request(redirectMatch.target);
+      const imageMatch2 = this.#imageHandler?.match(redirectRequest);
+      if (imageMatch2) {
+        const response2 = await imageMatch2.handle();
+        return { response: response2, type: "image" };
+      }
+      const functionMatch2 = await this.#functionsHandler?.match(redirectRequest, destPath);
       if (functionMatch2 && !functionMatch2.preferStatic) {
         return {
           response: await functionMatch2.handle(getWriteRequest()),
@@ -406,13 +420,6 @@ var NetlifyDev = class {
         return { response, type: "redirect" };
       }
     }
-    const { pathname } = new URL(readRequest.url);
-    if (pathname.startsWith("/.netlify/images")) {
-      this.#logger.error(
-        `The Netlify Image CDN is currently only supported in the Netlify CLI. Run ${(0, import_dev_utils.netlifyCommand)("npx netlify dev")} to get started.`
-      );
-      return;
-    }
     const staticMatch = await this.#staticHandler?.match(readRequest);
     if (staticMatch) {
       const response = await staticMatch.handle();
@@ -506,7 +513,7 @@ var NetlifyDev = class {
     let serverAddress;
     if (typeof this.#server === "string") {
       serverAddress = this.#server;
-    } else if (this.#features.edgeFunctions) {
+    } else if (this.#features.edgeFunctions || this.#features.images) {
       const passthroughServer = new import_dev_utils.HTTPServer(async (req) => {
         const res = await this.handle(req);
         return res ?? new Response(null, { status: 404 });
@@ -586,6 +593,13 @@ var NetlifyDev = class {
         ]
       });
     }
+    if (this.#features.images) {
+      this.#imageHandler = new import_images.ImageHandler({
+        imagesConfig: this.#config?.config.images,
+        logger: this.#logger,
+        originServerAddress: serverAddress
+      });
+    }
     return {
       serverAddress
     };

package/dist/main.d.cts

@@ -43,6 +43,14 @@ interface Features {
     headers?: {
         enabled?: boolean;
     };
+    /**
+     * Configuration options for Netlify Image CDN.
+     *
+     * {@link} https://docs.netlify.com/image-cdn/overview/
+     */
+    images?: {
+        enabled?: boolean;
+    };
     /**
      * Configuration options for Netlify redirects and rewrites.
      *
@@ -83,7 +91,7 @@ interface HandleOptions {
      */
     headersCollector?: HeadersCollector;
 }
-type ResponseType = 'edge-function' | 'function' | 'redirect' | 'static';
+type ResponseType = 'edge-function' | 'function' | 'image' | 'redirect' | 'static';
 declare class NetlifyDev {
     #private;
     constructor(options: NetlifyDevOptions);

package/dist/main.d.ts

@@ -43,6 +43,14 @@ interface Features {
     headers?: {
         enabled?: boolean;
     };
+    /**
+     * Configuration options for Netlify Image CDN.
+     *
+     * {@link} https://docs.netlify.com/image-cdn/overview/
+     */
+    images?: {
+        enabled?: boolean;
+    };
     /**
      * Configuration options for Netlify redirects and rewrites.
      *
@@ -83,7 +91,7 @@ interface HandleOptions {
      */
     headersCollector?: HeadersCollector;
 }
-type ResponseType = 'edge-function' | 'function' | 'redirect' | 'static';
+type ResponseType = 'edge-function' | 'function' | 'image' | 'redirect' | 'static';
 declare class NetlifyDev {
     #private;
     constructor(options: NetlifyDevOptions);

package/dist/main.js

@@ -3,17 +3,11 @@ import { promises as fs2 } from "fs";
 import path2 from "path";
 import process2 from "process";
 import { resolveConfig } from "@netlify/config";
-import {
-  ensureNetlifyIgnore,
-  getAPIToken,
-  mockLocation,
-  LocalState,
-  HTTPServer,
-  netlifyCommand
-} from "@netlify/dev-utils";
+import { ensureNetlifyIgnore, getAPIToken, mockLocation, LocalState, HTTPServer } from "@netlify/dev-utils";
 import { EdgeFunctionsHandler } from "@netlify/edge-functions/dev";
 import { FunctionsHandler } from "@netlify/functions/dev";
 import { HeadersHandler } from "@netlify/headers";
+import { ImageHandler } from "@netlify/images";
 import { RedirectsHandler } from "@netlify/redirects";
 import { StaticHandler } from "@netlify/static";
 
@@ -287,6 +281,7 @@ var NetlifyDev = class {
   #config;
   #features;
   #headersHandler;
+  #imageHandler;
   #logger;
   #projectRoot;
   #redirectsHandler;
@@ -309,6 +304,7 @@ var NetlifyDev = class {
       environmentVariables: options.environmentVariables?.enabled !== false,
       functions: options.functions?.enabled !== false,
       headers: options.headers?.enabled !== false,
+      images: options.images?.enabled !== false,
       redirects: options.redirects?.enabled !== false,
       static: options.staticFiles?.enabled !== false
     };
@@ -339,6 +335,11 @@ var NetlifyDev = class {
         type: "edge-function"
       };
     }
+    const imageMatch = this.#imageHandler?.match(readRequest);
+    if (imageMatch) {
+      const response = await imageMatch.handle();
+      return { response, type: "image" };
+    }
     const functionMatch = await this.#functionsHandler?.match(readRequest, destPath);
     if (functionMatch) {
       if (functionMatch.preferStatic) {
@@ -353,7 +354,13 @@ var NetlifyDev = class {
     }
     const redirectMatch = await this.#redirectsHandler?.match(readRequest);
     if (redirectMatch) {
-      const functionMatch2 = await this.#functionsHandler?.match(new Request(redirectMatch.target), destPath);
+      const redirectRequest = new Request(redirectMatch.target);
+      const imageMatch2 = this.#imageHandler?.match(redirectRequest);
+      if (imageMatch2) {
+        const response2 = await imageMatch2.handle();
+        return { response: response2, type: "image" };
+      }
+      const functionMatch2 = await this.#functionsHandler?.match(redirectRequest, destPath);
       if (functionMatch2 && !functionMatch2.preferStatic) {
         return {
           response: await functionMatch2.handle(getWriteRequest()),
@@ -379,13 +386,6 @@ var NetlifyDev = class {
         return { response, type: "redirect" };
       }
     }
-    const { pathname } = new URL(readRequest.url);
-    if (pathname.startsWith("/.netlify/images")) {
-      this.#logger.error(
-        `The Netlify Image CDN is currently only supported in the Netlify CLI. Run ${netlifyCommand("npx netlify dev")} to get started.`
-      );
-      return;
-    }
     const staticMatch = await this.#staticHandler?.match(readRequest);
     if (staticMatch) {
       const response = await staticMatch.handle();
@@ -479,7 +479,7 @@ var NetlifyDev = class {
     let serverAddress;
     if (typeof this.#server === "string") {
       serverAddress = this.#server;
-    } else if (this.#features.edgeFunctions) {
+    } else if (this.#features.edgeFunctions || this.#features.images) {
       const passthroughServer = new HTTPServer(async (req) => {
         const res = await this.handle(req);
         return res ?? new Response(null, { status: 404 });
@@ -559,6 +559,13 @@ var NetlifyDev = class {
         ]
       });
     }
+    if (this.#features.images) {
+      this.#imageHandler = new ImageHandler({
+        imagesConfig: this.#config?.config.images,
+        logger: this.#logger,
+        originServerAddress: serverAddress
+      });
+    }
     return {
       serverAddress
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/dev",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "description": "Emulation of the Netlify environment for local development",
   "type": "module",
   "engines": {
@@ -52,15 +52,16 @@
     "vitest": "^3.0.0"
   },
   "dependencies": {
-    "@netlify/blobs": "9.1.5",
-    "@netlify/config": "^23.0.8",
-    "@netlify/dev-utils": "3.1.1",
-    "@netlify/edge-functions": "2.14.2",
-    "@netlify/functions": "4.1.2",
-    "@netlify/headers": "2.0.1",
-    "@netlify/redirects": "3.0.1",
-    "@netlify/runtime": "4.0.2",
-    "@netlify/static": "3.0.1",
+    "@netlify/blobs": "9.1.6",
+    "@netlify/config": "^23.0.10",
+    "@netlify/dev-utils": "3.2.0",
+    "@netlify/edge-functions": "2.14.4",
+    "@netlify/functions": "4.1.4",
+    "@netlify/headers": "2.0.2",
+    "@netlify/images": "1.0.0",
+    "@netlify/redirects": "3.0.2",
+    "@netlify/runtime": "4.0.3",
+    "@netlify/static": "3.0.2",
     "ulid": "^3.0.0"
   }
 }