fix: write other server build output files (#3817)

Co-authored-by: Kent C. Dodds <[email protected]>

.changeset/famous-schools-shop.md

@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/dev": patch
+---
+
+write other server build output files so that assets only imported in resource routes are written to disk

integration/helpers/create-fixture.ts

@@ -16,7 +16,7 @@ const TMP_DIR = path.join(process.cwd(), ".tmp", "integration");
 interface FixtureInit {
   buildStdio?: Writable;
   sourcemap?: boolean;
-  files?: { [filename: string]: string };
+  files?: { [filename: string]: string | Buffer };
   template?: "cf-template" | "deno-template" | "node-template";
   setup?: "node" | "cloudflare";
 }
@@ -205,7 +205,12 @@ async function writeTestFiles(init: FixtureInit, dir: string) {
     Object.keys(init.files ?? {}).map(async (filename) => {
       let filePath = path.join(dir, filename);
       await fse.ensureDir(path.dirname(filePath));
-      await fse.writeFile(filePath, stripIndent(init.files![filename]));
+      let file = init.files![filename];
+      if (typeof file === "string") {
+        await fse.writeFile(filePath, stripIndent(file));
+      } else {
+        await fse.writeFile(filePath, file);
+      }
     })
   );
 }

integration/resource-routes-test.ts

@@ -1,3 +1,5 @@
+import path from "node:path";
+import fse from "fs-extra";
 import { test, expect } from "@playwright/test";
 
 import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
@@ -7,6 +9,8 @@ import { PlaywrightFixture } from "./helpers/playwright-fixture";
 test.describe("loader in an app", () => {
   let appFixture: AppFixture;
 
+  let image = fse.readFileSync(path.join(__dirname, "./assets/image.png"));
+
   test.beforeAll(async () => {
     appFixture = await createAppFixture(
       await createFixture({
@@ -47,6 +51,20 @@ test.describe("loader in an app", () => {
             import { json } from "@remix-run/node";
             export let loader = () => json({hello: "world"});
           `,
+          "app/assets/image.png": image,
+          "app/routes/image[.]png.jsx": js`
+            import fs from "node:fs";
+            import path from "node:path";
+            import image from "~/assets/image.png";
+
+            export let loader = () => {
+              return new Response(fs.readFileSync(path.join(__dirname, "..", image)), {
+                headers: {
+                  "Content-Type": "image/png",
+                },
+              });
+            };
+          `,
         },
       })
     );
@@ -85,5 +103,11 @@ test.describe("loader in an app", () => {
       await app.goto("/data.json");
       expect(await page.content()).toContain('{"hello":"world"}');
     });
+
+    test("should include imported asset in build", async ({ page }) => {
+      let app = new PlaywrightFixture(appFixture, page);
+      let res = await app.goto("/image.png");
+      expect(res.status()).toBe(200);
+    });
   }
 });

packages/remix-dev/compiler.ts

@@ -520,6 +520,9 @@ async function writeServerBuildResult(
       let contents = Buffer.from(file.contents).toString("utf-8");
       contents = contents.replace(/"route:/gm, '"');
       await fse.writeFile(file.path, contents);
+    } else {
+      await fse.ensureDir(path.dirname(file.path));
+      await fse.writeFile(file.path, file.contents);
     }
   }
 }