Paragon `fallbackThemeUrl` doesn't handle local development ports properly

[brian-smith-tcril]

Using frontend-app-authoring as an example. I tried:

• Pulling down the branch from feat: add design tokens support frontend-app-authoring#1758
• Setting up Tutor, mounting the frontend-app-authoring directory, running npm run dev

What I found:

• No styles loaded
• It was trying to load from http://apps.local.openedx.io/authoring/paragon-theme-core.css
  • That file is available at http://apps.local.openedx.io:2001/authoring/paragon-theme-core.css

I did a little digging and got to

frontend-platform/src/react/hooks/paragon/utils.js

Lines 19 to 27 in e27cd39

	export const fallbackThemeUrl = (url) => {
	const baseUrl = getConfig().BASE_URL || window.location?.origin;
	// validates if the baseurl has the protocol to be interpreted correctly by the browser,
	// if is not present add '//' to use Protocol-relative URL
	const protocol = /^(https?:)?\/\//.test(baseUrl) ? '' : '//';
	return `${protocol}${baseUrl}${basename}${url}`;
	};

where getConfig().BASE_URL was apps.local.openedx.io, while window.location?.origin was http://apps.local.openedx.io:2001.

I was able to hack around it with

bsmith@aximdev:~/code/frontend-platform$ git diff
diff --git a/src/react/hooks/paragon/utils.js b/src/react/hooks/paragon/utils.js
index 6b05deb..196b85d 100644
--- a/src/react/hooks/paragon/utils.js
+++ b/src/react/hooks/paragon/utils.js
@@ -17,7 +17,7 @@ export const removeExistingLinks = (existingLinks) => {
 * @returns {string} The default theme url.
 */
 export const fallbackThemeUrl = (url) => {
-  const baseUrl = getConfig().BASE_URL || window.location?.origin;
+  const baseUrl = (getConfig().BASE_URL && getConfig().ENVIRONMENT !== "development") || window.location?.origin;
 
   // validates if the baseurl has the protocol to be interpreted correctly by the browser,
   // if is not present add '//' to use Protocol-relative URL

but it'd be good to come up with a proper solution.