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
This commit is contained in:
Manuel Stahl 2024-04-18 17:48:53 +02:00 committed by Manuel Stahl
parent 4b1277f653
commit 2e2085cdfe
8 changed files with 2036 additions and 5839 deletions

View file

@ -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/

4
.gitignore vendored
View file

@ -10,6 +10,10 @@
# production
/build
/dist
# vitejs
.vite
# misc
.DS_Store

View file

@ -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)

View file

@ -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

View file

@ -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 {

View file

@ -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%",

6
vite.config.js Normal file
View file

@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});

7772
yarn.lock

File diff suppressed because it is too large Load diff