Deploy Shopify Hydrogen to Vercel

[progrmoiz]

Can I deploy Shopify Hydrogen app to Vercel with default Vite config? I tried button getting a 404 error.

[frandiox]

Hydrogen apps can run on Vercel. There are some examples here:

• Using Vercel Edge/middlewares (Workers): https://github.com/frandiox/hydrogen-vercel-edge
• Using Vercel Serverless functions (Node.js): https://github.com/frandiox/hydrogen-vercel-serverless

[leerob]

Good news! Zero-configuration support for deploying Hydrogen on Vercel has just landed 🎉

[james-whittington1]

Also looking for how to get these variables working? I have added the variables directy to the code and everything works, but would love to take advantage of the different environments that vercel supports. Right now it is hugly confusing as Oxygen.env seems to work locally, but is lost on deploy. Trying to access via process.env doesn't work, and there are no examples to follow to see how to get it working. The fact that vercels own "zero config" example hard codes the variables makes me think this might no be supported yet?

[Moelafi]

Hey @ryanleichty @james-whittington1 i was in your struggle few weeks ago and know the pain!

Here is what worked for me in the end:

In development: use the oxygen object as you do now.

In prod:
Add env vars as you normally do in vercel.
But to access them in the hydrogen.config file you must do it like this:
Assume you have an env var PUBLIC_STOREFRONT_API_TOKEN, you access it with : process?.env['PUBLIC_STOREFRONT_API_TOKEN']

And not:

process?.env.PUBLIC_STOREFRONT_API_TOKEN

Its so weird i know but this is the only way it works.

For the token, my hydrogen config looks like this:

storefrontToken:
process?.env['PUBLIC_STOREFRONT_API_TOKEN']

||
Oxygen?.env?.PUBLIC_STOREFRONT_API_TOKEN,

[james-whittington1]

@Moelafi thank you so much for that. I've been working on other stuff recently but just got back to this and it works! 🥇

[paschaldev]

It works for PUBLIC_ variables, however PRIVATE_ variables are undefined when you deploy to vercel

[hitpixel]

Hi @Moelafi,

Sorry but I'm not sure on which to edit.

Above are the images of my hydrogen.config.ts and my env file how would I make these change. Sorry again for asking just not sure.

Thanks

[pguardiario]

I'm still getting 404 on vercel with the demo project.

[leerob]

https://hydrogen-template.vercel.app seems to work for me - what link are you using?

[pguardiario]

Sorry I posted this in 2 issues by accident.
https://hydrogen-store-1.vercel.app/
This is the latest version of the demo project and I selected Hydrogen preset.
Was there another step?

[pguardiario]

I got the 404 with the Vite preset (vercel didn't detect hydrogen for some reason)

[juanpprieto]

@leerob Any insights ?

[leerob]

See comment below - looks like the Hydrogen template did work, we just don't currently have a JavaScript one – but you can remove the typings if you would prefer to not have them.

[pguardiario]

I was able to create a hydrogen project from the vercel "template gallery" but it was the typescript one (I wanted the javascript one which I guess doesn't work on Vercel yet).

[this-alias]

@pguardiario, I was able to deploy the JS version of hydrogen by first installing it on my local machine, creating a Github repository from that, and then in Vercel select that repository for your deployment.

[pguardiario]

@this-alias that's what I tried first using npm init @shopify/hydrogen@latest but it didn't deploy successfully

[musaa-muhsen]

Has anyone been able to solve this? I've had to use the out-of-the-box Vercel solution instead which is good anyway - https://vercel.com/changelog/hydrogen-projects-can-now-be-deployed-with-zero-configuration

[ryanleichty]

If you’re having issues with environment variables, there’s a pull request on Vercel to resolve this. In the meantime, I believe Netlify has a plugin to polyfill the global Oxygen.env.

It's currently not possible to access environment variables in Hydrogen projects deployed to Vercel. The reason is that Hydrogen currently relies on a global Oxygen.env that needs to be polyfilled in the platform. This PR adds the global object using process.env, which is mentioned in the docs as the way to access environment variables in Edge Functions.

[musaa-muhsen]

Thanks for clearing that up Ryan.

[davequinta]

Hello!
Have anyone managed to deploy a JavaScript hydrogen app yet?
I'm still getting 404

[beamercola]

It auto-selects Vite as project type, but change it to Hydrogen in settings and it works

[salomonMuriel]

Thx!

[mlaurel]

I tried pretty much everything in this thread... added env variables and project type changed to hydrogen. I'm able to run locally (after adding .env file), but can't get deployed to vercel, also get 404. No problems with the TypeScript version.

[Moelafi]

Did u try my suggestion above

[awongh]

For anyone else reading this, you can set a callback function instead of an object

It helped me debug and figure out what I needed.

I figured out that vite is also looking at the env vars and not loading some of them.

Here's the monstrosity I ended up with :)

edit: also had to switch my app type in the vercel dashboard.

import {defineConfig, CookieSessionStorage} from '@shopify/hydrogen/config';

export default defineConfig({
  shopify: function genShopifyConfig(request){

    let storeDomain;
    let apiToken;
    let privateApiToken;

    if( typeof Oxygen !== 'undefined'
        && Oxygen
        && Oxygen?.env
        && Oxygen?.env?.PUBLIC_STORE_DOMAIN
        && Oxygen?.env?.PUBLIC_STOREFRONT_API_TOKEN
        && Oxygen?.env?.PRIVATE_STOREFRONT_API_TOKEN
    ){
      storeDomain = Oxygen?.env?.PUBLIC_STORE_DOMAIN;
      apiToken = Oxygen?.env?.PUBLIC_STOREFRONT_API_TOKEN;
      privateApiToken = Oxygen?.env?.PRIVATE_STOREFRONT_API_TOKEN;

    }else{
      storeDomain = import.meta.env.VITE_PUBLIC_STORE_DOMAIN || 'hydrogen-preview.myshopify.com';
      apiToken = import.meta.env.VITE_PUBLIC_STOREFRONT_API_TOKEN || '3b580e70970c4528da70c98e097c2fa0';
      privateApiToken = import.meta.env.VITE_PRIVATE_STOREFRONT_API_TOKEN || 'fake';

    }

    return {
      defaultCountryCode: 'US',
      defaultLanguageCode: 'EN',
      storeDomain: storeDomain,
      storefrontToken: apiToken,
      storefrontApiVersion: '2022-07',
      privateStorefrontToken: privateApiToken,
    }

  },
  session: CookieSessionStorage('__session', {
    path: '/',
    httpOnly: true,
    secure: import.meta.env.PROD,
    sameSite: 'Strict',
    maxAge: 60 * 60 * 24 * 30,
  }),
});

config with vite

VITE_PUBLIC_STORE_DOMAIN=...
VITE_PUBLIC_STOREFRONT_API_TOKEN=...
VITE_PRIVATE_STOREFRONT_API_TOKEN=...

[hitpixel]

how did u get it to load, what is your current app in vercel.

is this:
VITE_PUBLIC_STORE_DOMAIN=...
VITE_PUBLIC_STOREFRONT_API_TOKEN=...
VITE_PRIVATE_STOREFRONT_API_TOKEN=...

suppose to go to the .env file?