build: upgrade react-router to framework mode (#3722)

Details:
* Upgrade some packages
* Setup `react-router@v7` to use the framework mode -> see https://reactrouter.com/start/modes for more details about modes. This is what would be `remix` but is now part of react-router.
    * Some source files have been added to support framework mode. This mostly follows the custom node server template -> https://github.com/remix-run/react-router-templates/tree/main/node-custom-server.
* Updated the Dockerfile and other build-related files
    * The most important change is that the UI container now runs `node` instead of `nginx`. The server is an `express` server set-up to serve the UI and the compiled `storybook`.
    * A corresponding PR on `renku` is open (only change is the `runAs` user ID).
* Server-side routing:
    * Routes: `client/src/routes.ts`
        * All routes are rendered from `client/src/routes/catchall.tsx` as client-side routes.
        * This setup can be updated to handle new routes from the server-side.

Author: leafty

.gitignore

@@ -111,3 +111,6 @@ client/.rtk/*Api.ts
 
 # stoybook files
 client/storybook-static
+
+# react-router files
+.react-router/

client/.storybook/main.ts

@@ -9,10 +9,13 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/react-vite",
   ],
-
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {
+      builder: {
+        viteConfigPath: "storybook-vite.config.ts",
+      },
+    },
   },
   typescript: {
     reactDocgen: "react-docgen-typescript",

client/Dockerfile

@@ -8,55 +8,73 @@ WORKDIR /app
 COPY package.json package-lock.json /app/
 RUN npm ci
 
-COPY index.html tsconfig.json tsconfig.node.json vite.config.ts /app/
+COPY react-router.config.ts tsconfig.json tsconfig.node.json vite.config.ts /app/
 COPY public /app/public
-COPY src /app/src/
+COPY src /app/src
+COPY server /app/server
 
 ENV NODE_OPTIONS="--max-old-space-size=4096"
 
 RUN npm run-script build
 
+COPY storybook-vite.config.ts /app/
 COPY .storybook /app/.storybook
 
 RUN npm run storybook-build -- -o storybook-static
 
-FROM nginxinc/nginx-unprivileged:1.27-alpine
+FROM node:22 AS dependencies
 
-COPY --from=builder /app/build /usr/share/nginx/html
-COPY --from=builder /app/storybook-static /usr/share/nginx/html/storybook
-COPY nginx.vh.default.conf /etc/nginx/conf.d/default.conf
+RUN apt-get update && apt-get upgrade --quiet --assume-yes
+
+WORKDIR /app
+
+#? Use only required files.
+COPY package.json package-lock.json /app/
+RUN npm ci --omit=dev
+
+FROM node:22-slim
+
+RUN apt-get update && apt-get upgrade --quiet --assume-yes
+
+USER node
+
+WORKDIR /app
+
+COPY package.json package-lock.json server.js /app/
+COPY --from=dependencies /app/node_modules /app/node_modules
+COPY --from=builder /app/build /app/build
+COPY --from=builder /app/storybook-static /app/storybook-static
 COPY docker-entrypoint.sh /app/docker-entrypoint.sh
 COPY scripts/generate_sitemap.sh /app/scripts/generate_sitemap.sh
 
 # Set up the config files written by docker-entrypoint
 USER root
-RUN touch /usr/share/nginx/html/config.json
-RUN chmod a+r /usr/share/nginx/html/config.json
-RUN chown nginx /usr/share/nginx/html/config.json
-
-RUN touch /usr/share/nginx/html/robots.txt
-RUN chmod a+r /usr/share/nginx/html/robots.txt
-RUN chown nginx /usr/share/nginx/html/robots.txt
+RUN touch /app/build/client/config.json
+RUN chmod a+r /app/build/client/config.json
+RUN chown node /app/build/client/config.json
 
-RUN touch /usr/share/nginx/html/sitemap.xml
-RUN chmod a+r /usr/share/nginx/html/sitemap.xml
-RUN chown nginx /usr/share/nginx/html/sitemap.xml
+RUN touch /app/build/client/robots.txt
+RUN chmod a+r /app/build/client/robots.txt
+RUN chown node /app/build/client/robots.txt
 
-RUN touch /usr/share/nginx/html/privacy-statement.md
-RUN chmod a+r /usr/share/nginx/html/privacy-statement.md
-RUN chown nginx /usr/share/nginx/html/privacy-statement.md
+RUN touch /app/build/client/sitemap.xml
+RUN chmod a+r /app/build/client/sitemap.xml
+RUN chown node /app/build/client/sitemap.xml
 
-RUN touch /usr/share/nginx/html/terms-of-use.md
-RUN chmod a+r /usr/share/nginx/html/terms-of-use.md
-RUN chown nginx /usr/share/nginx/html/terms-of-use.md
+RUN touch /app/build/client/privacy-statement.md
+RUN chmod a+r /app/build/client/privacy-statement.md
+RUN chown node /app/build/client/privacy-statement.md
 
-USER nginx
+RUN touch /app/build/client/terms-of-use.md
+RUN chmod a+r /app/build/client/terms-of-use.md
+RUN chown node /app/build/client/terms-of-use.md
 
+USER node
 
-HEALTHCHECK --interval=20s --timeout=10s --retries=5 CMD test -e /var/run/nginx.pid
+ENV PORT=8080
 
 ARG SHORT_SHA
 ENV RENKU_UI_SHORT_SHA=$SHORT_SHA
 
-ENTRYPOINT ["/bin/sh", "/app/docker-entrypoint.sh"]
-CMD ["nginx", "-g", "daemon off;"]
+ENTRYPOINT ["/bin/bash", "/app/docker-entrypoint.sh"]
+CMD ["node", "/app/server.js"]

client/docker-entrypoint.sh

@@ -16,7 +16,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-export NGINX_PATH=/usr/share/nginx/html
+export NGINX_PATH=/app/build/client
 
 echo "Config file contains the following settings:"
 echo "==================================================="