Merge pull request #2086 from wger-project/feature/wger-react-dependencies

Add our react components as a regular dependency

Author: rolandgeider

.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

.yarnrc.yml

@@ -178,7 +178,7 @@ def generate_authors_file(
 
         f.write('\n## Translators\n')
         if translators:
-            for language, translator_data in translators.items():
+            for language, translator_data in sorted(translators.items()):
                 f.write('\n')
                 f.write(f'### {language}\n\n')
                 for author_email, data in translator_data.items():

extras/authors/generate_authors_api.py

@@ -36,23 +36,20 @@ RUN wget -O- https://deb.nodesource.com/setup_22.x | bash - \
       sassc \
       nodejs \
     && ln -s /usr/bin/sassc /usr/bin/sass \
-    && rm -rf /var/lib/apt/lists/* \
-    && corepack enable
+    && rm -rf /var/lib/apt/lists/*
 
 # Build the necessary python wheels
-# Note that the --mount is a workaround for https://github.com/rust-lang/cargo/issues/8719
 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 yarn.lock /home/wger/src
-COPY wger/core/static /home/wger/src/wger/core/static
-RUN --mount=type=tmpfs,target=/root/.cargo pip3 wheel --no-cache-dir --wheel-dir /wheels --group docker . \
-  && yarn install \
-  && yarn 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
 
 
 ########
@@ -94,7 +91,8 @@ RUN chmod 0644 /etc/cron.d/wger \
   && touch /var/log/cron.log
 
 COPY --chown=wger:www-data . /home/wger/src
-COPY --from=builder --chown=wger:wger /home/wger/src/wger/core/static/yarn /home/wger/src/wger/core/static/yarn
+COPY --chown=wger:wger --from=builder /home/wger/src/node_modules /home/wger/src/node_modules
+COPY --chown=wger:wger --from=builder /home/wger/src/wger/core/static/bootstrap-compiled.css /home/wger/src/core/static/bootstrap-compiled.css
 
 # Set up the application
 RUN ln -s /home/wger/static/CACHE /var/www

extras/docker/demo/Dockerfile

@@ -18,11 +18,10 @@ RUN wget -O- https://deb.nodesource.com/setup_22.x | bash - \
         sassc \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/* \
-    && ln -s /usr/bin/yarnpkg /usr/bin/yarn \
     && ln -s /usr/bin/sassc /usr/bin/sass
 
 USER wger
 COPY --chown=wger:wger . /home/wger/src
-RUN yarn install:force \
-    && yarn build:css:sass \
+RUN npm install \
+    && npm run build:css:sass \
     && pip3 install --break-system-packages --user --group dev --editable .

extras/docker/development/Dockerfile

@@ -32,7 +32,6 @@ RUN wget -O- https://deb.nodesource.com/setup_22.x | bash - \
       unzip \
       nodejs \
     && rm -rf /var/lib/apt/lists/* \
-    && corepack enable \
     && mkdir -p /root/src/wger/core/static
 
 
@@ -42,33 +41,32 @@ RUN wget -O- https://deb.nodesource.com/setup_22.x | bash - \
 WORKDIR /root/src
 
 # Build the application
-COPY pyproject.toml /root/src
-COPY wger/version.py /root/src/wger/
-COPY wger/__init__.py /root/src/wger/
-COPY README.md /root/src
+COPY pyproject.toml README.md /root/src/
+COPY wger/version.py wger/__init__.py /root/src/wger/
 
-# NB: the --mount tmpfs is a workaround for https://github.com/rust-lang/cargo/issues/8719
-RUN --mount=type=tmpfs,target=/root/.cargo \
-    pip3 wheel \
+# NB: this was a workound for https://github.com/rust-lang/cargo/issues/8719
+# which was needed when building rust dependencies for arm/v7. If we re-enable
+# the arch, we will probably need to add it again (same for demo, etc).
+# --mount=type=tmpfs,target=/root/.cargo
+RUN pip3 wheel \
       --no-cache-dir \
       --wheel-dir /wheels \
       --group docker . \
     && ln -s /usr/bin/sassc /usr/bin/sass
 
-# Build the JS and CSS files
-COPY package.json yarn.lock .yarnrc.yml ./
+# 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 yarn install \
-    && yarn build:css:sass \
-    && cd .. \
-    && wget https://github.com/wger-project/react/archive/refs/heads/master.zip \
-    && unzip master.zip \
-    && cd react-master \
-    && yarn config set --home enableTelemetry 0 \
-    && yarn config set nodeLinker node-modules \
-    && yarn install \
-    && WGER_STATIC_FOLDER="/root/src/wger/core/static/react" yarn build
-
+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
@@ -88,8 +86,8 @@ EXPOSE 8000
 
 # Set up the application
 COPY --chown=wger:wger . /home/wger/src
-COPY --chown=wger:wger --from=builder /root/src/wger/core/static/yarn /home/wger/src/wger/core/static/yarn
-COPY --chown=wger:wger --from=builder /root/src/wger/core/static/react /home/wger/src/wger/core/static/react
+COPY --chown=wger:wger --from=builder /root/src/node_modules /home/wger/src/node_modules
+COPY --chown=wger:wger --from=builder /root/src/wger/core/static/bootstrap-compiled.css /home/wger/src/core/static/bootstrap-compiled.css
 COPY ${DOCKER_DIR}/settings.py /home/wger/src
 COPY ${DOCKER_DIR}/settings.py /tmp/
 COPY ${DOCKER_DIR}/entrypoint.sh /home/wger/entrypoint.sh