Copy the files from react-components manually

This allows us to keep the size of the node_modules folder at a somewhat
more manegable size.

.dockerignore

@@ -26,6 +26,10 @@ venv
 /media/
 /static/
 /db/
+/dist/
+/node_modules/
+/wger.egg-info
+/npm-debug.log*
 /extras/open-food-facts/dump/
 /extras/authors/commits_cache/
 /extras/authors/*.md

extras/docker/demo/Dockerfile

@@ -40,16 +40,16 @@ RUN wget -O- https://deb.nodesource.com/setup_22.x | bash - \
 
 # Build the necessary python wheels
 WORKDIR /home/wger/src
-COPY pyproject.toml /home/wger/src
-COPY wger/version.py /home/wger/src/wger/
-COPY wger/__init__.py /home/wger/src/wger/
-COPY README.md /home/wger/src
-COPY package.json /home/wger/src
-COPY package-lock.json /home/wger/src
-COPY wger/core/static /home/wger/src/wger/core/static
-RUN pip3 wheel --no-cache-dir --wheel-dir /wheels --group docker .
-RUN npm ci \
-  && npm run build:css:sass
+COPY README.md pyproject.toml package.json package-lock.json package-lock.json /home/wger/src/
+COPY wger/version.py wger/__init__.py /home/wger/src/wger/
+COPY wger/core/static /root/src/wger/core/static
+RUN npm ci --production \
+    && npm run build:css:sass \
+    && PACKAGE_NAME="@wger-project/react-components" \
+    && PACKAGE_VERSION=$(node -p "require('./package.json').devDependencies['$PACKAGE_NAME']") \
+    && TARBALL=$(npm pack ${PACKAGE_NAME}@${PACKAGE_VERSION}) \
+    && mkdir -p node_modules/${PACKAGE_NAME} \
+    && tar -xzf ${TARBALL} -C node_modules/${PACKAGE_NAME} --strip-components=1
 
 
 ########

extras/docker/production/Dockerfile

@@ -54,11 +54,19 @@ RUN pip3 wheel \
       --group docker . \
     && ln -s /usr/bin/sassc /usr/bin/sass
 
-# Build the JS and CSS files
-COPY package.json package-lock.json ./
+# Fetch the JS and CSS files.
+# For the react-components npm package, we fetch it manually, extract it and move
+# it into node_modules to keep the size of the docker image small(er). Yes, this
+# is hacky and there's probably a better way.
+COPY package.json package-lock.json download-wger-react-components.sh ./
 COPY wger/core/static /root/src/wger/core/static
-RUN npm ci \
-    && npm run build:css:sass
+RUN npm ci --production \
+    && npm run build:css:sass \
+    && PACKAGE_NAME="@wger-project/react-components" \
+    && PACKAGE_VERSION=$(node -p "require('./package.json').devDependencies['$PACKAGE_NAME']") \
+    && TARBALL=$(npm pack ${PACKAGE_NAME}@${PACKAGE_VERSION}) \
+    && mkdir -p node_modules/${PACKAGE_NAME} \
+    && tar -xzf ${TARBALL} -C node_modules/${PACKAGE_NAME} --strip-components=1
 
 ########
 # Final

package.json

@@ -10,15 +10,16 @@
   },
   "homepage": "https://github.com/wger-project/wger",
   "dependencies": {
-    "@wger-project/react-components": "0.1.4",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "5.3.8",
     "datatables.net-bs5": "^2.3.4",
     "devbridge-autocomplete": "^1.5.0",
     "htmx.org": "^2.0.7",
     "jquery": "^3.7.1",
-    "masonry-layout": "^4.2.2",
-    "popper.js": "^1.16.1"
+    "masonry-layout": "^4.2.2"
+  },
+  "devDependencies": {
+    "@wger-project/react-components": "25.10.16"
   },
   "scripts": {
     "build:css:sass": "sass wger/core/static/scss/main.scss wger/core/static/bootstrap-compiled.css"

wger/core/templates/template.html

@@ -69,7 +69,7 @@
         <script src="{% static 'node/jquery/dist/jquery.js' %}"></script>
         <script src="{% static 'node/bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>
         <script src="{% static 'node/htmx.org/dist/htmx.min.js' %}"></script>
-        <script src="{% static 'node/popper.js/dist/umd/popper.js' %}"></script>
+        <script src="{% static 'node/@popperjs/core/dist/umd/popper.js' %}"></script>
         <script src="{% static 'node/devbridge-autocomplete/dist/jquery.autocomplete.min.js' %}">
         </script>
         <script src="{% static 'node/masonry-layout/dist/masonry.pkgd.min.js' %}"></script>

wger/core/templates/template_features.html

@@ -54,7 +54,7 @@
 
     {% compress js %}
         <script src="{% static 'node/bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>
-        <script src="{% static 'node/popper.js/dist/umd/popper.js' %}"></script>
+        <script src="{% static 'node/@popperjs/core/dist/umd/popper.js' %}"></script>
     {% endcompress %}
 
     <title>wger Workout Manager - {% translate "Features" %}</title>