Code example for automatic page generation in Remix

hi @chungwu We are in the process of transitioning our codebase from Shopify Hydrogen version 1 to version 2. As you may be aware, V2 employs Remix, and I noticed that Plasmic offers a guide for working with Remix. I found the Render a single Plasmic page example, but I was wondering if you could provide a code example for automatic page generation in Remix, if possible at all.

have you seen this?

hi @attainable_catshark Yes, I looked through that but as far as I can tell, there isn’t functionality for a catchall route. We are looking for something like this but for Remix

Hi Jay, for automatic page generation in Remix it would require the usage of splat routes ( based on the example sent by Jeff, you can use the following code in your $.tsx route

/** @format */

import {
} from "@plasmicapp/loader-react";
import { PLASMIC } from "../plasmic-init";
import { useLoaderData } from "@remix-run/react";
import { LoaderFunction, json } from "@remix-run/node";

// Fetch the data needed to render Plasmic pages or components, server-side.
export const loader: LoaderFunction = async ({ params }) => {
  // Get the current path from params and pass it to plasmic
  const path = `/${params['*']}`;
  const plasmicData = await PLASMIC.fetchComponentData(path);
  return json(plasmicData);

// Render the page or component from Plasmic.
export default function MyPage() {
  const plasmicData = useLoaderData();
  return (
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
      <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />

But currently splat routes don’t work with index route ( so you would have to handle it separately. Does that work in your case ?

Hello @fmota! I appreciate you sharing this example code with us. From what I gather about Remix index routes, a route such as would function properly, whereas would not work. Assuming this interpretation is accurate, the solution should work. We’re trying to comprehend index routes, so any additional clarification would be greatly appreciated!

Actually if you have app/routes/$.tsx it wouldn’t work only for, but it would work for /pages/mypage123 and /pages. Now if you have app/routes/pages/$.tsx you would have and working,

hi @fmota Thanks for the info. We have installed plasmic-init.ts via the Plasmic Remix instructions but we cannot get the Plasmic page to resolve at https://oursite/plasmic-host Is there any other routing that needs to be done with Remix that you know of?

How did you instrument the plasmic-host route ? Equivalent to

ok we didn’t implement it. Thank you. We will look through this

Sorry about the missing information on Remix docs :sweat_smile: , it will be improved

hi @fmota We have made some progress here. To get things started, we are using the single page route ‘mypage’ example from the website. We had to change this import here. There were other users reporting this online

Once we did, we could run dev on local, and we browser to we get this PLASMIC error. Any ideas?

Could you share how is your remix loader function? This may be an issue with integrating plasmic with cloudflare workers when fetching component data

If you’re trying to use with Cloudflare Workers, note that they do not allow any use of eval() in their edge platform, which is needed in order to dynamically load code such as what’s generated by Plasmic

Shopify Hydrogen’s Oxygen servers run on Cloudflare. So we are never going to be able to run Plasmic with Shopify Hydrogen Oxygen with loader? :pensive:

At the moment, the only way to make it work is if you are using codegen - that’s unfortunately the main restriction with Cloudflare’s edge network :disappointed:

There are other edge runtimes that do not have this restriction, like Deno, but Cloudflare has a security policy requiring all code that they execute on the platform must have been persisted in some form

Actually, we have pages running on Shopify Hydrogen 1.0 on loader

They just take an extra refresh for the first render

We hoped moving to Hydrogen 2.0 with Remix would solve that