1541: initial work on vite and upgrade node

sinejespersen · sinejespersen · commit 1645604e013c · 2024-06-03T12:28:50.000+02:00
diff --git a/ vite-env.d.ts b/ vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -29,17 +29,18 @@ services:
       - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
 
   node:
-    image: node:14
+    image: node:20
     command: yarn start
     networks:
       - app
     working_dir: /app
+    ports: 
+      - '3000'
     environment:
       - NODE_ENV=development
     volumes:
       - .:/app:delegated
     healthcheck:
-      test: [ "CMD", "curl", "-f", "http://node:3000/tags" ]
       interval: 5s
       timeout: 10s
       retries: 3
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <title>OS2Display admin</title>
+  </head>
+  <body class="bg-light">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+      <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@hello-pangea/dnd": "^16.0.0",
     "@paciolan/remote-component": "^2.11.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "@vitejs/plugin-react": "^4.3.0",
     "bootstrap": "^5.0.2",
     "dayjs": "^1.10.7",
     "dompurify": "^2.3.3",
@@ -21,7 +22,6 @@
     "prop-types": "^15.7.2",
     "query-string": "^7.1.1",
     "react": "^18.2.0",
-    "react-app-rewired": "^2.1.8",
     "react-bootstrap": "^1.6.1",
     "react-color-palette": "^6.1.0",
     "react-dayjs": "^0.3.2",
@@ -40,7 +40,8 @@
     "react-toastify": "^8.1.0",
     "rrule": "^2.7.2",
     "typescript": "^4.4.2",
