App Proxy / Remix app in store theme

Shopify CLI and Libraries
1

Looking for some guidance, if anyone can help.

I’m in the process of trying to create a custom customer portal for Recharge. My thought was to create a non-embedded Remix app, that could be accessed through a Shopify proxy URL, and loaded within the store theme, where I can call the Recharge APIs and return data back to the theme.

I’ve been able to get most of it connected, but running into a lot of issues (loading javascript, return liquid, hydration issues, and relative URLs using the proxy, instead of the store, etc).

Has anyone done anything like this, or know if it’s possible?

Any help would be appreciated. Thanks!

2

Hi there :wave:

A couple of things!

  1. Are you using the Shopify App Remix template?
    If you are planning on interacting with Recharges APIs and not Shopify’s then you may want to consider using a regular Remix app, and not the Shopify template, as there is extra code and configuration there that you won’t need if you aren’t interacting with the Shopify API directly.

  2. As you have discovered there are some limitations with the Remix framework, like URL rewriting, that make working with Remix and App proxies a little difficult. But it should be possible to do it. Do you have any specific issues you can describe?

  3. If you haven’t already you may want to reach out to the Recharge team to get their advice on building a custom customer portal for the Shopify platform.

3

@Liz-Shopify Thanks for the quick reply!

It would be great if there is a way to get a Remix app to work with the Shopify proxy as it seemed like a nice solution, but I understand there are limitations. Any documentation you could provide to potentially get this running would be appreciated. I know Remix just released React Router v7, do you know if that could fix some of the issues with URL rewrites? Are you planning to update the Shopify Remix template to RRv7?

Here are my responses to your questions. Thanks so much for your help!

1. I am using the Shopify App Remix template, as I will need to interact with both the Shopify API and the Recharge API to implement the functionality that we need.

2. Here is a list of some of the issues that I’ve come across and my attempts to resolve them after digging through a number of Github issues and forums:

  • I was having an issue getting any routes to load, but eventually found that adding a route that matched the proxy (i.e. /apps/proxy) got the routes to load.

  • Then I wasn’t able to get any JS within the components to work. I found that adding the following to the vite.config.js allowed the JS to load.

base: process.env.SHOPIFY_APP_URL || "",
  • Making that change to the config, however, made it so the route no longer rendered within the store’s theme, and causing a number of hydration issues. I addressed this by changing the response type in entry.server.tsx
responseHeaders.set("Content-Type", "application/liquid");
  • and creating an entry.client.tsx file with the following.
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { createRoot } from "react-dom/client";

startTransition(() => {
  createRoot(document.getElementById("MainContent")!).render(
    <StrictMode>
      <RemixBrowser />
    </StrictMode>,
  );
});
  • Next, I changed the output from root.tsx to include only the following to fix some DOM nesting issues (removed <html> <head> and <body> tags)
return (
    <>
      <Outlet />
      <ScrollRestoration />
      <Scripts />
    </>
  );
  • Now, all of the URLs in the theme’s header are using my Cloudflare URLs, instead of the store’s URLs, which is still unresolved.

3. I have contacted Recharge, and they do have a few portal options, but they don’t provide the flexibility that we’re looking for. Also, understandably, they don’t support a fully custom built solution, other than providing the APIs.

4

Any documentation you could provide to potentially get this running would be appreciated

The documentation we have at this time is regarding the the App Proxy components provided by the shopify-app-remix package. (AppProxyProvider, AppProxyForm)

Are you planning to update the Shopify Remix template to RRv7?

We do plan to do this, but I don’t have a timeline to share at this time.

If you aren’t already you may want to review the AppProxyProvider component from the library. I believe that would resolve some of your issues with loading javascript.

Thanks you for all the details on this though! I will take this feedback to the team.