From 9133202ba268f24e31a1db6acb68c724a4c11a7f Mon Sep 17 00:00:00 2001 From: Pedro Cattori Date: Thu, 4 May 2023 13:57:52 -0400 Subject: [PATCH] refactor(dev): revert serving assets from dev server When sending HMR updates, the assumption was that serving assets from dev server would allow those updates to be sent immediately, without waiting for the app server to restart. But this isn't the case (e.g. if you navigate to another page that has a loader and the app server is rebooting, that loader fetch will fail). --- .changeset/ninety-flies-allow.md | 7 ---- packages/remix-dev/cli/commands.ts | 8 ----- packages/remix-dev/cli/run.ts | 6 ---- packages/remix-dev/compiler/js/compiler.ts | 6 +--- .../remix-dev/devServer_unstable/index.ts | 36 ++----------------- 5 files changed, 3 insertions(+), 60 deletions(-) delete mode 100644 .changeset/ninety-flies-allow.md diff --git a/.changeset/ninety-flies-allow.md b/.changeset/ninety-flies-allow.md deleted file mode 100644 index c7787534a7c..00000000000 --- a/.changeset/ninety-flies-allow.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@remix-run/dev": patch ---- - -- Fix public asset serving for non-Remix assets in the new dev server -- Add `--public-directory` / `unstable_dev.publicDirectory` option for configuring local directory for serving non-Remix assets like fonts -- Fix `svg` serving for new dev server diff --git a/packages/remix-dev/cli/commands.ts b/packages/remix-dev/cli/commands.ts index ece1033fc71..252449b9b75 100644 --- a/packages/remix-dev/cli/commands.ts +++ b/packages/remix-dev/cli/commands.ts @@ -224,7 +224,6 @@ export async function dev( httpHost?: string; httpPort?: number; restart?: boolean; - publicDirectory?: string; websocketPort?: number; } = {} ) { @@ -516,7 +515,6 @@ let resolveDevBuild = async ( type DevServeFlags = DevBuildFlags & { command: string; - publicDirectory: string; restart: boolean; }; let resolveDevServe = async ( @@ -555,11 +553,6 @@ let resolveDevServe = async ( } } - let publicDirectory = - flags.publicDirectory ?? - (dev === true ? undefined : dev.publicDirectory) ?? - "public"; - let restart = flags.restart ?? (dev === true ? undefined : dev.restart) ?? true; @@ -568,7 +561,6 @@ let resolveDevServe = async ( httpScheme, httpHost, httpPort, - publicDirectory, websocketPort, restart, }; diff --git a/packages/remix-dev/cli/run.ts b/packages/remix-dev/cli/run.ts index ff5000c283d..c4448f122ca 100644 --- a/packages/remix-dev/cli/run.ts +++ b/packages/remix-dev/cli/run.ts @@ -48,7 +48,6 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow( --http-host HTTP(S) host for the dev server. Default: localhost --http-port HTTP(S) port for the dev server. Default: any open port --no-restart Do not restart the app server when rebuilds occur. - --public-directory Path to public assets directory relative to Remix project root. Default: public --websocket-port Websocket port for the dev server. Default: any open port \`init\` Options: --no-delete Skip deleting the \`remix.init\` script @@ -189,7 +188,6 @@ export async function run(argv: string[] = process.argv.slice(2)) { "--http-host": String, "--http-port": Number, "--no-restart": Boolean, - "--public-directory": String, "--websocket-port": Number, }, { @@ -227,10 +225,6 @@ export async function run(argv: string[] = process.argv.slice(2)) { flags.httpPort = flags["http-port"]; delete flags["http-port"]; } - if (flags["public-directory"]) { - flags.publicDirectory = flags["public-directory"]; - delete flags["public-directory"]; - } if (flags["websocket-port"]) { flags.websocketPort = flags["websocket-port"]; delete flags["websocket-port"]; diff --git a/packages/remix-dev/compiler/js/compiler.ts b/packages/remix-dev/compiler/js/compiler.ts index cf96fc0d4e9..e2bed448f27 100644 --- a/packages/remix-dev/compiler/js/compiler.ts +++ b/packages/remix-dev/compiler/js/compiler.ts @@ -202,11 +202,7 @@ const createEsbuildConfig = ( platform: "browser", format: "esm", external: getExternals(ctx.config), - loader: { - ...loaders, - // in development, use dataurls for svgs so that `` works across different origins - ".svg": ctx.options.mode === "development" ? "dataurl" : loaders[".svg"], - }, + loader: loaders, bundle: true, logLevel: "silent", splitting: true, diff --git a/packages/remix-dev/devServer_unstable/index.ts b/packages/remix-dev/devServer_unstable/index.ts index 7767b7e2504..05a427229ea 100644 --- a/packages/remix-dev/devServer_unstable/index.ts +++ b/packages/remix-dev/devServer_unstable/index.ts @@ -8,7 +8,7 @@ import express from "express"; import * as Channel from "../channel"; import { type Manifest } from "../manifest"; import * as Compiler from "../compiler"; -import { readConfig, type RemixConfig } from "../config"; +import { type RemixConfig } from "../config"; import { loadEnv } from "./env"; import * as Socket from "./socket"; import * as HMR from "./hmr"; @@ -23,19 +23,6 @@ type Origin = { let stringifyOrigin = (o: Origin) => `${o.scheme}://${o.host}:${o.port}`; -let patchPublicPath = ( - config: RemixConfig, - devHttpOrigin: Origin -): RemixConfig => { - // set public path to point to dev server - // so that browser asks the dev server for assets - return { - ...config, - // dev server has its own origin, to `/build/` path will not cause conflicts with app server routes - publicPath: stringifyOrigin(devHttpOrigin) + "/build/", - }; -}; - let detectBin = async (): Promise => { let pkgManager = detectPackageManager() ?? "npm"; if (pkgManager === "npm") { @@ -54,7 +41,6 @@ export let serve = async ( httpScheme: string; httpHost: string; httpPort: number; - publicDirectory: string; websocketPort: number; restart: boolean; } @@ -119,7 +105,7 @@ export let serve = async ( let dispose = await Compiler.watch( { - config: patchPublicPath(initialConfig, httpOrigin), + config: initialConfig, options: { mode: "development", sourcemap: true, @@ -129,10 +115,6 @@ export let serve = async ( }, }, { - reloadConfig: async (root) => { - let config = await readConfig(root); - return patchPublicPath(config, httpOrigin); - }, onBuildStart: (ctx) => { state.appReady?.err(); clean(ctx.config); @@ -191,20 +173,6 @@ export let serve = async ( ); let httpServer = express() - // statically serve built assets - .use((_, res, next) => { - res.header("Access-Control-Allow-Origin", "*"); - next(); - }) - .use( - "/build", - express.static(initialConfig.assetsBuildDirectory, { - immutable: true, - maxAge: "1y", - }) - ) - .use(express.static(options.publicDirectory, { maxAge: "1h" })) - // handle `broadcastDevReady` messages .use(express.json()) .post("/ping", (req, res) => {