vercelPreset for vite disables the ability to preview the production site on localhost

[nikolailehbrink]

When using the vercelPreset within the vite.config.ts, the build output path is altered. Instead of the usual

./build/server/index.js

, the output path becomes something like

build/server/nodejs-eyJydW50aW1lIjoibm9kZ*****/index.js

This makes it difficult to preview the site on localhost, as the build "start" script needs to be manually updated with the new identifier. Do I really have to call "start": "remix-serve ./build/server/nodejs-eyJydW50aW1lIjoibm9kZ*****/index.js", each time I want to serve it locally or is there something I can do to disable the altering of the output path on building it locally?

[AlexGodard]

Hey, I was facing this issue as well. My solution was to find the file with pattern matching and pass it to my remix-serve command in a bash script, like this:

#!/bin/sh

# Find the directory that matches the pattern
BUILD_DIR=$(find ./build/server -type d -name "nodejs-*")

# Check if the directory was found
if [ -d "$BUILD_DIR" ]; then
  # Construct the full path to the index.js file
  INDEX_FILE="$BUILD_DIR/index.js"

  # Start the server
  remix-serve "$INDEX_FILE"
else
  echo "Build directory not found!"
  exit 1
fi

In package.json:

"start": "./start-server.sh"

I'd be curious about a solution which doesn't require creating a new file!

[TooTallNate]

How about conditionally only add the preset when an env var is set, i.e. process.env.VERCEL?

[nikolailehbrink]

Thanks, @TooTallNate! I was initially considering checking if it was a local build or a preview using the isPreview flag, but since Remix doesn't utilize that, I couldn't figure out how to implement it. Your comment helped me find the solution, and it works perfectly. For anyone interested, here's the code:

export default defineConfig(() => {
  if (!process.env.VERCEL) {
    return {
      plugins: [remix(), tsconfigPaths()],
    };
  }

  return {
    plugins: [
      remix({
        presets: [vercelPreset()],
      }),
      tsconfigPaths(),
      sentryVitePlugin({
        org: "***",
        project: "***",
      }),
    ],
    build: {
      sourcemap: true,
    },
  };
});