App
component
Sets up a Remix <Form> component that works when rendered on an app proxy page.
Supports any properties accepted by the <Form> component.
Because Remix doesn't support URL rewriting, any route using this component should match the pathname of the proxy URL exactly, and end in a trailing slash (e.g., ), or set the Remix Form prop navigate to false.
Was this section helpful?
Render a form element in a proxied route
/app/routes/apps/appProxy.ts
import {
AppProxyProvider,
AppProxyForm,
} from "@shopify/shopify-app-remix/react";
import { authenticate } from "~/shopify.server";
export async function loader({ request }) {
await authenticate.public.appProxy(request);
return json({ appUrl: process.env.SHOPIFY_APP_URL });
}
export async function action({ request }) {
await authenticate.public.appProxy(request);
const formData = await request.formData();
const field = formData.get("field")?.toString();
// Perform actions
if (field) {
console.log("Field:", field);
}
// Return JSON to the client
return json({ message: "Success!" });
}
export default function App() {
const { appUrl } = useLoaderData();
return (
<AppProxyProvider appUrl={appUrl}>
<AppProxyForm action="/apps/appProxy" method="post">
<input type="text" name="field" />
<input type="submit" name="Submit" />
</AppProxyForm>
</AppProxyProvider>
);
}
Examples
Render a form element in a proxied route
Description
Use an `AppProxyForm` within an `AppProxy` to create a form.
/app/routes/apps/appProxy.ts
import { AppProxyProvider, AppProxyForm, } from "@shopify/shopify-app-remix/react"; import { authenticate } from "~/shopify.server"; export async function loader({ request }) { await authenticate.public.appProxy(request); return json({ appUrl: process.env.SHOPIFY_APP_URL }); } export async function action({ request }) { await authenticate.public.appProxy(request); const formData = await request.formData(); const field = formData.get("field")?.toString(); // Perform actions if (field) { console.log("Field:", field); } // Return JSON to the client return json({ message: "Success!" }); } export default function App() { const { appUrl } = useLoaderData(); return ( <AppProxyProvider appUrl={appUrl}> <AppProxyForm action="/apps/appProxy" method="post"> <input type="text" name="field" /> <input type="submit" name="Submit" /> </AppProxyForm> </AppProxyProvider> ); }
