feat: Support subpath deployment (#252)

* test: subpath deployment * feat: support subpath deployment * feat: support base value without trailing slash
honojs · Jan 23, 2025 · e66a876 · e66a876
1 parent aed14ea
commit e66a876
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 2 deletions.
diff --git a/src/server/components/link.tsx b/src/server/components/link.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'hono/jsx'
 import type { JSX } from 'hono/jsx/jsx-runtime'
 import type { Manifest } from 'vite'
+import { ensureTrailngSlash } from '../utils/path'
 
 type Options = { manifest?: Manifest; prod?: boolean } & JSX.IntrinsicElements['link']
 
@@ -23,7 +24,12 @@ export const Link: FC<Options> = (options) => {
         const assetInManifest = manifest[href.replace(/^\//, '')]
         if (assetInManifest) {
           if (href.startsWith('/')) {
-            return <link href={`/${assetInManifest.file}`} {...rest}></link>
+            return (
+              <link
+                href={`${ensureTrailngSlash(import.meta.env.BASE_URL)}${assetInManifest.file}`}
+                {...rest}
+              ></link>
+            )
           }
 
           return <link href={assetInManifest.file} {...rest}></link>

diff --git a/src/server/components/script.tsx b/src/server/components/script.tsx
@@ -1,4 +1,5 @@
 import type { Manifest } from 'vite'
+import { ensureTrailngSlash } from '../utils/path.js'
 import { HasIslands } from './has-islands.js'
 
 type Options = {
@@ -33,7 +34,7 @@ export const Script = (options: Options): any => {
             <script
               type='module'
               async={!!options.async}
-              src={`/${scriptInManifest.file}`}
+              src={`${ensureTrailngSlash(import.meta.env.BASE_URL)}${scriptInManifest.file}`}
               nonce={options.nonce}
             ></script>
           </HasIslands>

diff --git a/src/server/utils/path.test.ts b/src/server/utils/path.test.ts
@@ -0,0 +1,12 @@
+import { ensureTrailngSlash } from './path'
+
+describe('ensureTrailngSlash', () => {
+  it('Should ensure trailing slash', () => {
+    expect(ensureTrailngSlash('./')).toBe('./')
+    expect(ensureTrailngSlash('/')).toBe('/')
+    expect(ensureTrailngSlash('/subdir')).toBe('/subdir/')
+    expect(ensureTrailngSlash('/subdir/')).toBe('/subdir/')
+    expect(ensureTrailngSlash('https://example.com')).toBe('https://example.com/')
+    expect(ensureTrailngSlash('https://example.com/subdir')).toBe('https://example.com/subdir/')
+  })
+})
diff --git a/src/server/utils/path.ts b/src/server/utils/path.ts
@@ -0,0 +1,3 @@
+export const ensureTrailngSlash = (path: string) => {
+  return path.endsWith('/') ? path : path + '/'
+}
diff --git a/test-integration/apps.test.ts b/test-integration/apps.test.ts
@@ -489,6 +489,69 @@ describe('<Script /> component', () => {
         '<html><head><script type="module" src="/static/client-abc.js"></script></head><body><main><honox-island component-name="/mocks/app-script/islands/Component.tsx" data-serialized-props="{}"><p>Component</p></honox-island></main></body></html>'
       )
     })
+
+    describe('with base path - root relative', () => {
+      const originalBaseURL = import.meta.env.BASE_URL
+
+      beforeAll(() => {
+        // this means `base: "/base/path/"` in vite.config.ts
+        import.meta.env.BASE_URL = '/base/path/'
+      })
+
+      afterAll(() => {
+        import.meta.env.BASE_URL = originalBaseURL
+      })
+
+      it('Should convert the script path correctly', async () => {
+        const res = await app.request('/')
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe(
+          '<html><head><script type="module" src="/base/path/static/client-abc.js"></script></head><body><main><honox-island component-name="/mocks/app-script/islands/Component.tsx" data-serialized-props="{}"><p>Component</p></honox-island></main></body></html>'
+        )
+      })
+    })
+
+    describe('with base path - root relative, without trailing slash', () => {
+      const originalBaseURL = import.meta.env.BASE_URL
+
+      beforeAll(() => {
+        // this means `base: "/base/path"` in vite.config.ts
+        import.meta.env.BASE_URL = '/base/path'
+      })
+
+      afterAll(() => {
+        import.meta.env.BASE_URL = originalBaseURL
+      })
+
+      it('Should convert the script path correctly', async () => {
+        const res = await app.request('/')
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe(
+          '<html><head><script type="module" src="/base/path/static/client-abc.js"></script></head><body><main><honox-island component-name="/mocks/app-script/islands/Component.tsx" data-serialized-props="{}"><p>Component</p></honox-island></main></body></html>'
+        )
+      })
+    })
+
+    describe('with base path - absolute url', () => {
+      const originalBaseURL = import.meta.env.BASE_URL
+
+      beforeAll(() => {
+        // this means `base: "https://example.com/base/path/"` in vite.config.ts
+        import.meta.env.BASE_URL = 'https://example.com/base/path/'
+      })
+
+      afterAll(() => {
+        import.meta.env.BASE_URL = originalBaseURL
+      })
+
+      it('Should convert the script path correctly', async () => {
+        const res = await app.request('/')
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe(
+          '<html><head><script type="module" src="https://example.com/base/path/static/client-abc.js"></script></head><body><main><honox-island component-name="/mocks/app-script/islands/Component.tsx" data-serialized-props="{}"><p>Component</p></honox-island></main></body></html>'
+        )
+      })
+    })
   })
 
   describe('With async', () => {
@@ -555,6 +618,69 @@ describe('<Link /> component', () => {
         '<html><head><link href="/static/globals-abc.css" rel="stylesheet"></link></head><body><main><div></div></main></body></html>'
       )
     })
+
+    describe('with base path - root relative', () => {
+      const originalBaseURL = import.meta.env.BASE_URL
+
+      beforeAll(() => {
+        // this means `base: "/base/path/"` in vite.config.ts
+        import.meta.env.BASE_URL = '/base/path/'
+      })
+
+      afterAll(() => {
+        import.meta.env.BASE_URL = originalBaseURL
+      })
+
+      it('Should convert the link path correctly', async () => {
+        const res = await app.request('/')
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe(
+          '<html><head><link href="/base/path/static/globals-abc.css" rel="stylesheet"></link></head><body><main><div></div></main></body></html>'
+        )
+      })
+    })
+
+    describe('with base path - root relative, without trailing slash', () => {
+      const originalBaseURL = import.meta.env.BASE_URL
+
+      beforeAll(() => {
+        // this means `base: "/base/path"` in vite.config.ts
+        import.meta.env.BASE_URL = '/base/path'
+      })
+
+      afterAll(() => {
+        import.meta.env.BASE_URL = originalBaseURL
+      })
+
+      it('Should convert the link path correctly', async () => {
+        const res = await app.request('/')
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe(
+          '<html><head><link href="/base/path/static/globals-abc.css" rel="stylesheet"></link></head><body><main><div></div></main></body></html>'
+        )
+      })
+    })
+
+    describe('with base path - absolute url', () => {
+      const originalBaseURL = import.meta.env.BASE_URL
+
+      beforeAll(() => {
+        // this means `base: "https://example.com/base/path/"` in vite.config.ts
+        import.meta.env.BASE_URL = 'https://example.com/base/path/'
+      })
+
+      afterAll(() => {
+        import.meta.env.BASE_URL = originalBaseURL
+      })
+
+      it('Should convert the link path correctly', async () => {
+        const res = await app.request('/')
+        expect(res.status).toBe(200)
+        expect(await res.text()).toBe(
+          '<html><head><link href="https://example.com/base/path/static/globals-abc.css" rel="stylesheet"></link></head><body><main><div></div></main></body></html>'
+        )
+      })
+    })
   })
 })