Code example for automatic page generation in Remix

Developer Support
1

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.

2

have you seen this?

3

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 https://docs.plasmic.app/learn/nextjs-quickstart/#auto-load-all-plasmic-pages

4

Hi Jay, for automatic page generation in Remix it would require the usage of splat routes (https://remix.run/docs/en/1.15.0/file-conventions/routes-files#splat-routes) based on the example sent by Jeff, you can use the following code in your $.tsx route

/** @format */

import {
  PlasmicRootProvider,
  PlasmicComponent,
} 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} />
    </PlasmicRootProvider>
  );
}

But currently splat routes don’t work with index route (https://github.com/remix-run/remix/issues/5841) so you would have to handle it separately. Does that work in your case ?

5

Hello @fmota! I appreciate you sharing this example code with us. From what I gather about Remix index routes, a route such as mysite.com/pages/mypage123 would function properly, whereas mysite.com/pages 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!

6

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

7

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?

8

How did you instrument the plasmic-host route ? Equivalent to https://docs.plasmic.app/learn/nextjs-quickstart/#adding-custom-code-components

9

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

10

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

11

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

CleanShot 2023-04-12 at 16.09.20@2x.png
CleanShot 2023-04-12 at 16.09.20@2x.png1442×486 313 KB

12

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

CleanShot 2023-04-12 at 16.07.43@2x.png
CleanShot 2023-04-12 at 16.07.43@2x.png2782×465 202 KB

13

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

14

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

15

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:

16

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:

17

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

18

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

19

They just take an extra refresh for the first render

20

We hoped moving to Hydrogen 2.0 with Remix would solve that