From 058b218734d22a747405b6636cf866760d0e21e0 Mon Sep 17 00:00:00 2001 From: Duval Kilpatrick Date: Wed, 7 Jun 2023 15:44:02 -0400 Subject: [PATCH 1/2] add reverse proxy support --- .../src/common/src/template/hydration.ts | 19 ++++++++++++++----- packages/pages/src/vite-plugin/build/build.ts | 13 +++++++++++++ .../buildStart/rendering/templateUtils.ts | 3 +-- .../build/buildStart/rendering/wrapper.ts | 2 +- 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/packages/pages/src/common/src/template/hydration.ts b/packages/pages/src/common/src/template/hydration.ts index 2c350fa96..0b671de60 100644 --- a/packages/pages/src/common/src/template/hydration.ts +++ b/packages/pages/src/common/src/template/hydration.ts @@ -6,6 +6,9 @@ import { TemplateRenderProps } from "./types.js"; * Imports the custom hydration template and entrypoint template as modules and calls * the render function. * + * The component paths need to be resolved to the current domain's relative path in order + * to support reverse proxies. + * * @param clientRenderTemplatePath the path to the custom client render template * @param templateModulePath the path to the template module * @param props the {@link TemplateRenderProps} @@ -17,13 +20,19 @@ export const getHydrationTemplate = ( props: TemplateRenderProps ): string => { return ` - import {default as Component} from "${convertToPosixPath( + const componentUrl = import.meta.resolve("./${convertToPosixPath( templateModulePath - )}"; - import {render} from "${convertToPosixPath(clientRenderTemplatePath)}"; - render( + )}"); + const renderUrl = import.meta.resolve("./${convertToPosixPath( + clientRenderTemplatePath + )}"); + + const component = await import(componentUrl); + const render = await import(renderUrl); + + render.render( { - Page: Component, + Page: component.default, pageProps: ${JSON.stringify(props)}, } ); diff --git a/packages/pages/src/vite-plugin/build/build.ts b/packages/pages/src/vite-plugin/build/build.ts index 732172104..3256f186b 100644 --- a/packages/pages/src/vite-plugin/build/build.ts +++ b/packages/pages/src/vite-plugin/build/build.ts @@ -46,6 +46,19 @@ export const build = (projectStructure: ProjectStructure): Plugin => { }, }, define: processEnvVariables(projectStructure.envVarPrefix), + experimental: { + renderBuiltUrl(filename, { hostType }) { + // Assets are returned with a leading slash for some reason. This adjusts the + // paths to be relative for reverse proxy support. + if (hostType === "js") { + if (filename.at(0) === "/") { + return filename.substring(1); + } + return filename; + } + return { relative: true }; + }, + }, }; }, buildStart: buildStart(projectStructure), diff --git a/packages/pages/src/vite-plugin/build/buildStart/rendering/templateUtils.ts b/packages/pages/src/vite-plugin/build/buildStart/rendering/templateUtils.ts index bf076a76d..6bed6c6c3 100644 --- a/packages/pages/src/vite-plugin/build/buildStart/rendering/templateUtils.ts +++ b/packages/pages/src/vite-plugin/build/buildStart/rendering/templateUtils.ts @@ -59,7 +59,6 @@ export interface PluginRenderTemplates { export const getPluginRenderTemplates = async ( manifest: Manifest ): Promise => { - const clientRenderPath = pathLib.join("..", manifest.renderPaths._client); const serverRenderPath = manifest.renderPaths._server.replace("assets", ".."); const serverRenderTemplateModule = (await import( @@ -68,7 +67,7 @@ export const getPluginRenderTemplates = async ( return { server: serverRenderTemplateModule, - client: clientRenderPath, + client: manifest.renderPaths._client, }; }; diff --git a/packages/pages/src/vite-plugin/build/buildStart/rendering/wrapper.ts b/packages/pages/src/vite-plugin/build/buildStart/rendering/wrapper.ts index 3013cd22f..7ac9cab5d 100644 --- a/packages/pages/src/vite-plugin/build/buildStart/rendering/wrapper.ts +++ b/packages/pages/src/vite-plugin/build/buildStart/rendering/wrapper.ts @@ -41,7 +41,7 @@ export const reactWrapper = async ( if (hydrate) { clientHydrationString = getHydrationTemplate( pluginRenderTemplates.client, - path.join("..", "assets", templateModuleInternal.path.replace("..", "")), + path.join("assets", templateModuleInternal.path.replace("..", "")), props ); } From bb03eeca860ba6efee7b32679bb439f58c0fa581 Mon Sep 17 00:00:00 2001 From: Duval Kilpatrick Date: Wed, 7 Jun 2023 19:00:56 -0400 Subject: [PATCH 2/2] fix for dev --- .../src/common/src/template/hydration.ts | 32 +++++++++++++++++++ .../src/dev/server/middleware/sendAppHTML.ts | 4 +-- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/pages/src/common/src/template/hydration.ts b/packages/pages/src/common/src/template/hydration.ts index 0b671de60..52c328f3f 100644 --- a/packages/pages/src/common/src/template/hydration.ts +++ b/packages/pages/src/common/src/template/hydration.ts @@ -2,6 +2,38 @@ import { HeadConfig, renderHeadConfigToString } from "./head.js"; import { convertToPosixPath } from "./paths.js"; import { TemplateRenderProps } from "./types.js"; +/** + * Imports the custom hydration template and entrypoint template as modules and calls + * the render function. + * + * Dev has a separate function than {@link getHydrationTemplate} due to how Vite messes + * with the import.meta.url. + * + * @param clientRenderTemplatePath the path to the custom client render template + * @param templateModulePath the path to the template module + * @param props the {@link TemplateRenderProps} + * @returns the HTML as a string + */ +export const getHydrationTemplateDev = ( + clientRenderTemplatePath: string, + templateModulePath: string, + props: TemplateRenderProps +): string => { + return ` + import {default as Component} from "${convertToPosixPath( + templateModulePath + )}"; + import {render} from "${convertToPosixPath(clientRenderTemplatePath)}"; + + render( + { + Page: Component, + pageProps: ${JSON.stringify(props)}, + } + ); + `; +}; + /** * Imports the custom hydration template and entrypoint template as modules and calls * the render function. diff --git a/packages/pages/src/dev/server/middleware/sendAppHTML.ts b/packages/pages/src/dev/server/middleware/sendAppHTML.ts index fd23dfba1..a05f6e9c9 100644 --- a/packages/pages/src/dev/server/middleware/sendAppHTML.ts +++ b/packages/pages/src/dev/server/middleware/sendAppHTML.ts @@ -10,7 +10,7 @@ import { getContentType } from "./getContentType.js"; import { getGlobalClientServerRenderTemplates } from "../../../common/src/template/internal/getTemplateFilepaths.js"; import { ProjectStructure } from "../../../common/src/project/structure.js"; import { - getHydrationTemplate, + getHydrationTemplateDev, getServerTemplateDev, } from "../../../common/src/template/hydration.js"; @@ -52,7 +52,7 @@ export default async function sendAppHTML( ? templateModuleInternal.getHeadConfig(props) : undefined; - const clientHydrationString = getHydrationTemplate( + const clientHydrationString = getHydrationTemplateDev( clientServerRenderTemplates.clientRenderTemplatePath, templateModuleInternal.path, props