Adding support for relative URL root path (#5067)

* Backend: Added support for relative URL root.

* Frontend: Changed javascript building design.
	+ Added relative URL root path injection to js builds.

* Frontend: Added support for relative URL root.

* Backend: Fixed hardcoded BBB logo pathname.

Procfile.dev

@@ -1,3 +1,3 @@
 web: bin/rails server -p $PORT
-js: yarn build:development --watch
+js: yarn build:development
 css: yarn build:development:css --watch

app/javascript/helpers/Axios.jsx

@@ -21,7 +21,7 @@ const axiosInstance = axios.create(
     // `baseURL` will be prepended to `url` unless `url` is absolute.
     // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
     // to methods of that instance.
-    baseURL: '/api/v1',
+    baseURL: `${process.env.RELATIVE_URL_ROOT}/api/v1`,
 
     // `headers` are custom headers to be sent
     headers: {

app/javascript/i18n.jsx

@@ -23,7 +23,7 @@ i18next
   .use(HttpApi)
   .init({
     backend: {
-      loadPath: '/api/v1/locales/{{lng}}.json',
+      loadPath: `${process.env.RELATIVE_URL_ROOT}/api/v1/locales/{{lng}}.json`,
     },
     load: 'currentOnly',
     fallbackLng: (locale) => {

app/javascript/main.jsx

@@ -102,6 +102,7 @@ const router = createBrowserRouter(
       <Route path="/rooms/:friendlyId/join" element={<RoomJoin />} />
     </Route>,
   ),
+  { basename: process.env.RELATIVE_URL_ROOT },
 );
 
 const rootElement = document.getElementById('root');

app/services/setting_getter.rb

@@ -31,8 +31,12 @@ def call
                            setting: { name: @setting_name }
                          )
 
-    value = if @setting_name == 'BrandingImage' && setting.image.attached?
-              rails_blob_path setting.image, only_path: true
+    value = if @setting_name == 'BrandingImage'
+              if setting.image.attached?
+                rails_blob_path setting.image, only_path: true
+              else
+                ActionController::Base.helpers.image_path('bbb_logo.png')
+              end
             else
               setting&.value
             end

config.ru

@@ -4,5 +4,8 @@
 
 require_relative 'config/environment'
 
-run Rails.application
+map Greenlight::Application.config.relative_url_root do
+  run Rails.application
+end
+
 Rails.application.load_server

config/application.rb

@@ -62,5 +62,7 @@ class Application < Rails::Application
     config.bigbluebutton_endpoint = File.join(config.bigbluebutton_endpoint, '/api/') unless config.bigbluebutton_endpoint.end_with?('api', 'api/')
 
     config.bigbluebutton_secret = ENV.fetch('BIGBLUEBUTTON_SECRET', '8cd8ef52e8e101574e400365b55e11a6')
+
+    config.relative_url_root = ENV.fetch('RELATIVE_URL_ROOT', '/')
   end
 end

config/environments/test.rb

@@ -76,4 +76,6 @@
 
   # Annotate rendered view with file names.
   # config.action_view.annotate_rendered_view_with_filenames = true
+
+  config.relative_url_root = '/'
 end

esbuild.dev.mjs

@@ -0,0 +1,25 @@
+import * as esbuild from 'esbuild';
+
+const relativeUrlRoot = (process.env.RELATIVE_URL_ROOT || '').replace(/\/$/, '');
+
+await esbuild.build({
+  entryPoints: ['app/javascript/main.jsx'],
+  bundle: true,
+  sourcemap: true,
+  outdir: 'app/assets/builds',
+  loader: {
+    '.png': 'dataurl',
+    '.svg': 'text',
+  },
+  watch: {
+    onRebuild: (error, result) => {
+      if (error) console.error('watch build failed:', error);
+      else console.log('watch build succeeded:', result);
+    },
+  },
+  define: {
+    'process.env.RELATIVE_URL_ROOT': `"${relativeUrlRoot}"`,
+  },
+});
+
+console.log('watch build started');

esbuild.mjs

@@ -0,0 +1,19 @@
+import * as esbuild from 'esbuild';
+
+const relativeUrlRoot = (process.env.RELATIVE_URL_ROOT || '').replace(/\/$/, '');
+
+await esbuild.build({
+  entryPoints: ['app/javascript/main.jsx'],
+  bundle: true,
+  minify: true,
+  outdir: 'app/assets/builds',
+  loader: {
+    '.png': 'dataurl',
+    '.svg': 'text',
+  },
+  define: {
+    'process.env.RELATIVE_URL_ROOT': `"${relativeUrlRoot}"`,
+  },
+});
+
+console.log('watch build finished');

package.json

@@ -37,9 +37,9 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds --loader:.png=dataurl --minify",
+    "build": "node esbuild.mjs",
     "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --style compressed",
-    "build:development": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.png=dataurl",
+    "build:development": "node esbuild.dev.mjs",
     "build:development:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
   },
   "devDependencies": {

sample.env

@@ -61,3 +61,5 @@ REDIS_URL=
 #  [en, ar, fr, es]
 #DEFAULT_LOCALE=en
 
+# Set this if you like to deploy Greenlight on a relative root path other than /
+#RELATIVE_URL_ROOT=/gl