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
pull/511/head
Manuel Stahl 4 months ago committed by Manuel Stahl
parent 4b1277f653
commit 2e2085cdfe

@ -1,6 +1,7 @@
# Exclude a bunch of stuff which can make the build context a larger than it needs to be # Exclude a bunch of stuff which can make the build context a larger than it needs to be
tests/ tests/
build/ build/
dist/
lib/ lib/
node_modules/ node_modules/
electron_app/ electron_app/

4
.gitignore vendored

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

@ -79,8 +79,6 @@ You have three options:
context: https://github.com/Awesome-Technologies/synapse-admin.git context: https://github.com/Awesome-Technologies/synapse-admin.git
# args: # args:
# - NODE_OPTIONS="--max_old_space_size=1024" # - NODE_OPTIONS="--max_old_space_size=1024"
# # see #266, PUBLIC_URL must be without surrounding quotation marks
# - PUBLIC_URL=/synapse-admin
ports: ports:
- "8080:80" - "8080:80"
restart: unless-stopped 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](./screenshots.jpg) ![Screenshots](./screenshots.jpg)

@ -14,8 +14,6 @@ services:
# if you're building on an architecture other than amd64, make sure # if you're building on an architecture other than amd64, make sure
# to define a maximum ram for node. otherwise the build will fail. # to define a maximum ram for node. otherwise the build will fail.
# - NODE_OPTIONS="--max_old_space_size=1024" # - NODE_OPTIONS="--max_old_space_size=1024"
# default is .
# - PUBLIC_URL=/synapse-admin
ports: ports:
- "8080:80" - "8080:80"
restart: unless-stopped restart: unless-stopped

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
@ -13,16 +12,8 @@
manifest.json provides metadata used when your web app is installed on a 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/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="./manifest.json" />
<!-- <link rel="shortcut icon" href="./favicon.ico" />
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`.
-->
<title>Synapse-Admin</title> <title>Synapse-Admin</title>
<style> <style>
body { body {

@ -10,15 +10,23 @@
"url": "https://github.com/Awesome-Technologies/synapse-admin" "url": "https://github.com/Awesome-Technologies/synapse-admin"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"@testing-library/jest-dom": "^6.0.0", "@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^15.0.2", "@testing-library/react": "^15.0.2",
"@testing-library/user-event": "^14.5.2", "@testing-library/user-event": "^14.5.2",
"@vitejs/plugin-react": "^4.0.0",
"babel-jest": "^29.7.0",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-config-react-app": "^7.0.1", "eslint-config-react-app": "^7.0.1",
"eslint-plugin-prettier": "^5.1.3", "eslint-plugin-prettier": "^5.1.3",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-fetch-mock": "^3.0.3", "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": { "dependencies": {
"@haleos/ra-language-german": "^1.0.0", "@haleos/ra-language-german": "^1.0.0",
@ -27,30 +35,45 @@
"@mui/material": "^5.15.15", "@mui/material": "^5.15.15",
"@mui/styles": "^5.15.15", "@mui/styles": "^5.15.15",
"papaparse": "^5.4.1", "papaparse": "^5.4.1",
"ra-language-farsi": "^4.2.0",
"ra-language-french": "^4.16.15", "ra-language-french": "^4.16.15",
"ra-language-italian": "^3.13.1", "ra-language-italian": "^3.13.1",
"ra-language-farsi": "^4.2.0",
"react": "^18.0.0", "react": "^18.0.0",
"react-admin": "^4.16.15", "react-admin": "^4.16.15",
"react-dom": "^18.0.0", "react-dom": "^18.0.0"
"react-scripts": "^5.0.1"
}, },
"scripts": { "scripts": {
"start": "REACT_APP_VERSION=$(git describe --tags) react-scripts start", "start": "REACT_APP_VERSION=$(git describe --tags) vite serve",
"build": "REACT_APP_VERSION=$(git describe --tags) react-scripts build", "build": "REACT_APP_VERSION=$(git describe --tags) vite build",
"fix:other": "yarn prettier --write", "fix:other": "yarn prettier --write",
"fix:code": "yarn test:lint --fix", "fix:code": "yarn test:lint --fix",
"fix": "yarn fix:code && yarn fix:other", "fix": "yarn fix:code && yarn fix:other",
"prettier": "prettier --ignore-path .gitignore \"**/*.{js,jsx,json,md,scss,yaml,yml}\"", "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:lint": "eslint --ignore-path .gitignore --ext .js,.jsx .",
"test:style": "yarn prettier --list-different", "test:style": "yarn prettier --list-different",
"test": "yarn test:style && yarn test:lint && yarn test:code", "test": "yarn test:style && yarn test:lint && yarn test:code"
"eject": "react-scripts eject" },
"babel": {
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"
}, },
"jest": {
"testEnvironment": "jsdom",
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
]
},
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",

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

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save