Got sub-path hosting working

Required monkey-patching URL object in JS to workaround possible
inertiaJS limitations.

Author: ssddanbrown

README.md

@@ -155,6 +155,25 @@ APP_LOAD_POST_THUMBNAILS=true
 APP_FEED_UPDATE_FREQUENCY=60
 ```
 
+## Usage Behind a Reverse Proxy
+
+When using behind a reverse proxy, ensure common forwarding headers are set so that the application can properly detect the right host and path to use.
+The below shows a sub-path proxy config location block for nginx. Note the `X-Forwarded-Prefix` header to make the application aware of sub-path usage.
+
+```nginx
+location /rss/ {
+    proxy_pass http://container-ip:80/;
+    proxy_set_header Host              $host;
+    proxy_set_header X-Real-IP         $remote_addr;
+    proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_set_header X-Forwarded-Host  $host;
+    proxy_set_header X-Forwarded-Port  $server_port;
+    proxy_set_header X-Forwarded-Prefix "/rss/";
+    proxy_redirect off;
+}
+```
+
 ## Manual Install
 
 Manually installing the application is not recommended unless you are performing development work on the project.

app/Http/Middleware/TrustProxies.php

@@ -12,7 +12,7 @@ class TrustProxies extends Middleware
      *
      * @var array<int, string>|string|null
      */
-    protected $proxies;
+    protected $proxies = '*';
 
     /**
      * The headers that should be used to detect proxies.

config/app.php

@@ -95,9 +95,8 @@
     |
     */
 
-    'url' => env('APP_URL', 'http://localhost'),
-
-    'asset_url' => env('ASSET_URL'),
+    'url' => '',
+    'asset_url' => '',
 
     /*
     |--------------------------------------------------------------------------

docker/.env.container

@@ -2,7 +2,6 @@ APP_NAME=RSS
 APP_ENV=production
 APP_KEY=
 APP_DEBUG=false
-# APP_URL=http://localhost
 
 # Path to configuration
 APP_CONFIG_FILE=/app/storage/feeds.txt

resources/js/Pages/Posts.vue

@@ -13,7 +13,7 @@
             <div class="md:max-w-xs w-full hidden md:block" :class="{'!block': mobileShowOptions}">
 
                 <div v-if="search || tag || feed || page !== 1" class="mb-8">
-                    <Link href="/" class="font-bold text-black dark:text-gray-400">&laquo; Back to home</Link>
+                    <Link href="./" class="font-bold text-black dark:text-gray-400">&laquo; Back to home</Link>
                 </div>
 
                 <div class="mb-8">
@@ -50,7 +50,7 @@
 
                 <div class="flex items-center justify-between mb-2">
                     <h2 class="font-bold text-black dark:text-gray-400">
-                        <Link href="/">Posts</Link>
+                        <Link href="./">Posts</Link>
                         <span v-if="tag"> / #{{ tag }}</span>
                         <span v-if="feed && feeds.length === 1"> / <span :style="{ color: feeds[0].color}">{{ feeds[0].name }}</span></span>
                         <span v-if="search"> ?= {{ search }}</span>

resources/js/Parts/Feed.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="py-1 my-2">
         <h4 class="font-bold text-black dark:text-gray-400" :style="{color: feed.color}">
-            <Link :href="`/f/${encodeURIComponent(encodeURIComponent(feed.url))}`">{{ feed.name }}</Link>
+            <Link :href="`f/${encodeURIComponent(encodeURIComponent(feed.url))}`">{{ feed.name }}</Link>
         </h4>
         <div class="font-mono text-gray-600 dark:text-gray-500 text-xs my-1 overflow-ellipsis whitespace-nowrap w-full overflow-hidden">{{ feed.url }}</div>
         <div class="flex gap-1 text-gray-600 dark:text-gray-500 text-sm flex-wrap">
@@ -44,7 +44,7 @@ export default {
             window.location.reload();
         },
         async pollFeedStatus() {
-            const resp = await axios.get(`/feed`, {params: {url: this.feed.url}});
+            const resp = await axios.get(`feed`, {params: {url: this.feed.url}});
             if (resp?.data?.outdated) {
                 this.reloadingPoll = setTimeout(this.pollFeedStatus.bind(this), 3000);
             } else {

resources/js/Parts/Post.vue

@@ -5,7 +5,7 @@
         dark:hover:border-gray-700 dark:hover:bg-gray-800 rounded hover:relative hover:z-20 -my-px">
 
         <div class="flex text-sm text-gray-600 dark:text-gray-400 items-center flex-wrap">
-            <Link :href="`/f/${encodeURIComponent(encodeURIComponent(post.feed.url))}`" :style="{color: post.feed.color}" class="font-bold text-xs block">{{ post.feed.name }}</Link>
+            <Link :href="`f/${encodeURIComponent(encodeURIComponent(post.feed.url))}`" :style="{color: post.feed.color}" class="font-bold text-xs block">{{ post.feed.name }}</Link>
             <div class="px-2">&bull;</div>
             <div class="italic" :title="isoTime">About {{ relatedPublishedTime }} ago</div>
             <div class="px-2 hidden md:block">&bull;</div>
@@ -17,7 +17,7 @@
         <div :class="{'flex items-center gap-5': formatList && post.thumbnail}">
             <div v-if="post.thumbnail && !formatCompact" :class="{'w-32': formatList}">
                 <a :href="post.url" target="_blank" class="block overflow-hidden rounded my-2 border dark:border-black">
-                    <img :src="`/storage/${post.thumbnail}`"
+                    <img :src="`storage/${post.thumbnail}`"
                          loading="lazy"
                          class="w-full h-32 md:h-48 lg:h-64 object-cover saturate-50"
                          :class="{'h-16 md:h-16 lg:h-16': formatList}"

resources/js/Parts/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-    <Link :href="`/t/${urlTag}`"
+    <Link :href="`t/${urlTag}`"
           class="inline-block">{{ tag }}</Link>
 </template>
 

resources/js/app.js

@@ -2,6 +2,18 @@ import { createApp, h } from 'vue'
 import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 
+// Monkey-Patching of 'URL' constructor to use URL set via the `<base>` tag since
+// inertia.js does not seem to have a dynamic way to set a base URL or use base tags.
+(function(nativeURL) {
+    const configuredBase = document.querySelector('base').href;
+    window.URL = function(url, base) {
+        if (base === window.location.toString()) {
+            base = configuredBase;
+        }
+        return new nativeURL(url, base);
+    }
+})(URL);
+
 createInertiaApp({
     resolve: name => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
@@ -10,4 +22,4 @@ createInertiaApp({
             .use(plugin)
             .mount(el)
     },
-})
+});

resources/views/app.blade.php

@@ -6,6 +6,8 @@
 
     <title>{{ config('app.name') }}</title>
 
+    <base href="{{ asset('') }}">
+
     @if(!app()->runningUnitTests())
         @vite(['resources/css/app.css', 'resources/js/app.js'])
     @endif