Revamp the RR7 app, fix all the problems related to deployments.

apps/rr7/app/config.server.ts

@@ -0,0 +1,32 @@
+/**
+ * This is the server side config entry point
+ */
+import config from '@plone/registry';
+import ploneClient from '@plone/client';
+import applyAddonConfiguration from '@plone/registry/addons-loader';
+
+export default function install() {
+  applyAddonConfiguration(config);
+
+  config.settings.apiPath =
+    process.env.PLONE_API_PATH || 'http://localhost:3000';
+  config.settings.internalApiPath =
+    process.env.PLONE_INTERNAL_API_PATH || undefined;
+
+  const cli = ploneClient.initialize({
+    apiPath: config.settings.internalApiPath || config.settings.apiPath,
+  });
+
+  config.registerUtility({
+    name: 'ploneClient',
+    type: 'client',
+    method: () => cli,
+  });
+
+  console.log('API_PATH is:', config.settings.apiPath);
+  console.log(
+    'INTERNAL_API_PATH is:',
+    config.settings.internalApiPath || 'not set',
+  );
+  return config;
+}

apps/rr7/app/config.ts

@@ -1,15 +1,11 @@
+/**
+ * This is the client side config entry point
+ */
 import config from '@plone/registry';
 import applyAddonConfiguration from '@plone/registry/addons-loader';
 
 export default function install() {
   applyAddonConfiguration(config);
-  config.settings.apiPath =
-    process.env.PLONE_API_PATH || 'http://localhost:3000';
-  config.settings.internalApiPath = process.env.PLONE_INTERNAL_API_PATH || '';
-  console.log('API_PATH is:', config.settings.apiPath);
-  console.log(
-    'INTERNAL_API_PATH is:',
-    config.settings.internalApiPath || 'not set',
-  );
+  config.settings.apiPath = 'http://localhost:3000';
   return config;
 }

apps/rr7/app/content.tsx

@@ -6,12 +6,13 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { flattenToAppURL } from './utils';
 import { useLoaderData, useLocation } from 'react-router';
+import type { MetaFunction } from 'react-router';
 import { usePloneClient } from '@plone/providers';
-import { ploneClient } from './client';
+import PloneClient from '@plone/client';
 import App from '@plone/slots/components/App';
-import type { MetaFunction } from 'react-router';
+import { flattenToAppURL } from './utils';
+import config from '@plone/registry';
 
 export const meta: MetaFunction = () => {
   return [
@@ -34,11 +35,28 @@ export async function loader({ params, request }: LoaderArgs) {
     },
   });
 
-  const { getContentQuery } = ploneClient;
+  const ploneClient = config
+    .getUtility({
+      name: 'ploneClient',
+      type: 'client',
+    })
+    .method();
 
-  await queryClient.prefetchQuery(
-    getContentQuery({ path: flattenToAppURL(request.url), expand }),
-  );
+  const { getContentQuery } = ploneClient as PloneClient;
+
+  const path = flattenToAppURL(request.url);
+  if (
+    !(
+      /^https?:\/\//.test(path) ||
+      /^favicon.ico\/\//.test(path) ||
+      /expand/.test(path) ||
+      /^\/@@images/.test(path) ||
+      /^\/@@download/.test(path) ||
+      /^\/assets/.test(path)
+    )
+  ) {
+    await queryClient.prefetchQuery(getContentQuery({ path, expand }));
+  }
 
   return { dehydratedState: dehydrate(queryClient) };
 }

apps/rr7/app/okroute.tsx

@@ -0,0 +1,5 @@
+export async function loader() {
+  return new Response(null, {
+    status: 200,
+  });
+}

apps/rr7/app/routes.ts

@@ -3,5 +3,6 @@ import { index, route } from '@react-router/dev/routes';
 
 export const routes: RouteConfig = [
   index('content.tsx', { id: 'index' }),
+  route('ok', 'okroute.tsx', { id: 'ok' }),
   route('*', 'content.tsx', { id: 'splat' }),
 ];

apps/rr7/app/utils.ts

@@ -9,11 +9,12 @@ import config from '@plone/registry';
  */
 export function flattenToAppURL(url: string) {
   const { settings } = config;
+
   const result =
     url &&
     url
       .replace(settings.apiPath, '')
-      .replace(settings.internalApiPath || '', '')
+      .replace(settings.internalApiPath, '')
       .replace('http://localhost:3000', '');
   return result;
 }