Open another Embed application using App Proxy

Retired Boards Appdev Partners Discussion
, ,

Topic summary

A developer is attempting to manage two embedded Shopify apps from a single Partner Dashboard:

Setup:

  • Old App: Rails/Angular application (primary app URL in Partner Dashboard)
  • New App: React TypeScript application (separate repository)
  • Both apps use temporary tunnel URLs (ngrok and localtunnel)

Goal:
Add a link in the old app that redirects users to the new React app, passing required authentication parameters (host and shop origin), so it opens as an embedded application within the Shopify admin panel.

Current Issue:
Despite configuring an App Proxy, the developer cannot successfully launch the new React app as an embedded application. The code snippets show attempts to generate redirect URLs with authentication parameters and implement the new app using Shopify’s App Bridge and Polaris libraries.

Status: The issue remains unresolved with no responses yet. The developer has shared configuration screenshots and code examples seeking guidance on proper implementation.

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

Hello Developers & Partners,

I’m facing a scenario where I need to manage multiple embedded apps using a single Shopify Partner Dashboard. I have two applications: the first is a Rails application with an Angular frontend template in a single repository, and the second is a React TypeScript application in a separate repository. The URLs for these applications are:

In the Shopify Partner Dashboard, I’ve set the app URL to https://fit-grizzly-mostly.ngrok-free.app. After store authentication, the embedded app Old application successfully opens in the Shopify admin panel, allowing users to perform actions.

Now, I want to add a link in the old application (Rails/Angular) that redirects users to the new URL (https://sharp-needles-raise.loca.lt) with the necessary host and shop origin parameters.

The expected outcome is that Shopify opens the new React app as an embedded application in the admin panel. I’ve also set up the Proxy URL, but I’m still unable to open the new React app as an embedded app.

Here are some screenshots from the Shopify Partner Configuration

asadtechdev_0-1725881674798.png
asadtechdev_0-1725881674798.png1088×636 43.9 KB

asadtechdev_1-1725881767927.png
asadtechdev_1-1725881767927.png1163×305 22.7 KB

Old app Code from where I am calling the App Proxy

// home.component.ts
generateNewApp() {
    this.new_app_url = `https://admin.shopify.com/store/dummystore/apps/dummy-store-dev/react-gp-lite-dev/?host=confidentials&shop=dummystore.myshopify.com`;
  }

// home.component.html
<a href="{{new_app_url}}" target="_blank">
      <button type="button" class="btn">Explore New Application</button>
    </a>

React Application (New Application)

import React, { ReactNode, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { AppProvider } from '@shopify/polaris';
import { Provider, TitleBar } from '@shopify/app-bridge-react';
import { useAppBridge } from '@shopify/app-bridge-react';
import { Redirect } from '@shopify/app-bridge/actions';

import AppComponent from './AppComponent';
import Home from './Home';
import env from 'react-dotenv';

const Main: React.FC = () => {
  const [shopConfig, setShopConfig] = React.useState