Flood: Setting to change URL base

[tillkrischer]

First of all great wrok, I like the app alot.

I would like to see a setting to change the url base.
for example to: /flood
similar too the way sonarr does it.

That way you can use a reverse proxy.

[jfurrow]

Thanks! I'll work on this.

[Meroje]

Hey, just had to make flood work behind a reverse-proxy on a subpath.
Here's what I did:

diff --git a/client/scripts/axios.js b/client/scripts/axios.js
new file mode 100644
index 0000000..e5b6011
--- /dev/null
+++ b/client/scripts/axios.js
@@ -0,0 +1,14 @@
+import axios from 'axios/lib/axios';
+
+let basePath = window.location.pathname;
+if (window.location.pathname.substr(-1) !== '/') {
+  let l = window.location.pathname.split('/');
+  l.pop();
+  basePath = l.join('/');
+}
+
+const instance = axios.create({
+  baseURL: window.location.origin + basePath
+});
+
+export default instance;
diff --git a/gulpfile.js b/gulpfile.js
index c6bbe2a..ef2f391 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -7,6 +7,7 @@ let eslint = require('gulp-eslint');
 let gulp = require('gulp');
 let gulpif = require('gulp-if');
 let gutil = require('gulp-util');
+let path = require('path');
 let sass = require('gulp-sass');
 let sourcemaps = require('gulp-sourcemaps');
 let uglify = require('gulp-uglify');
@@ -92,7 +93,10 @@ let webpackConfig = {
     ]
   },
   resolve: {
-    extensions: ['', '.js']
+    extensions: ['', '.js'],
+    alias: {
+      axios$: path.resolve(__dirname, dirs.src, dirs.js, 'axios.js')
+    }
   },
   watch: webpackWatch
 };
diff --git a/server/views/layout.pug b/server/views/layout.pug
index c78d5aa..069b5e4 100644
--- a/server/views/layout.pug
+++ b/server/views/layout.pug
@@ -2,7 +2,7 @@ doctype html
 html
   head
     title= title
-    link(rel='stylesheet' href='/style.css')
+    link(rel='stylesheet' href='style.css')
   body
     block content
-    script(src='/app.js')
+    script(src='app.js')

I aliased axios to make a custom instance that gets its baseUrl from current window location minus last part of path if no trailing slash (so /flood/api is /flood/ but /flood/ stays as /flood/), and I changed the assets to be relative too (so the browser does the same axios trick on its own).

It would still be better as a configurable I think, but I hope it helps anyway

[bluecmd]

I will need this as well, it would be a much appreciated enhancement :-)

[sklirg]

The solution posted by @Meroje works fine for me, on a domain like example.org/sklirg/flood/. I'd love to see this make its way into master. :)

[onedr0p]

Please add this, a lot of people run apps thru a reverse proxy. Thanks!

[bb10]

I need this too, please. Thanks!

The solution posted by @Meroje also doesn't seem to allow me to login. For example.org/flood/ I still see example.org/auth/verify and example.org/auth/authenticate, which means those can't be reached.

[onedr0p]

Hi Guys, I forked Flood and removed the Auth system and added a baseUrl of /flood feel free to use my fork if you are looking for these features. I'll try to keep it updated to what @jfurrow commits here until he adds these features,,

https://github.com/onedr0p/flood

[jfurrow]

Sorry for the immense delay on this! I'll work on it next, I promise!

[Meroje]

@bb10 make sure to run npm run build-assets as it is not done for you on start as it used to (which is good)

[jfurrow]

I'm adding support for this in https://github.com/jfurrow/flood/pull/239. This should suit your needs, let me know if you run into any issues.

[onedr0p]

Thanks!

[bb10]

I'm running into these issues:

For example, hosting flood in https://foo.bar/flood results in https://foo.bar/flood not working and https://foo.bar/flood/ works. The / on the end is needed for it to function, otherwise it fails.

When trying to login it will try to load https://foo.bar/floodauth/verify?somenumber instead of https://foo.bar/flood/auth/verify?somenumber, so there is a missing / between the base and the auth subfolder. I tried adding a / at the end of the baseURI option in config.js, but that doesn't help.

[jfurrow]

Hey @bb10 sorry for the delay. I'm reopening this and will look into the issue ASAP, it'll be a simple fix.

[jfurrow]

@bb10 Can you check out the branch bug/fix-baseuri-prefix-suffix and try again? (run git fetch origin && git checkout origin/bug/fix-baseuri-prefix-suffix && npm start)

