How do I migrate a vite react app to work with Shopify?

Shopify Discussion

Topic summary

A developer is migrating a Vite React booking form application to work within Shopify’s hero section, following the official CLI migration documentation for a monorepo structure.

Initial Problem:

  • Encountered “Error forwarding web request: AggregateError” when attempting to preview the app
  • App works on localhost:5173 but fails in Shopify preview
  • Using CLI version 3.73.1 with proper folder structure (Root/Web/Frontend)

Troubleshooting Steps Taken:

  • Added @shopify/app dependency (v3.58.2)
  • Modified vite.config.ts for proxy server configuration
  • Uncertainty about .env file usage versus .toml configuration
  • Questions about API secret generation

Current Progress:

  • Successfully displays form in Shopify using ngrok tunnel to localhost:5173
  • Implemented @shopify/app-bridge-react provider
  • Now facing a new error (shown in screenshot) related to app bridge configuration
  • Added app-bridge.js script tag and configured main.tsx with environment-specific settings for development/production

Status: Ongoing troubleshooting with improved visibility into errors but not fully resolved.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi, I have been migrating my Vite React application. It is a simple form to send booking data to my client’s CRM tool. They wanted to show up on their Shopify hero section page. I was reading the docs for the Shopify CLI migration step and have been following that.

Migration Doc](Migrate to Shopify CLI 3.x))

I have most of everything set up correctly with my configurations. The only issue I am trying to solve right now is this error: “Error forwarding web request: AggregateError”

My app’s folder structure is following the mono repo setup of what they recommend for the new CLI tooling. So I have the

Root

shopify.app.app-name.toml

Web

shopify.web.toml

… configuration files for frontend project

Frontend

… project specific components files

localhost:5173 works. It is only when I try to see the preview it does not. Here are my terminal messages:

Before looking at preview

kpgabriel_0-1736705190491.png
kpgabriel_0-1736705190491.png1004×632 73.3 KB

After looking at preview

kpgabriel_1-1736705232591.png
kpgabriel_1-1736705232591.png1008×665 78 KB

2

Hi @webcraftio !

Thanks for your reply. The app does not have any auth requirements, and there isn’t any session management like local storage or session storage. I am using react-hook-form to manage the state.

My current CLIversion is : 3.73.1

@Shopify/app version I just installed since it was not there before. It is now in my root package.json:

^3.58.2

With the verbose flag enables here are my logs:

kpgabriel_0-1736717164740.png
kpgabriel_0-1736717164740.png1046×1028 117 KB

I have edited the vite.config.ts file for the proxy server as you mentioned.

The only part I am unsure of is the .env file. I thought it should use the .toml file. And how would I know what the secret is? I think the API key was auto-generated when I ran the Shopify app dev to link it to my partner account.

3

So I made some progress I can now see my form, from the Shopify page when I added the @Shopify_77 /app-bridge-react as a provider. And then using ngrok to tunnel my app from localhost onto the vite port of 5173. The error message now is more helpful which states this:

kpgabriel_0-1736740070509.png
kpgabriel_0-1736740070509.png1199×356 30.6 KB

I included the script tag for the app-bridge.js file with my client ID from the CLI and then added this to my main.tsx file:

const isDevelopment = import.meta.env.DEV;

const config = {
development: {
apiKey: process.env.SHOPIFY_API_KEY ?? ‘’,
host: new URL(window.location.href).searchParams.get(‘host’) ?? ‘’,
},
production: {
apiKey: process.env.SHOPIFY_API_KEY ?? ‘’,
host: new URL(window.location.href).searchParams.get(‘host’) ?? ‘’,
},
};

const router = createBrowserRouter(
[
{
path: ‘/’,
element: ,
},
],
{
basename: ‘/’,
}
);

createRoot(document.getElementById(‘root’)!).render(

<ShopifyAppBridgeProvider
config={{
…config[isDevelopment ? ‘development’ : ‘production’],
forceRedirect: true,
}}

);