feat: build an image that uses runtime configuration

tutormfe/patches/caddyfile

@@ -1,4 +1,11 @@
 {{ MFE_HOST }}{$default_site_port} {
+	@mfe_config_api {
+		path /api/mfe_config/v1*
+		query mfe=*
+	}
+	# TODO: Can we save a round trip by making this a rewrite instead of a redirect?
+	redir @mfe_config_api //{{ LMS_HOST }}/api/mfe_config/v1?mfe={http.request.uri.query.mfe}
+
     respond / 204
     request_body {
         max_size 2MB

tutormfe/patches/local-docker-compose-dev-services

@@ -15,6 +15,7 @@
         - ../plugins/mfe/build/mfe/env/production
         - ../plugins/mfe/build/mfe/env/development
     environment:
+        - "APP_ID={{ app['name'] }}"
         - "PORT={{ app['port'] }}"
         {%- for key, value in app.get("env", {}).get("production", {}).items() %}
         - "{{ key }}={{ value }}"

tutormfe/patches/local-docker-compose-prod-services

@@ -1,6 +1,4 @@
 # MFE
 mfe:
     image: {{ MFE_DOCKER_IMAGE }}
-    build:
-        context: ../plugins/mfe/build/mfe/
     restart: unless-stopped

tutormfe/patches/openedx-lms-common-settings

@@ -1,3 +1,4 @@
 {% if MFE_LEARNING_MFE_APP %}
 FEATURES["PERSISTENT_GRADES_ENABLED_FOR_ALL_TESTS"] = True
-{% endif %}
+{% endif %}
+ENABLE_MFE_CONFIG_API = {% if MFE_ENABLE_DYNAMIC_CONFIG %}True{% else %}False{% endif %}

tutormfe/patches/openedx-lms-development-settings

@@ -17,3 +17,17 @@ CORS_ORIGIN_WHITELIST.append("http://{{ MFE_HOST }}:{{ app["port"] }}")
 LOGIN_REDIRECT_WHITELIST.append("{{ MFE_HOST }}:{{ app["port"] }}")
 CSRF_TRUSTED_ORIGINS.append("{{ MFE_HOST }}:{{ app["port"] }}")
 {% endfor %}
+
+{% if MFE_ENABLE_DYNAMIC_CONFIG %}
+{# TODO: Make sure the generated Python below is indented so that it is easier to read. #}
+
+{# TODO: Sometimes, in dev mode, MFEs fail to call the config API and retrieve these settings, because they try to authenticate with LMS first, which of course doesn't work because they haven't loaded their config yet. #}
+
+MFE_CONFIG = {{ MFE_ENV_COMMON['development'] }}
+
+MFE_CONFIG_OVERRIDES = {
+    {%- for app in iter_values_named(suffix="MFE_APP") %}
+	"{{ app["name"] }}": {{ app.get("env", {}) }},
+	{%- endfor %}
+}
+{% endif %}

tutormfe/patches/openedx-lms-production-settings

@@ -14,3 +14,15 @@ PROFILE_MICROFRONTEND_URL = "{% if ENABLE_HTTPS %}https://{% else %}http://{% en
 LOGIN_REDIRECT_WHITELIST.append("{{ MFE_HOST }}")
 CORS_ORIGIN_WHITELIST.append("{% if ENABLE_HTTPS %}https://{% else %}http://{% endif %}{{ MFE_HOST }}")
 CSRF_TRUSTED_ORIGINS.append("{{ MFE_HOST }}")
+
+{% if MFE_ENABLE_DYNAMIC_CONFIG %}
+{# TODO: Make sure the generated Python below is indented so that it is easier to read. #}
+
+MFE_CONFIG = {{ MFE_ENV_COMMON['production'] }}
+
+MFE_CONFIG_OVERRIDES = {
+    {%- for app in iter_values_named(suffix="MFE_APP") %}
+	"{{ app["name"] }}": {{ app.get("env", {}) }},
+	{%- endfor %}
+}
+{% endif %}

tutormfe/plugin.py

@@ -6,13 +6,54 @@
 
 from .__about__ import __version__
 
+
 config = {
     "defaults": {
         "VERSION": __version__,
         "DOCKER_IMAGE": "{{ DOCKER_REGISTRY }}overhangio/openedx-mfe:{{ MFE_VERSION }}",
         "HOST": "apps.{{ LMS_HOST }}",
         "COMMON_VERSION": "{{ OPENEDX_COMMON_VERSION }}",
         "CADDY_DOCKER_IMAGE": "{{ DOCKER_IMAGE_CADDY }}",
+        "ENABLE_DYNAMIC_CONFIG": True,
+        "ENV_COMMON": {
+            "production": {
+                "NODE_ENV": "production",
+                "ACCESS_TOKEN_COOKIE_NAME": "edx-jwt-cookie-header-payload",
+                "BASE_URL": "{{ MFE_HOST }}",
+                "CSRF_TOKEN_API_PATH": "/csrf/api/v1/token",
+                "CREDENTIALS_BASE_URL": "",
+                "DISCOVERY_API_BASE_URL": "{% if DISCOVERY_HOST is defined %}{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ DISCOVERY_HOST }}{% endif %}",
+                "ECOMMERCE_BASE_URL": "",
+                "ENABLE_NEW_RELIC": "false",
+                "FAVICON_URL": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/favicon.ico",
+                "LANGUAGE_PREFERENCE_COOKIE_NAME": "openedx-language-preference",
+                "LMS_BASE_URL": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}",
+                "LOGIN_URL": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/login",
+                "LOGO_URL": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/theming/asset/images/logo.png",
+                "LOGO_TRADEMARK_URL": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/theming/asset/images/logo.png",
+                "LOGO_WHITE_URL": "",
+                "LOGOUT_URL": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/logout",
+                "MARKETING_SITE_BASE_URL": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}",
+                "PUBLISHER_BASE_URL": "",
+                "REFRESH_ACCESS_TOKEN_ENDPOINT": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/login_refresh",
+                "SEGMENT_KEY": "",
+                "SITE_NAME": "{{ PLATFORM_NAME|replace(\"'\", \"'\\''\")|replace(\" \", \"\\ \") }}",
+                "STUDIO_BASE_URL": "{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ CMS_HOST }}",
+                "USER_INFO_COOKIE_NAME": "user-info",
+            },
+            "development": {
+                "NODE_ENV": "development",
+                "DISCOVERY_API_BASE_URL": "{% if DISCOVERY_HOST is defined %}http://{{ DISCOVERY_HOST }}:8381{% endif %}",
+                "LMS_BASE_URL": "http://{{ LMS_HOST }}:8000",
+                "LOGIN_URL": "http://{{ LMS_HOST }}:8000/login",
+                "LOGO_URL": "http://{{ LMS_HOST }}:8000/theming/asset/images/logo.png",
+                "LOGO_TRADEMARK_URL": "http://{{ LMS_HOST }}:8000/theming/asset/images/logo.png",
+                "LOGOUT_URL": "http://{{ LMS_HOST }}:8000/logout",
+                "MARKETING_SITE_BASE_URL": "http://{{ LMS_HOST }}:8000",
+                "REFRESH_ACCESS_TOKEN_ENDPOINT": "http://{{ LMS_HOST }}:8000/login_refresh",
+                "STUDIO_BASE_URL": "http://{{ CMS_HOST }}:8001",
+            },
+        },
         "ACCOUNT_MFE_APP": {
             "name": "account",
             "repository": "https://github.com/edx/frontend-app-account",

tutormfe/templates/mfe/build/mfe/Dockerfile

@@ -63,11 +63,15 @@ CMD ["npm", "run", "start"]
 ######## {{ app["name"] }} (production)
 FROM {{ app["name"] }}-dev AS {{ app["name"] }}
 COPY ./env/production /openedx/env/production
+{% if MFE_ENABLE_DYNAMIC_CONFIG %}
+RUN echo "APP_ID={{ app['name'] }}" >> /openedx/env/production.override
+{% else %}
 RUN touch /openedx/env/production.override \
   {%- for key, value in app.get("env", {}).get("production", {}).items() %}
   && echo "{{ key }}='{{ value }}'" >> /openedx/env/production.override \
   {%- endfor %}
   && echo "done setting production overrides"
+{% endif %}
 RUN bash -c "set -a && source /openedx/env/production && source /openedx/env/production.override && npm run build"
 
 {% endfor %}

tutormfe/templates/mfe/build/mfe/env/development

@@ -1,12 +1,17 @@
-DISCOVERY_API_BASE_URL={% if DISCOVERY_HOST is defined %}http://{{ DISCOVERY_HOST }}:8381{% endif %}
-LMS_BASE_URL=http://{{ LMS_HOST }}:8000
-LOGIN_URL=http://{{ LMS_HOST }}:8000/login
-LOGO_URL=http://{{ LMS_HOST }}:8000/theming/asset/images/logo.png
-LOGO_TRADEMARK_URL=http://{{ LMS_HOST }}:8000/theming/asset/images/logo.png
-LOGOUT_URL=http://{{ LMS_HOST }}:8000/logout
-MARKETING_SITE_BASE_URL=http://{{ LMS_HOST }}:8000
-NODE_ENV=development
-REFRESH_ACCESS_TOKEN_ENDPOINT=http://{{ LMS_HOST }}:8000/login_refresh
-STUDIO_BASE_URL=http://{{ CMS_HOST }}:8001
+{% if MFE_ENABLE_DYNAMIC_CONFIG %}
+
+{# TODO: Is it safe to assume that this is always the base URL when we're running in dev mode? #}
+MFE_CONFIG_API_URL=http://local.overhang.io:8000/api/mfe_config/v1
+
+{% else %}
+
+MFE_CONFIG_API_URL=
+
+{% for env_key, env_value in MFE_ENV_COMMON['development'].items() %}
+{# TODO: Will this break if env_value contains single quotes? #}
+{{ env_key }}='{{ env_value }}'
+{% endfor %}
+
+{% endif %}
 
 {{ patch("mfe-env-development") }}

tutormfe/templates/mfe/build/mfe/env/production

@@ -1,26 +1,16 @@
-{# https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/micro_frontends/index.html#required-environment-variables #}
-ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
-BASE_URL={{ MFE_HOST }}
-CSRF_TOKEN_API_PATH=/csrf/api/v1/token
-CREDENTIALS_BASE_URL=
-DISCOVERY_API_BASE_URL={% if DISCOVERY_HOST is defined %}{% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ DISCOVERY_HOST }}{% endif %}
-ECOMMERCE_BASE_URL=
-ENABLE_NEW_RELIC=false
-FAVICON_URL={% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/favicon.ico
-LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
-LMS_BASE_URL={% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}
-LOGIN_URL={% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/login
-LOGO_URL={% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/theming/asset/images/logo.png
-LOGO_TRADEMARK_URL={% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/theming/asset/images/logo.png
-LOGO_WHITE_URL=
-LOGOUT_URL={% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/logout
-MARKETING_SITE_BASE_URL={% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}
-NODE_ENV=production
-PUBLISHER_BASE_URL=
-REFRESH_ACCESS_TOKEN_ENDPOINT={% if ENABLE_HTTPS %}https{% else %}http{% endif %}://{{ LMS_HOST }}/login_refresh
-SEGMENT_KEY=
-SITE_NAME={{ PLATFORM_NAME|replace("'", "'\\''")|replace(" ", "\ ") }}
-STUDIO_BASE_URL={{ "https" if ENABLE_HTTPS else "http" }}://{{ CMS_HOST }}
-USER_INFO_COOKIE_NAME=user-info
+{% if MFE_ENABLE_DYNAMIC_CONFIG %}
+
+MFE_CONFIG_API_URL=/api/mfe_config/v1
+
+{% else %}
+
+MFE_CONFIG_API_URL=
+
+{% for env_key, env_value in MFE_ENV_COMMON['production'].items() %}
+{# TODO: Will this break if env_value contains single quotes? #}
+{{ env_key }}='{{ env_value }}'
+{% endfor %}
+
+{% endif %}
 
 {{ patch("mfe-env-production") }}