From bd5b31156f595075ae05c94e955d553762f4f991 Mon Sep 17 00:00:00 2001 From: Khemissi Amir Date: Mon, 27 Mar 2023 17:16:25 +0100 Subject: [PATCH] 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 | 2 +- app/javascript/helpers/Axios.jsx | 2 +- app/javascript/i18n.jsx | 2 +- app/javascript/main.jsx | 1 + app/services/setting_getter.rb | 8 ++++++-- config.ru | 5 ++++- config/application.rb | 2 ++ config/environments/test.rb | 2 ++ esbuild.dev.mjs | 25 +++++++++++++++++++++++++ esbuild.mjs | 19 +++++++++++++++++++ package.json | 4 ++-- sample.env | 2 ++ 12 files changed, 66 insertions(+), 8 deletions(-) create mode 100644 esbuild.dev.mjs create mode 100644 esbuild.mjs diff --git a/Procfile.dev b/Procfile.dev index 24bdada5dc..f52919f027 100644 --- a/Procfile.dev +++ b/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 diff --git a/app/javascript/helpers/Axios.jsx b/app/javascript/helpers/Axios.jsx index c85e284e69..1c016abe5b 100644 --- a/app/javascript/helpers/Axios.jsx +++ b/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: { diff --git a/app/javascript/i18n.jsx b/app/javascript/i18n.jsx index bd31ec6b95..9856fc8b36 100644 --- a/app/javascript/i18n.jsx +++ b/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) => { diff --git a/app/javascript/main.jsx b/app/javascript/main.jsx index 3b216d646a..5b793e6425 100644 --- a/app/javascript/main.jsx +++ b/app/javascript/main.jsx @@ -102,6 +102,7 @@ const router = createBrowserRouter( } /> , ), + { basename: process.env.RELATIVE_URL_ROOT }, ); const rootElement = document.getElementById('root'); diff --git a/app/services/setting_getter.rb b/app/services/setting_getter.rb index 5a47d7f34a..4c5f435279 100644 --- a/app/services/setting_getter.rb +++ b/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 diff --git a/config.ru b/config.ru index 6dc8321802..7243336b96 100644 --- a/config.ru +++ b/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 diff --git a/config/application.rb b/config/application.rb index 288ba39971..79f85e93b1 100644 --- a/config/application.rb +++ b/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 diff --git a/config/environments/test.rb b/config/environments/test.rb index bd82b69b26..04fd774ae3 100644 --- a/config/environments/test.rb +++ b/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 diff --git a/esbuild.dev.mjs b/esbuild.dev.mjs new file mode 100644 index 0000000000..fb48838bee --- /dev/null +++ b/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'); diff --git a/esbuild.mjs b/esbuild.mjs new file mode 100644 index 0000000000..7b76ffbfb7 --- /dev/null +++ b/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'); diff --git a/package.json b/package.json index 5acf7f49fa..dd490ec7ee 100644 --- a/package.json +++ b/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": { diff --git a/sample.env b/sample.env index b9f0036d21..4b56f22482 100644 --- a/sample.env +++ b/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