From 8abe49d9da1dc5b915b13af88f33e1034140039e Mon Sep 17 00:00:00 2001
From: Jake Rosenberg <jrosenberg@tacc.utexas.edu>
Date: Wed, 27 Mar 2024 15:46:40 -0500
Subject: [PATCH] task/DES-2708: Build and serve React assets on deploy (#1173)

* Build and serve React assets

* fix template string

* Add custom render block for react assets
---
 .dockerignore                                 |  6 +++-
 client/project.json                           |  2 +-
 client/{index.html => react-assets.html}      |  0
 client/vite.config.ts                         |  6 ++++
 conf/docker/Dockerfile                        | 15 ++++++++++
 .../apps/data/templates/data/data_depot.j2    | 30 ++++++++-----------
 designsafe/templates/base.j2                  |  1 +
 7 files changed, 40 insertions(+), 20 deletions(-)
 rename client/{index.html => react-assets.html} (100%)

diff --git a/.dockerignore b/.dockerignore
index 37a0a977b4..0de5cabe87 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -8,4 +8,8 @@ coverage
 .docs
 .github
 .pytest_cache
-data
\ No newline at end of file
+data
+
+client/node_modules
+client/.nx
+client/dist
diff --git a/client/project.json b/client/project.json
index ab8bb5f36b..a14436f35c 100644
--- 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 b/client/react-assets.html
similarity index 100%
rename from client/index.html
rename to client/react-assets.html
diff --git a/client/vite.config.ts b/client/vite.config.ts
index dd9bf3b56f..6ed597a8a6 100644
--- 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
index f9fb25c2c0..129fc182fd 100644
--- 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
index 01aa558dff..857be21df0 100644
--- a/designsafe/apps/data/templates/data/data_depot.j2
+++ b/designsafe/apps/data/templates/data/data_depot.j2
@@ -106,25 +106,19 @@ Data Depot
     </div>
     {%endif%}
 
-    {% addtoblock "css" %}
-    {% endaddtoblock %}
-
-    {% addtoblock "js" %}
-        {% if debug and react_flag %}
-        <script type="module">
-            import RefreshRuntime from 'http://localhost:4200/static/@react-refresh';
-            RefreshRuntime.injectIntoGlobalHook(window);
-            window.$RefreshReg$ = () => {};
-            window.$RefreshSig$ = () => (type) => type;
-            window.__vite_plugin_react_preamble_installed__ = true;
-        </script>
-        <script type="module" src="http://localhost:4200/static/@vite/client"></script>
-        <script type="module" src="http://localhost:4200/static/src/main.tsx"></script>
+    {% addtoblock "react_assets" %}
+        {% if debug %}
+            <script type="module">
+                import RefreshRuntime from 'http://localhost:4200/static/@react-refresh';
+                RefreshRuntime.injectIntoGlobalHook(window);
+                window.$RefreshReg$ = () => {};
+                window.$RefreshSig$ = () => (type) => type;
+                window.__vite_plugin_react_preamble_installed__ = true;
+            </script>
+            <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-->
+            {% include "react-assets.html" %} 
         {% endif %}
-    {% if not react_flag %}
-    <script src="<%= htmlWebpackPlugin.files.js %>"></script>
-    {% endif %}
     {% endaddtoblock %}
 {% endblock %}
diff --git a/designsafe/templates/base.j2 b/designsafe/templates/base.j2
index c61398b765..f5730eab33 100644
--- a/designsafe/templates/base.j2
+++ b/designsafe/templates/base.j2
@@ -37,6 +37,7 @@
       <link href="{% static 'styles/ng-designsafe.css' %}" rel="stylesheet">
       {% block styles %}{% endblock %}
       {% render_block "css" %}
+      {% render_block "react_assets" %}
       <base href="/">
       {% recaptcha_init 'en' %}