Skip to content

Commit

Permalink
Migrate from react-scripts to vite
Browse files Browse the repository at this point in the history
To future prove our identifier webapp, this change abandons
react-scripts and moves everything to vite as a near seamless transition
from the create-react-app based approach when this app was created.

Reference: https://vitejs.dev/
Related: reactjs/react.dev#5487
  • Loading branch information
longsleep committed Nov 15, 2023
1 parent 870212a commit 816f56a
Show file tree
Hide file tree
Showing 20 changed files with 7,558 additions and 15,797 deletions.
9 changes: 1 addition & 8 deletions identifier/.env
Original file line number Diff line number Diff line change
@@ -1,9 +1,2 @@
PORT=3001
HOST=127.0.0.1
BROWSER=none
ESLINT_NO_DEV_ERRORS=true
REACT_APP_KOPANO_BUILD=0.0.0-dev-env
INLINE_RUNTIME_CHUNK=false
FAST_REFRESH=false
WDS_SOCKET_HOST=0.0.0.0
WDS_SOCKET_PORT=0
VITE_KOPANO_BUILD=0.0.0-dev-env
541 changes: 0 additions & 541 deletions identifier/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

This file was deleted.

783 changes: 0 additions & 783 deletions identifier/.yarn/releases/yarn-3.2.2.cjs

This file was deleted.

893 changes: 893 additions & 0 deletions identifier/.yarn/releases/yarn-4.0.2.cjs

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions identifier/.yarnrc.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
nodeLinker: node-modules
compressionLevel: mixed

enableGlobalCache: false

plugins:
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
spec: "@yarnpkg/plugin-interactive-tools"
nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-3.2.2.cjs
yarnPath: .yarn/releases/yarn-4.0.2.cjs
2 changes: 1 addition & 1 deletion identifier/Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ all: build
build: vendor | src i18n ; $(info building identifier Webapp ...) @
@rm -rf build

REACT_APP_KOPANO_BUILD="${VERSION}" CI=false $(YARN) run build
VITE_KOPANO_BUILD="${VERSION}" CI=false $(YARN) run build

.PHONY: src
src:
Expand Down
2,164 changes: 0 additions & 2,164 deletions identifier/README.react.md

This file was deleted.

