build: switch to new edx-platform asset build

TODO:
* Test dev & prod builds one last time
* Test watching again

Part of: openedx/edx-platform#31895

changelog.d/20240318_154804_kyle_assets_build.md

@@ -0,0 +1,29 @@
+<!--
+Create a changelog entry for every new user-facing change. Please respect the following instructions:
+- Indicate breaking changes by prepending an explosion 💥 character.
+- Prefix your changes with either [Bugfix], [Improvement], [Feature], [Security], [Deprecation].
+- You may optionally append "(by @<author>)" at the end of the line, where "<author>" is either one (just one)
+  of your GitHub username, real name or affiliated organization. These affiliations will be displayed in
+  the release notes for every release.
+-->
+
+- 💥[Feature] The `openedx-assets` command has been replaced with `npm run` commands.
+   This will slightly speed up edx-platform static asset & theme build, and in the future,
+   it will allow the edx-platform image to be cached more effectively.
+   Here is a migration guide, where each command is to be run in the `lms` or `cms` container.
+   Note that most of these commands are run in the Dockerfile for you, so you may not need to change anything:
+    | **Before**                                     | **After**                      |
+    | `openedx-assets build   --env=prod ARGS`       | `npm run build -- ARGS`
+    | `openedx-assets build   --env=dev  ARGS`       | `npm run build-dev -- ARGS`
+	| `openedx-assets common  --env=prod ARGS`       | `npm run compile-sass     -- --skip-themes ARGS`
+	| `openedx-assets common  --env=dev  ARGS`       | `npm run compile-sass-dev -- --skip-themes ARGS`
+    | `openedx-assets webpack --env=prod ARGS`       | `npm run webpack -- ARGS`
+    | `openedx-assets webpack --env=dev  ARGS`       | `npm run webpack-dev -- ARGS`
+	| `openedx-assets npm`                           | `npm run postinstall` (`npm ci` runs this automatically)
+	| `openedx-assets xmodule`                       | (no longer necessary)
+	| `openedx-assets collect  ARGS`                 | `./manage.py lms collecstatic --noinput ARGS && ./manage.py cms collectstatic ARGS`
+    | `openedx-assets watch-themes ARGS`             | `npm run watch-themes -- ARGS`
+   For example, if you previously executed `tutor dev run lms openedx-assets build --env=dev --theme=mytheme`,
+   you should now execute `tutor dev run lms npm run build-dev -- --theme=mytheme`.
+
+

docs/dev.rst

@@ -99,9 +99,9 @@ To open a python shell in the LMS or CMS, run::
 
 You can then import edx-platform and django modules and execute python code.
 
-To rebuild assets, you can use the ``openedx-assets`` command that ships with Tutor::
+To rebuild assets, you can run the ``build-dev`` NPM script that comes with edx-plaform::
 
-    tutor dev run lms openedx-assets build --env=dev
+    tutor dev run lms npm run build-dev
 
 
 .. _specialized for developer usage:

tutor/templates/build/openedx/Dockerfile

@@ -199,27 +199,22 @@ ENV PATH /openedx/bin:${PATH}
 
 {{ patch("openedx-dockerfile-pre-assets") }}
 
-# Collect production assets. By default, only assets from the default theme
+# Build & collect production assets. By default, only assets from the default theme
 # will be processed. This makes the docker image lighter and faster to build.
-# Only the custom themes added to /openedx/themes will be compiled.
-# Here, we don't run "paver update_assets" which is slow, compiles all themes
-# and requires a complex settings file. Instead, we decompose the commands
-# and run each one individually to collect the production static assets to
-# /openedx/staticfiles.
-ENV NO_PYTHON_UNINSTALL 1
-ENV NO_PREREQ_INSTALL 1
-# We need to rely on a separate openedx-assets command to accelerate asset processing.
-# For instance, we don't want to run all steps of asset collection every time the theme
-# is modified.
-RUN openedx-assets xmodule \
-    && openedx-assets npm \
-    && openedx-assets webpack --env=prod \
-    && openedx-assets common
+RUN npm run postinstall  # Postinstall artifacts are stuck in nodejs-requirements layer. Create them here too.
+RUN npm run compile-sass -- --skip-themes
+RUN npm run webpack
+
+# Now that the default theme is built, build any custom themes in /openedx/themes.
 COPY --chown=app:app ./themes/ /openedx/themes/
-RUN openedx-assets themes \
-    && openedx-assets collect --settings=tutor.assets \
-    # De-duplicate static assets with symlinks
-    && rdfind -makesymlinks true -followsymlinks true /openedx/staticfiles/
+RUN npm run compile-sass -- --skip-default --theme-dir /openedx/themes
+
+# and finally, collect assets for the production image,
+# de-duping assets with symlinks.
+RUN ./manage.py lms collectstatic --noinput --settings=tutor.assets && \
+    ./manage.py cms collectstatic --noinput --settings=tutor.assets && \
+    # De-duplicate static assets with symlinks \
+    rdfind -makesymlinks true -followsymlinks true /openedx/staticfiles/
 
 # Create a data directory, which might be used (or not)
 RUN mkdir /openedx/data
@@ -272,7 +267,7 @@ ENV PYTHONBREAKPOINT=ipdb.set_trace
 # static assets, then production assets will be served instead.
 RUN rm -r /openedx/staticfiles && \
     mkdir /openedx/staticfiles && \
-    openedx-assets webpack --env=dev
+	npm run build-dev
 
 {{ patch("openedx-dev-dockerfile-post-python-requirements") }}
 

tutor/templates/dev/docker-compose.yml

@@ -43,7 +43,7 @@ services:
   # Additional service for watching theme changes
   watchthemes:
     <<: *openedx-service
-    command: openedx-assets watch-themes --env dev
+    command: npm run watch-sass
     restart: unless-stopped
 
   {% if RUN_ELASTICSEARCH and is_docker_rootless() %}

tutor/templates/jobs/init/mounted-edx-platform.sh

@@ -20,7 +20,7 @@ pip install -e .
 npm clean-install
 
 # Regenerate static assets.
-openedx-assets build --env=dev
+npm run build-dev
 
 set -x
 echo "Done setting up bind-mounted edx-platform."