Use vitejs instead of react-scripts

- react-scripts are not maintained anymore - vitejs is well suited for single page applications Fixes #335 See https://darekkay.com/blog/create-react-app-to-vite/ Change-Id: Ib884748e373094a640b576894ff67b98c3584ec8
3 months ago · 2e2085cdfe
parent 4b1277f653
commit 2e2085cdfe
8 changed files with 2080 additions and 5883 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,6 +1,7 @@
 # Exclude a bunch of stuff which can make the build context a larger than it needs to be
 tests/
 build/
+dist/
 lib/
 node_modules/
 electron_app/
--- a/.gitignore
+++ b/.gitignore
@ -10,6 +10,10 @@

 # production
 /build
+/dist
+
+# vitejs
+.vite

 # misc
 .DS_Store
--- a/README.md
+++ b/README.md
@ -79,8 +79,6 @@ You have three options:
        context: https://github.com/Awesome-Technologies/synapse-admin.git
        # args:
        #   - NODE_OPTIONS="--max_old_space_size=1024"
-        #   # see #266, PUBLIC_URL must be without surrounding quotation marks
-        #   - PUBLIC_URL=/synapse-admin
      ports:
        - "8080:80"
      restart: unless-stopped
@ -122,6 +120,40 @@ services:
    ...
 ```

+### Serving Synapse-Admin on a different path
+
+We do not support directly changing the path where Synapse-Admin is served. Instead please use a reverse proxy if you need to move Synapse-Admin to a different base path. If you want to serve multiple applications with different paths on the same domain, you need a reverse proxy anyway.
+
+Example for Traefik:
+
+`docker-compose.yml`
+
+```yml
+services:
+  traefik:
+    image: traefik:mimolette
+    restart: unless-stopped
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    labels:
+      - "traefik.http.middlewares.admin.redirectregex.regex:^(.*)/admin/?"
+      - "traefik.http.middlewares.admin.redirectregex.replacement:$${1}/admin/"
+      - "traefik.http.middlewares.admin_path.replacepathregex.regex:^/admin/(.*)"
+      - "traefik.http.middlewares.admin_path.replacepathregex.replacement:/$1"
+
+  synapse-admin:
+    image: awesometechnologies/synapse-admin:latest
+    restart: unless-stopped
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.synapse-admin.priority=3"
+      - "traefik.http.routers.synapse-admin.rule=Host(`example.com`)&&PathPrefix(`/admin`)"
+      - "traefik.http.routers.synapse-admin.middlewares=admin,admin_path"
+```
+
 ## Screenshots

 ![Screenshots](./screenshots.jpg)
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -14,8 +14,6 @@ services:
    # if you're building on an architecture other than amd64, make sure
    # to define a maximum ram for node. otherwise the build will fail.
    #   - NODE_OPTIONS="--max_old_space_size=1024"
-    # default is .
-    #   - PUBLIC_URL=/synapse-admin
    ports:
      - "8080:80"
    restart: unless-stopped
--- a/public/index.html
+++ b/public/index.html
@ -2,7 +2,6 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
@ -13,16 +12,8 @@
      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="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="./manifest.json" />
+    <link rel="shortcut icon" href="./favicon.ico" />
    <title>Synapse-Admin</title>
    <style>
      body {
--- a/package.json
+++ b/package.json
@ -10,15 +10,23 @@
    "url": "https://github.com/Awesome-Technologies/synapse-admin"
  },
  "devDependencies": {
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
    "@testing-library/jest-dom": "^6.0.0",
    "@testing-library/react": "^15.0.2",
    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.0.0",
+    "babel-jest": "^29.7.0",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-prettier": "^5.1.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
    "jest-fetch-mock": "^3.0.3",
-    "prettier": "^3.2.5"
+    "prettier": "^3.2.5",
+    "react-test-renderer": "^18.2.0",
+    "vite": "^5.0.0"
  },
  "dependencies": {
    "@haleos/ra-language-german": "^1.0.0",
@ -27,30 +35,45 @@
    "@mui/material": "^5.15.15",
    "@mui/styles": "^5.15.15",
    "papaparse": "^5.4.1",
+    "ra-language-farsi": "^4.2.0",
    "ra-language-french": "^4.16.15",
    "ra-language-italian": "^3.13.1",
-    "ra-language-farsi": "^4.2.0",
    "react": "^18.0.0",
    "react-admin": "^4.16.15",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^5.0.1"
+    "react-dom": "^18.0.0"
  },
  "scripts": {
-    "start": "REACT_APP_VERSION=$(git describe --tags) react-scripts start",
-    "build": "REACT_APP_VERSION=$(git describe --tags) react-scripts build",
+    "start": "REACT_APP_VERSION=$(git describe --tags) vite serve",
+    "build": "REACT_APP_VERSION=$(git describe --tags) vite build",
    "fix:other": "yarn prettier --write",
    "fix:code": "yarn test:lint --fix",
    "fix": "yarn fix:code && yarn fix:other",
    "prettier": "prettier --ignore-path .gitignore \"**/*.{js,jsx,json,md,scss,yaml,yml}\"",
-    "test:code": "react-scripts test",
+    "test:code": "jest",
    "test:lint": "eslint --ignore-path .gitignore --ext .js,.jsx .",
    "test:style": "yarn prettier --list-different",
-    "test": "yarn test:style && yarn test:lint && yarn test:code",
-    "eject": "react-scripts eject"
+    "test": "yarn test:style && yarn test:lint && yarn test:code"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ]
+    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ]
+  },
  "browserslist": {
    "production": [
      ">0.2%",
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});
--- a/yarn.lock
+++ b/yarn.lock