os2display · sinejespersen · May 28, 2024 · May 28, 2024 · May 28, 2024 · May 28, 2024
diff --git a/vite-env.d.ts b/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#246](https://github.com/os2display/display-admin-client/pull/246)
+  - Migrate from CRA to Vite
+  - Upgrade node from 14 -> 20
+
 ## [2.0.2] - 2024-04-25
 
 - [#242](https://github.com/os2display/display-admin-client/pull/242)

diff --git a/config-overrides.js b/config-overrides.js
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,24 +11,21 @@
     "@hello-pangea/dnd": "^16.0.0",
     "@paciolan/remote-component": "^2.11.0",
     "@reduxjs/toolkit": "^1.6.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@vitejs/plugin-react": "^4.3.0",
     "bootstrap": "^5.0.2",
     "dayjs": "^1.10.7",
     "dompurify": "^2.3.3",
+    "eslint": "7.32.0",
     "eslint-plugin-jsdoc": "^35.4.3",
     "focus-trap-react": "^10.2.1",
     "i18next": "^21.6.14",
-    "lodash.find": "^4.2.0",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "lodash.uniqwith": "^4.5.0",
-    "os2display-grid-generator": "^1.0.8",
+    "os2display-grid-generator": "^1.0.10",
     "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",
@@ -47,7 +44,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",
@@ -56,10 +54,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": [
@@ -92,8 +89,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,11 +36,11 @@ 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 "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/slide/slide-manager.jsx b/src/components/slide/slide-manager.jsx
@@ -1,7 +1,7 @@
 import { React, useEffect, useState, useContext } from "react";
 import { useTranslation } from "react-i18next";
-import set from "lodash.set";
 import get from "lodash.get";
+import set from "lodash.set";
 import { ulid } from "ulid";
 import PropTypes from "prop-types";
 import { useDispatch } from "react-redux";

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.js → src/index.jsx b/src/index.js → src/index.jsx
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/src/remote-component.config.js b/src/remote-component.config.js
@@ -1,7 +1,5 @@
-/* eslint-disable global-require */
-/** Dependencies for Remote Components */
-module.exports = {
-  resolve: {
-    react: require("react"),
-  },
+import react from "react";
+
+export const resolve = {
+  react,
 };
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",
+  },
+});