-    "ulid": "^2.3.0"
+    "ulid": "^2.3.0",
+    "vite": "^5.2.11"
   },
   "scripts": {
     "lint:js": "eslint --ext .js --ext .jsx ./src",
@@ -49,10 +50,9 @@
     "lint:scss:fix": "stylelint --fix \"./src/**/*.scss\"",
     "check-coding-standards": "yarn lint:js && yarn lint:scss",
     "apply-coding-standards": "yarn lint:js:fix && yarn lint:scss:fix",
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-scripts eject"
+    "start": "vite --host 0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -85,8 +85,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "2.3.2",
     "prettier-plugin-jsdoc": "^0.3.24",
-    "react-scripts": "4.0.3",
-    "sass": "^1.35.2",
+    "sass": "^1.77.2",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recommended-scss": "^4.3.0",
diff --git a/public/index.html b/public/index.html
diff --git a/src/app.jsx b/src/app.jsx
@@ -36,12 +36,12 @@ import AuthHandler from "./auth-handler";
 import LoadingComponent from "./components/util/loading-component/loading-component";
 import ModalProvider from "./context/modal-context/modal-provider";
 import UsersList from "./components/users/users-list";
-import "react-toastify/dist/ReactToastify.css";
-import "./app.scss";
 import ActivationCodeList from "./components/activation-code/activation-code-list";
 import ActivationCodeCreate from "./components/activation-code/activation-code-create";
 import ActivationCodeActivate from "./components/activation-code/activation-code-activate";
 import ConfigLoader from "./config-loader";
+import "react-toastify/dist/ReactToastify.css";
+import "./app.scss";
 
 /**
  * App component.
diff --git a/src/app.scss b/src/app.scss
@@ -1,4 +1,4 @@
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 
 html {
   height: -webkit-fill-available;
diff --git a/src/components/media/media-list.scss b/src/components/media/media-list.scss
@@ -1,4 +1,4 @@
-@import "~bootstrap/scss/bootstrap/";
+@import "../../../node_modules/bootstrap/scss/bootstrap/";
 
 .media-item {
   img {
diff --git a/src/components/navigation/nav-items/nav-items.scss b/src/components/navigation/nav-items/nav-items.scss
@@ -1,5 +1,5 @@
 @use "sass:math";
-@import "~bootstrap/scss/bootstrap/";
+@import "../../../../node_modules/bootstrap/scss/bootstrap/";
 
 .nav-item {
   .nav-link {
diff --git a/src/components/navigation/sidebar/sidebar.scss b/src/components/navigation/sidebar/sidebar.scss
@@ -1,4 +1,4 @@
-@import "~bootstrap/scss/bootstrap/";
+@import "../../../../node_modules/bootstrap/scss/bootstrap/";
 
 .sidebar-nav {
   &.nav-dark {
diff --git a/src/components/screen/util/grid-generation-and-select.jsx b/src/components/screen/util/grid-generation-and-select.jsx
@@ -1,7 +1,7 @@
 import { React, useState } from "react";
 import PropTypes from "prop-types";
 import { Tabs, Tab, Alert } from "react-bootstrap";
-import { createGridArea, createGrid } from "os2display-grid-generator";
+// import { createGridArea, createGrid } from "os2display-grid-generator";
 import { useTranslation } from "react-i18next";
 import { uniqWith } from "lodash";
 import idFromUrl from "../../util/helpers/id-from-url";
@@ -35,7 +35,7 @@ function GridGenerationAndSelect({
   const configColumns = grid?.columns || 1;
   const configRows = grid?.rows || 1;
   const gridTemplateAreas = {
-    gridTemplateAreas: createGrid(configColumns, configRows),
+    // gridTemplateAreas: createGrid(configColumns, configRows),
   };
 
   /**
@@ -105,7 +105,7 @@ function GridGenerationAndSelect({
                           ? "grid-item selected"
                           : "grid-item "
                       }
-                      style={{ gridArea: createGridArea(data.gridArea) }}
+                      // style={{ gridArea: createGridArea(data.gridArea) }}
                     >
                       {data.title}
                     </div>
diff --git a/src/components/slide/preview/remote-component-wrapper.jsx b/src/components/slide/preview/remote-component-wrapper.jsx
@@ -2,7 +2,7 @@ import { React, useEffect, useState } from "react";
 import { Button } from "react-bootstrap";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { useRemoteComponent } from "./remote-component-helper";
+// import { useRemoteComponent } from "./remote-component-helper";
 import ErrorBoundary from "../../../error-boundary";
 import "./remote-component-wrapper.scss";
 
@@ -32,7 +32,7 @@ function RemoteComponentWrapper({
 }) {
   const { t } = useTranslation("common");
   const [remoteComponentSlide, setRemoteComponentSlide] = useState(null);
-  const [loading, err, Component] = useRemoteComponent(url);
+  // const [loading, err, Component] = useRemoteComponent(url);
   const [runId, setRunId] = useState("");
 
   /** Create remoteComponentSlide from slide and mediaData */
@@ -101,7 +101,7 @@ function RemoteComponentWrapper({
           id="EXE-ID-PREVIEW"
         >
           <ErrorBoundary errorText="remote-component.error-boundary-text">
-            {loading && <div />}
+            {/* {loading && <div />}
             {!loading && err == null && remoteComponentSlide && Component && (
               <Component
                 slide={remoteComponentSlide}
@@ -110,7 +110,7 @@ function RemoteComponentWrapper({
                 slideDone={() => {}}
                 executionId="EXE-ID-PREVIEW"
               />
-            )}
+            )} */}
           </ErrorBoundary>
         </div>
       </div>
diff --git a/src/components/util/drag-and-drop-table/drag-and-drop-table.scss b/src/components/util/drag-and-drop-table/drag-and-drop-table.scss
@@ -1,4 +1,5 @@
-@import "~bootstrap/scss/bootstrap/";
+@import "../../../../node_modules/bootstrap/scss/bootstrap/";
+
 .table-draggable-grip {
   &:hover {
     color: $primary;
diff --git a/src/components/util/image-uploader/image-uploader.jsx b/src/components/util/image-uploader/image-uploader.jsx
@@ -4,11 +4,11 @@ import ImageUploading from "react-images-uploading";
 import { Button } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faImage } from "@fortawesome/free-solid-svg-icons";
-import "./image-uploader.scss";
 import { useTranslation } from "react-i18next";
 import Image from "./image";
 import MediaModal from "../../media-modal/media-modal";
 import useModal from "../../../context/modal-context/modal-context-hook";
+import "./image-uploader.scss";
 
 /**
  * @param {object} props The props.
diff --git a/src/components/util/image-uploader/image-uploader.scss b/src/components/util/image-uploader/image-uploader.scss
@@ -1,4 +1,4 @@
-@import "~bootstrap/scss/bootstrap/";
+@import "../../../../node_modules/bootstrap/scss/bootstrap/";
 
 .drag-drop-area {
   height: 150px;
diff --git a/src/config-loader.js b/src/config-loader.js
@@ -11,7 +11,7 @@ const ConfigLoader = {
       if (configData !== null) {
         resolve(configData);
       } else {
-        fetch("/admin/config.json")
+        fetch("/config.json")
           .then((response) => response.json())
           .then((data) => {
             configData = data;
diff --git a/src/index.jsx b/src/index.jsx
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from 'path';
+
+export default defineConfig({
+  base: "/",
+  plugins: [react()],
+  server: {
+    strictPort: true,
+    port: 3000,
+    host: "localhost",
+  },
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import "~bootstrap/scss/bootstrap";`
	`1`	`+@import "bootstrap/scss/bootstrap";`
`2`	`2`
`3`	`3`	`html {`
`4`	`4`	`height: -webkit-fill-available;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import "~bootstrap/scss/bootstrap/";`
	`1`	`+@import "../../../node_modules/bootstrap/scss/bootstrap/";`
`2`	`2`
`3`	`3`	`.media-item {`
`4`	`4`	`img {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import "~bootstrap/scss/bootstrap/";`
	`1`	`+@import "../../../../node_modules/bootstrap/scss/bootstrap/";`
`2`	`2`
`3`	`3`	`.sidebar-nav {`
`4`	`4`	`&.nav-dark {`