Deploy Hydrogen Vite to Vercel?

[james0r]

Anyone having any luck with this?

I'm getting

Error: ENOENT: no such file or directory, stat '/vercel/path0/build'

[YokiToki]

@james0r Hi, is there any updates? I tried to change the preset in my vite.config.ts.

...
import {vercelPreset} from '@vercel/remix/vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
    hydrogen(),
    oxygen(),
    remix({
      presets: [vercelPreset()],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  },
});

Now the deployment process completes without errors, but vercel does not detect functions and the application crashes.

[tomferez]

Did you guys have any luck with Hydrogen Vite and Vercel?

I somehow got past the Error: ENOENT: no such file or directory, stat '/vercel/path0/build' error.

But now have:

NB: I am using it in a monorepo.

[justinmetros]

I am stuck exactly here. Having both problems above, first the '/vercel/path0/build' error now unsupported modules. If I can resolve will share solution here. But curious as this was 2 weeks ago if you found some solution?

[Nichtkunst]

Any updates on this?

[justinmetros]

Not from me, still actively working on this. Have not yet found a good combination of settings.

[Nichtkunst]

The vercelPreset() doesn't work.

[justinmetros]

It seems Vercel has added this line to their docs:

[Nichtkunst]

Wow. That's not good.

[justinmetros]

Nope. FWIW we have abandoned hope of deploying Remix Vite + Hydrogen to Vercel. Seems impossible without new information or collaboration from Vercel. Also, reverting a project back to the old remix.config feels inappropriate, especially with React router V7 just released, as an upgrade path would be blocked by that.

[tomferez]

Same here, we dropped the idea.

[Nichtkunst]

React Router 7 can now be deployed to vercel. Does this change any of the issues here?

[Nichtkunst]

Finally it's happening.

[StefanAvra]

Since v3_routeConfig was added, any hints on how to deploy to Vercel? The self-hosting docs are not updated yet.

[Nichtkunst]

@wizardlyhel are there any updates?

[gbalint]

@Nichtkunst Yes, hydrogen is ported to RR7, see https://hydrogen.shopify.dev/update/may-2025

[Nichtkunst]

but it still needs hydrogen for the built step? @gbalint

[Nichtkunst]

@gbalint @wizardlyhel
Do you plan to share a template/starter which works on vercel?

I tried the official vercelPreset

import {vercelPreset} from '@vercel/react-router/vite';
import type {Config} from '@react-router/dev/config';

export default {
  appDirectory: 'app',
  buildDirectory: 'dist',
  ssr: true,
  presets: [vercelPreset()],
} satisfies Config;

but then I can't successfully build locally anymore with

"scripts": {
    "build": "shopify hydrogen build --codegen",
    ...
  },

yet a build with "npx react-router build" works locally and on vercel successfully
but then the app doesn't work of course

this is the main blocker for us now, because the transition from remix(classic compiler) -> remix(vite) -> rr7 works within 2 days.

[wahoho]

Any update on this or even just a hint? I still can't deploy my hydrogen2 to Vercel after days of trying

[Nichtkunst]

hydrogenPreset() will not work with triangle – vercel cause it relies on shopify hydrogen build --codegen
will there be a cookbook example in the near future. end of this year, never?
will shopify opt out of cause of oxygen?
is this heard?

"build": "shopify hydrogen build --codegen", // will not work on vercel

[juanpprieto]

We don't have plans for a vercel recipe as of now, but are more than willing to review PRs for them even if they include changes to our cli/hydrogen. Hydrogen is now much closer to standard React Router so the changes should be less than in previous Remix versions.

[thomasKn]

Hey everyone! I've been working on a solution for deploying Hydrogen to Vercel and wanted to share it with the community.

PR: frontvibe/fluid#580

What it does

I created a custom hydrogen-vercel Vite plugin that:

1. Builds for Vercel's serverless platform - Generates the Build Output API v3 structure in .vercel/output/
2. Adapts the server entry - Uses @mjackson/node-fetch-server to convert Node.js IncomingMessage to Web Request
3. Replaces the caches API - Implements an Upstash Redis cache since Vercel doesn't have Oxygen's built-in cache
4. Supports streaming - Works with Vercel Fluid Compute for response streaming

Key files

• lib/hydrogen-vercel/vite-plugin.ts - The Vite plugin
• lib/hydrogen-vercel/node-adapter.ts - Node.js HTTP adapter
• app/lib/redis-cache.ts - Upstash Redis cache implementing Web Cache API
• server.ts - Adapted to handle both Oxygen and Vercel environments

Dependencies

• @mjackson/node-fetch-server
• @upstash/redis
• @vercel/functions

How to use

1. Copy the lib/hydrogen-vercel/ directory to your project
2. Add the dependencies
3. Import and add vercel() to your Vite config
4. Create a vercel.json with build output config
5. Deploy to Vercel

Hope this helps others who've been stuck on this! Happy to answer questions or accept feedback.