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

@@ -8,4 +8,8 @@ coverage
 .docs
 .github
 .pytest_cache
-data
+data
+
+client/node_modules
+client/.nx
+client/dist

client/project.json

@@ -10,7 +10,7 @@
       "defaultConfiguration": "production",
       "options": {
         "outputPath": "dist/client",
-        "base": "/static"
+        "base": "/static/react-assets"
       },
       "configurations": {
         "development": {

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: {

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

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 %}

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' %}