2 changes: 1 addition & 1 deletion identifier/api.go
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ func (i *Identifier) writeWebappIndexHTML(rw http.ResponseWriter, req *http.Requ
// FIXME(longsleep): Set a secure CSP. Right now we need `data:` for images
// since it is used. Since `data:` URLs possibly could allow xss, a better
// way should be found for our early loading inline SVG stuff.
rw.Header().Set("Content-Security-Policy", fmt.Sprintf("default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'nonce-%s'; base-uri 'none'; frame-ancestors 'none';", nonce))
rw.Header().Set("Content-Security-Policy", fmt.Sprintf("default-src 'self'; img-src 'self' data:; font-src 'self' data:; script-src 'self'; style-src 'self' 'nonce-%s'; base-uri 'none'; frame-ancestors 'none';", nonce))

// Write index with random nonce to response.
index := bytes.Replace(i.webappIndexHTML, []byte("__CSP_NONCE__"), []byte(nonce), 1)
Expand Down
5 changes: 3 additions & 2 deletions identifier/public/index.html → identifier/index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!doctype html>
<html lang="en">
<head data-kopano-build="%REACT_APP_KOPANO_BUILD%">
<head data-kopano-build="%VITE_KOPANO_BUILD%">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#ffffff">
<link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
<meta property="csp-nonce" content="__CSP_NONCE__">
<title>Sign in to your account</title>
</head>
Expand All @@ -16,5 +16,6 @@
<div></div>
</div>
<div id="root" data-path-prefix="__PATH_PREFIX__"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
55 changes: 31 additions & 24 deletions identifier/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,8 @@
"@fontsource/roboto": "^4.5.8",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@testing-library/dom": "^8.20.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.24",
"@types/node": "^12.20.55",
"@types/react": "^17.0.59",
"@types/react-dom": "^17.0.20",
"@types/react-redux": "^7.1.25",
"@types/redux-logger": "^3.0.9",
"axios": "^0.22.0",
"classnames": "^2.3.2",
"eslint": "^8.52.0",
"glob": "^8.1.0",
"i18next": "^21.10.0",
"i18next-browser-languagedetector": "^6.1.8",
Expand All @@ -32,31 +21,50 @@
"react-redux": "^7.2.9",
"react-router": "^5.3.4",
"react-router-dom": "5.3.4",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.4.2",
"render-if": "^0.1.1",
"typescript": "^4.9.5",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "if-node-version '>= 17' && react-scripts --openssl-legacy-provider start || react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/**/*.{tsx,ts,jsx,js}",
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "vitest",
"lint": "eslint --max-warnings=0 src/**/*.{ts,tsx,js,jsx}",
"licenses": "NODE_PATH=./node_modules node ../scripts/js-license-ranger.js",
"analyze": "source-map-explorer 'build/static/js/*.js'"
"analyze": "source-map-explorer 'build/static/assets/*.js'"
},
"devDependencies": {
"@typescript-eslint/typescript-estree": "^6.8.0",
"@testing-library/dom": "^8.20.1",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^29.5.8",
"@types/node": "^20.9.0",
"@types/react": "^17.0.70",
"@types/react-dom": "^17.0.23",
"@types/react-redux": "^7.1.25",
"@types/redux-logger": "^3.0.12",
"@typescript-eslint/eslint-plugin": "^6.11.0",
"@typescript-eslint/parser": "^6.9.0",
"@typescript-eslint/typescript-estree": "^6.11.0",
"@vitejs/plugin-react": "^4.1.1",
"cldr": "^7.4.0",
"eslint": "^8.53.0",
"eslint-config-react-app-bump": "^1.0.16",
"eslint-plugin-i18next": "^5.2.1",
"i18next-conv": "^12.1.1",
"i18next-parser": "^5.4.0",
"if-node-version": "^1.1.1",
"source-map-explorer": "^1.8.0"
"jsdom": "^22.1.0",
"source-map-explorer": "^1.8.0",
"typescript": "^5.2.2",
"vite": "^4.5.0",
"vite-plugin-checker": "^0.6.2",
"vite-plugin-eslint": "^1.8.1",
"vitest": "^0.34.6"
},
"jest": {
"collectCoverageFrom": [
Expand All @@ -68,8 +76,7 @@
"i18next"
],
"extends": [
"react-app",
"react-app/jest",
"react-app-bump",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:i18next/recommended"
Expand Down Expand Up @@ -106,5 +113,5 @@
"last 1 safari version"
]
},
"packageManager": "yarn@3.2.2"
"packageManager": "yarn@4.0.2"
}
File renamed without changes.
1 change: 0 additions & 1 deletion identifier/src/react-app-env.d.ts

This file was deleted.

2 changes: 1 addition & 1 deletion identifier/src/version.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const build = process.env.REACT_APP_KOPANO_BUILD || '0.0.0-no-proper-build';
const build = import.meta.env.VITE_KOPANO_BUILD || '0.0.0-no-proper-build';

export {
build
Expand Down
1 change: 1 addition & 0 deletions identifier/src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
8 changes: 8 additions & 0 deletions identifier/tests/setup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/vitest';

// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
cleanup();
});
22 changes: 13 additions & 9 deletions identifier/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
{
"compilerOptions": {
"target": "es5",
"target": "ESNext",
"useDefineForClassFields": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
"DOM",
"DOM.Iterable",
"ESNext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"module": "ESNext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"plugins": [
]
"jsx": "react-jsx"
},
"include": [
"src"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
12 changes: 12 additions & 0 deletions identifier/tsconfig.node.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": [
"src/vite-env.d.ts",
"vite.config.ts"
]
}
40 changes: 40 additions & 0 deletions identifier/vite.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { defineConfig, splitVendorChunkPlugin } from 'vite';
import react from '@vitejs/plugin-react';
import checker from 'vite-plugin-checker';

export default defineConfig((env) => {
return {
build: {
outDir: 'build',
assetsDir: 'static/assets',
manifest: 'asset-manifest.json',
sourcemap: true,
},
base: './',
server: {
port: 3001,
strictPort: true,
host: '127.0.0.1',
hmr: {
protocol: 'ws',
host: '127.0.0.1',
clientPort: 3001,
},
},
plugins: [
react(),
env.mode !== 'test' && checker({
typescript: true,
eslint: {
lintCommand: 'eslint --max-warnings=0 src',
},
}),
splitVendorChunkPlugin(),
],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './tests/setup.js',
},
};
});

0 comments on commit 816f56a

Please sign in to comment.