This works for me using an nginx proxy with or without the trailing slash.

[bb10]

@jfurrow Thank you! That seems to work! Now I have a new (unrelated?) problem though.
It seems to get stuck while loading. Everything is checked except "Torrent Taxonomy" and "Data Transfer Rate Details".

Edge shows these errors in app.js over and over:
Unhandled promise rejection TypeError: Unable to get property 'all' of undefined or null reference
app.js (2,12367)
Unhandled promise rejection TypeError: Unable to get property 'length' of undefined or null reference
app.js (2,12367)

Firefox tells me:
Unhandled promise rejection TypeError: t is undefined app.js:2:12390
Unhandled promise rejection TypeError: e.state.statusCount is undefined app.js:2:12390
Unhandled promise rejection TypeError: r.download is undefined app.js:2:12390
Unhandled promise rejection TypeError: e.status is undefined app.js:2:12390

Opera tells me:
Uncaught (in promise) TypeError: Cannot read property 'length' of undefined app.js:33
Uncaught (in promise) TypeError: Cannot read property 'includes' of undefined app.js:32
Uncaught (in promise) TypeError: Cannot read property 'all' of undefined app.js:39

[jfurrow]

@bb10 I'll take a look ASAP... in the mean time can you look at the output of the Node.js server and see what it says? It should show each request made, including the URL and the response status.

[bb10]

@jfurrow I'm not sure where to find that. Not very familiar with node.js.

[jfurrow]

@bb10 When you run Flood (by running npm start) it will start outputting each request that it receives. This is the response status that I'm curious about.

[squaresmile]

I hope this helps. When accessing example.com/flood, it also only shows a blank page. I only proxy /flood to flood
GET / 304 9.103 ms - -
However, when I get go to flood.example.com/flood I got the same behaviour like @bb10. For flood.example.com I proxy the whole subdomain to flood

GET / 304 51.077 ms - -
GET /style.css 304 2.731 ms - -
GET /app.js 304 6.346 ms - -
GET /fonts/Roboto-regular/Roboto-regular.woff2 304 4.398 ms - -
GET /fonts/Roboto-500/Roboto-500.woff2 304 4.110 ms - -
GET /flood/auth/verify?1488329581539 200 32.903 ms - 286
GET /fonts/Roboto-italic/Roboto-italic.woff2 304 2.598 ms - -
GET /fonts/Roboto-700/Roboto-700.woff2 304 1.683 ms - -
GET /flood/api/history?snapshot=fiveMin 200 38.085 ms - 286
GET /flood/api/stats 304 29.571 ms - -
GET /flood/api/notifications?limit=10&start=0 200 50.677 ms - 286
GET /flood/api/client/torrents 200 65.166 ms - 286
GET /flood/api/client/settings 304 77.320 ms - -
GET /flood/api/settings 304 89.618 ms - -
GET /flood/api/client/torrents/taxonomy 304 12.464 ms - -
GET /favicon.ico 304 12.898 ms - -
GET /favicon.ico 304 15.808 ms - -
GET /flood/api/history?snapshot=fiveMin 304 21.237 ms - -
GET /flood/api/notifications?limit=10&start=0 304 39.176 ms - -
GET /flood/api/client/torrents 304 51.741 ms - -
GET /flood/api/client/torrents/taxonomy 304 11.165 ms - -
GET /flood/api/history?snapshot=fiveMin 304 13.432 ms - -
GET /flood/api/notifications?limit=10&start=0 304 10.725 ms - -
GET /flood/api/client/torrents 304 15.290 ms - -
GET /flood/api/client/torrents/taxonomy 304 11.630 ms - -

[bluecmd]

I'm going to be a positive voice here and say that this works for me, and I don't have any problems with the reverse proxying - thanks for fixing!

[bmbove]

@squaresmile I had this issue. It seems like it's not routing the assets directory correctly. Rather than messing with js, I moved everything in ./server/assets to ./server/assets/{subfolder} as a quick workaround just to get it running.

edit: NM, see #284

[jfurrow]

Thanks @bmbove, I'll put this here for visibility.

You need to be sure that your reverse proxy is forwarding _all_ requests to the Flood server. With nginx, that is as simple as the following:

location /flood/ {
  rewrite ^/flood/(.*) /$1 break;
  proxy_pass http://flood_host:flood_port;
}