refactor(client): use Vite instead of create-react-app (#2924)

Fixes #2879.

Migrate the UI client from Create-React-App to Vite:
* Use vite
* Move `.js` files to `.jsx` when relevant
* Update test framework to `vitest`
* Update storybook to use vite

.github/workflows/test-and-ci.yml

@@ -24,7 +24,7 @@ jobs:
         env:
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Run test client
-        run: npm test
+        run: npm run test
         env:
           CI: true
       - name: Run format client
@@ -76,6 +76,8 @@ jobs:
           node-version: "18.17.1"
       - name: Install dependencies
         run: npm clean-install
+      - name: Install Playwright
+        run: npx playwright install --with-deps
       - name: Build Storybook and run tests
         run: npm run storybook-compile-and-test
 
@@ -106,15 +108,21 @@ jobs:
       - name: Install client
         uses: cypress-io/github-action@v6
         with:
-          build: npm run install-client
+          build: npm run client:install
+          runTests: false
+          working-directory: tests
+      - name: Build client
+        uses: cypress-io/github-action@v6
+        with:
+          build: npm run client:build
           runTests: false
           working-directory: tests
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
           browser: chrome
-          start: npm run start
-          wait-on: http://localhost:3000
+          start: npm run client:preview
+          wait-on: http://localhost:3000/
           wait-on-timeout: 300
           working-directory: tests
       - uses: actions/upload-artifact@v3

client/.storybook/main.ts

@@ -1,26 +1,22 @@
-import { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   staticDirs: ["../public"],
   addons: [
-    "@storybook/addon-links",
+    "@storybook/addon-docs",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
-    "addon-redux",
-    {
-      name: "@storybook/addon-docs",
-      options: {
-        configureJSX: true,
-      },
-    },
+    "@storybook/addon-links",
+    "@storybook/react-vite",
   ],
 
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
-
+  core: { builder: "@storybook/builder-vite" },
   typescript: {
     reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {
@@ -30,7 +26,6 @@ const config: StorybookConfig = {
       },
     },
   },
-
   docs: {
     autodocs: true,
   },

client/.storybook/preview.tsx

@@ -1,26 +1,34 @@
 import { Preview } from "@storybook/react";
-import { enhancer as withReduxEnhancer } from "addon-redux";
+import React from "react";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
+
+import type { AppContextType } from "../src/utils/context/appContext";
 import AppContext from "../src/utils/context/appContext";
+import { DEFAULT_APP_PARAMS } from "../src/utils/context/appParams.constants";
 import { createStore } from "../src/utils/helpers/EnhancedState";
+import { createCoreApiVersionedUrlConfig } from "../src/utils/helpers/url";
 
 import "../src/styles/index.scss";
 
 // This how the documentation recommends introducing the store into storybook
 // https://storybook.js.org/addons/@dreamworld/addon-redux/
-export const store = createStore({}, [withReduxEnhancer]);
+export const store = createStore({});
 
 export const decorators = [
   (Story) => {
-    const appContext = {
+    const appContext: AppContextType = {
       client: {
         baseUrl: "http://localhost",
         uploadFileURL: () => "http://localhost",
       },
-
-      params: {},
+      coreApiVersionedUrlConfig: createCoreApiVersionedUrlConfig({
+        coreApiVersion: "/",
+      }),
       location: "location",
+      model: undefined,
+      notifications: undefined,
+      params: { ...DEFAULT_APP_PARAMS },
     };
     return (
       <MemoryRouter initialEntries={["/"]}>

client/Dockerfile

@@ -1,36 +1,26 @@
-FROM node:18.17.1-alpine AS builder
+FROM node:18.17.1 AS builder
 
-RUN apk update && apk add python3 make g++
+RUN apt-get update && apt-get upgrade --quiet --assume-yes
 
 WORKDIR /app
 
-#: Use only required files.
-COPY package.json package-lock.json tsconfig.json /app/
+#? Use only required files.
+COPY package.json package-lock.json /app/
+RUN npm ci
+
+COPY index.html tsconfig.json tsconfig.node.json vite.config.ts /app/
 COPY public /app/public
 COPY src /app/src/
-COPY craco.config.js /app/craco.config.js
 
 ENV NODE_OPTIONS="--max-old-space-size=4096"
-ARG SHORT_SHA
-ENV RENKU_UI_SHORT_SHA=$SHORT_SHA
-
-# Delete this after reactstrap is released
-RUN apk update && apk upgrade && \
-    apk add --no-cache git
 
-# There is some incompatibility between craco and react-scripts >4
-# that causes problems with linting. Lint errors should have been
-# caught before we get here, so we can turn this off.
-# But look into https://github.com/gsoft-inc/craco/pull/219 for a better fix
-ENV DISABLE_ESLINT_PLUGIN=true
-RUN npm ci && \
-    npm run-script build
+RUN npm run-script build
 
 COPY .storybook /app/.storybook
 
 RUN npm run storybook-build -- -o storybook-static
 
-FROM nginxinc/nginx-unprivileged:1.20-alpine
+FROM nginxinc/nginx-unprivileged:1.25-alpine
 
 COPY --from=builder /app/build /usr/share/nginx/html
 COPY --from=builder /app/storybook-static /usr/share/nginx/html/storybook

client/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="An open-source platform for reproducible and collaborative data science. Share code, data and computational environments whilst tracking provenance and lineage of research objects."
+    />
+
+    <meta
+      property="og:title"
+      content="Reproducible Data Science | Open Research | Renku"
+    />
+    <meta
+      property="og:description"
+      content="Work together on data science projects reproducibly. Share code, data and computational environments whilst accessing free computing resources."
+    />
+
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+
+    <title>Reproducible Data Science | Open Research | Renku</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root" class="d-flex flex-column min-vh-100"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

client/nginx.vh.default.conf

@@ -36,15 +36,15 @@ server {
     index index.html;
 
     location / {
-         try_files $uri $uri/ /index.html;
+        try_files $uri $uri/ /index.html;
     }
 
-    location ^~ /static/css/ {
+    location ^~ /assets/ {
       expires 365d;
       add_header Cache-Control "public";
     }
 
-    location ^~ /static/media/ {
+    location ^~ /static/ {
       expires 365d;
       add_header Cache-Control "public";
     }
@@ -59,6 +59,10 @@ server {
       add_header Cache-Control "public";
     }
 
+    location /index.html {
+      add_header Cache-Control "no-cache, max-age=-1";
+    }
+
     location /config.json {
       add_header Cache-Control "no-cache, max-age=-1";
     }