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>
);
}
