Build and serve React assets

DesignSafe-CI · Feb 28, 2024 · 1ea8673 · 1ea8673
1 parent 4701e11
commit 1ea8673
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 3 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -8,4 +8,8 @@ coverage
 .docs
 .github
 .pytest_cache
-data
+data
+
+client/node_modules
+client/.nx
+client/dist
diff --git a/client/project.json b/client/project.json
@@ -10,7 +10,7 @@
       "defaultConfiguration": "production",
       "options": {
         "outputPath": "dist/client",
-        "base": "/static"
+        "base": "/static/react-assets"
       },
       "configurations": {
         "development": {

diff --git a/client/index.html → client/react-assets.html b/client/index.html → client/react-assets.html
diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -2,6 +2,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import path from 'path';
 
 export default defineConfig({
   root: __dirname,
@@ -30,6 +31,11 @@ export default defineConfig({
     commonjsOptions: {
       transformMixedEsModules: true,
     },
+    rollupOptions: {
+      input: {
+        imports: path.resolve(__dirname, 'react-assets.html'),
+      },
+    },
   },
 
   test: {

diff --git a/conf/docker/Dockerfile b/conf/docker/Dockerfile
@@ -6,6 +6,15 @@ RUN npm ci
 COPY . /designsafe/
 RUN npm run build
 
+FROM node:20 as node_nx_build
+COPY client/package.json client/package-lock.json /designsafe/
+WORKDIR /designsafe/client
+RUN npm ci
+
+COPY client/ /designsafe/client/
+RUN npm run build
+
+
 
 FROM python:3.11-buster
 
@@ -46,9 +55,15 @@ RUN groupadd --gid 816877 G-816877 && \
     useradd --uid 458981 --gid G-816877 -m --shell /bin/bash tg458981 -d /home/tg458981
 
 COPY --from=node_build /designsafe/ /srv/www/designsafe
+
+COPY --from=node_nx_build /designsafe/client/dist/client/ /srv/www/designsafe/designsafe/static/react-assets/
+COPY --from=node_nx_build /designsafe/client/dist/client/react-assets.html /srv/www/designsafe/designsafe/templates/react-assets.html
+
 RUN chown tg458981:G-816877 /srv/www/designsafe /srv/www/designsafe/*
 RUN chown -R tg458981:G-816877 /srv/www/designsafe/designsafe
 
+
+
 USER tg458981
 
 WORKDIR /srv/www/designsafe
diff --git a/designsafe/apps/data/templates/data/data_depot.j2 b/designsafe/apps/data/templates/data/data_depot.j2
@@ -121,7 +121,10 @@ Data Depot
         <script type="module" src="http://localhost:4200/static/@vite/client"></script>
         <script type="module" src="http://localhost:4200/static/src/main.tsx"></script>
         {% else %}
-        <!--TODO: setup non-dev static import for React code-->
+        <!--setup non-dev static import for React code-->
+        {% endif %}
+        {% if react_flag and not debug %}
+            {% include react-assets.html %} 
         {% endif %}
     {% if not react_flag %}
     <script src="<%= htmlWebpackPlugin.files.js %>"></script>