Set edx.org theme as default for edx-platform and MFEs

docker-compose.yml

@@ -707,6 +707,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-account'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-account"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:
@@ -722,6 +724,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-profile'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-profile"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@~2.0.0'
     networks:
       default:
         aliases:
@@ -737,6 +741,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-authn'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-authn"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:
@@ -752,6 +758,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-course-authoring'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-course-authoring"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:
@@ -782,6 +790,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-ora-grading'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-ora-grading"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:
@@ -797,6 +807,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-learner-dashboard'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-learner-dashboard"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:
@@ -812,6 +824,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-learner-record'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-learner-record"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@~2.0.0'
     networks:
       default:
         aliases:
@@ -827,6 +841,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-learning'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-learning"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:
@@ -842,6 +858,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-library-authoring'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-library-authoring"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:
@@ -858,6 +876,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-payment'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-payment"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@^2.0.6'
     networks:
       default:
         aliases:
@@ -873,6 +893,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-program-console'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-program-console"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:
@@ -889,6 +911,8 @@ services:
       service: microfrontend
     working_dir: '/edx/app/frontend-app-publisher'
     container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-publisher"
+    environment:
+      PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
     networks:
       default:
         aliases:

microfrontend.yml

@@ -16,7 +16,18 @@ services:
     #
     # Fail fast if package install fails to avoid mysterious
     # errors later.
-    command: bash -c 'npm ci || exit 1; while true; do npm start; sleep 2; done'
+    command:
+      - bash
+      - -c
+      - |
+          npm ci || exit 1
+          if [ -n "$(printenv PARAGON_BRAND_PACKAGE)" ]; then
+              npx paragon install-theme "$(printenv PARAGON_BRAND_PACKAGE)" || exit 1
+          fi
+          while true; do
+              npm start
+              sleep 2
+          done
     stdin_open: true
     tty: true
     image: node:18

provision-lms.sh

@@ -77,6 +77,9 @@ done
 # Fix missing vendor file by clearing the cache
 # docker compose exec -T  lms bash -e -c 'rm /edx/app/edxapp/edx-platform/.prereqs_cache/Node_prereqs.sha1'
 
+# Set edX theme in LMS and CMS.
+./provision-set-edx-theme.sh
+
 # Create static assets for both LMS and CMS
 for app in "${apps[@]}"; do
     make "dev.static.$app"

provision-set-edx-theme.sh

@@ -0,0 +1,47 @@
+#!/usr/bin/env bash
+
+# This script sets up the edX theme in LMS and CMS.
+
+REPO_URL="https://github.com/edx/edx-themes"
+THEME_DIR="/edx/src/edx-themes/edx-platform"
+DEVSTACK_FILE="../edx-platform/lms/envs/devstack.py"
+
+# Clone the edx-themes repository into the src directory
+cd ../src
+if [ ! -d "edx-themes" ]; then
+    git clone "$REPO_URL"
+else
+    echo "Directory 'edx-themes' already exists. Skipping clone."
+fi
+cd ../devstack
+
+# Uncomment relevant lines in the devstack.py file
+sed -i '' "s|^# from .common import _make_mako_template_dirs|from .common import _make_mako_template_dirs|" "$DEVSTACK_FILE"
+sed -i '' "s|^# ENABLE_COMPREHENSIVE_THEMING = True|ENABLE_COMPREHENSIVE_THEMING = True|" "$DEVSTACK_FILE"
+sed -i '' "s|^# COMPREHENSIVE_THEME_DIRS = \[|COMPREHENSIVE_THEME_DIRS = \[|" "$DEVSTACK_FILE"
+sed -i '' "s|^#     \"/edx/app/edxapp/edx-platform/themes/\"|    \"/edx/app/edxapp/edx-platform/themes/\",|" "$DEVSTACK_FILE"
+sed -i '' "/COMPREHENSIVE_THEME_DIRS = \[/a\\
+\"$THEME_DIR\",
+" "$DEVSTACK_FILE"
+sed -i '' "s|^# \]|]|" "$DEVSTACK_FILE"
+sed -i '' "s|^# TEMPLATES\[1\]\[\"DIRS\"\] = _make_mako_template_dirs|TEMPLATES[1][\"DIRS\"] = _make_mako_template_dirs|" "$DEVSTACK_FILE"
+sed -i '' "s|^# derive_settings(__name__)|derive_settings(__name__)|" "$DEVSTACK_FILE"
+
+
+# Add the theme directory to COMPREHENSIVE_THEME_DIRS if not already present
+if ! grep -qF "$THEME_DIR" "$DEVSTACK_FILE"; then
+  sed -i '' "/COMPREHENSIVE_THEME_DIRS = \[/a\\
+    \"$THEME_DIR\",
+  " "$DEVSTACK_FILE"
+fi
+
+# Set the theme site-wide
+SERVICE_NAME="mysql80"
+DATABASE="edxapp"
+THEME_NAME="edx.org-next"
+SITE_ID=1
+
+docker compose exec -T "$SERVICE_NAME" mysql -e "
+USE $DATABASE;
+INSERT INTO theming_sitetheme (theme_dir_name, site_id) VALUES ('$THEME_NAME', $SITE_ID);
+"