web: Migrate to vite

- update dependencies - update imports - add vite config closes #131 Signed-off-by: Mikhail Petrov <mike@nspcc.ru>
nspcc-dev · Mar 3, 2025 · a5e83f7 · a5e83f7
1 parent 2df0001
commit a5e83f7
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 127 deletions.
diff --git a/.env b/.env
@@ -1 +1 @@
-REACT_APP_NEOFS=""
+VITE_NEOFS=""
diff --git a/Makefile b/Makefile
@@ -14,18 +14,20 @@ $(SITE_DIR):
 	docker run \
 	-v $$(pwd)/src:/usr/src/app/src \
 	-v $$(pwd)/public:/usr/src/app/public \
+	-v $$(pwd)/index.html:/usr/src/app/index.html \
+	-v $$(pwd)/vite.config.mjs:/usr/src/app/vite.config.mjs \
 	-v $$(pwd)/package.json:/usr/src/app/package.json \
 	-v $$(pwd)/.env:/usr/src/app/.env \
 	-v $$(pwd)/$(SITE_DIR):/usr/src/app/$(SITE_DIR) \
 	-e CURRENT_UID=$(CURRENT_UID) \
-	-w /usr/src/app node:14-alpine \
-	sh -c 'npm install && REACT_APP_VERSION=$(VERSION) npm run build && chown -R $$CURRENT_UID: $(SITE_DIR)'
+	-w /usr/src/app node:18-alpine \
+	sh -c 'npm install && VITE_VERSION=$(VERSION) npm run build && chown -R $$CURRENT_UID: $(SITE_DIR)'
 
 start:
 	docker run \
 	-p $(PORT):3000 \
 	-v `pwd`:/usr/src/app \
-	-w /usr/src/app node:14-alpine \
+	-w /usr/src/app node:18-alpine \
 	sh -c 'npm install --silent && npm run build && npm install -g serve && serve -s $(SITE_DIR) -p 3000'
 
 release: $(SITE_DIR)

diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ Send.NeoFS is a simple example of integration with NeoFS network via HTTP protoc
 
 - docker
 - make
-- node (`14+`)
+- node (`18+`)
 
 # Make instructions
 
@@ -29,14 +29,14 @@ Send.NeoFS is a simple example of integration with NeoFS network via HTTP protoc
 * Get release directory with tar.gz using `make release`
 
 Set variables in the `.env` file before executing the commands:
-- `REACT_APP_NEOFS` - Path to SendFS
+- `VITE_NEOFS` - Path to SendFS
 
 # Send.NeoFS local up
 
  - Start [neofs-dev-env](https://github.com/nspcc-dev/neofs-dev-env)
  - Update `.env`
  - Execute `npm install`
- - Run local `npm start`
+ - Run local `npm run build`
 
 # Deployment to production
 

diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Send.NeoFS</title>
+    <meta charset='utf-8'>
+    <link rel="icon" href="/img/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="title" content="Send.NeoFS">
+    <meta name="description" content="HTTP-gate demo for distributed object storage">
+    <meta property="og:url" content="https://send.fs.neo.org">
+    <meta property="og:title" content="Send.NeoFS">
+    <meta property="og:description" content="HTTP-gate demo for distributed object storage">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="/img/cover.png">
+    <meta name="theme-color" content="#29363b" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; connect-src 'self' https://send.fs.neo.org; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self'; form-action 'self';  base-uri 'self';">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;800&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -3,40 +3,34 @@
   "version": "0.6.4",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@types/react": "^18.2.41",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "bulma": "^0.9.4",
-    "react": "^17.0.2",
+    "copy-to-clipboard": "^3.3.3",
+    "react": "^19.0.0",
     "react-bulma-components": "^4.1.0",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^6.10.0"
   },
   "scripts": {
-    "start": "REACT_APP_VERSION=$(make version) GENERATE_SOURCEMAP=false react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false BUILD_PATH='./send.fs.neo.org' react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "dev": "VITE_VERSION=$(make version) vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "devDependencies": {
-    "dotenv": "^16.0.3",
-    "react-scripts": "^5.0.1",
-    "typescript": "^4.9.5"
+    "@vitejs/plugin-react": "^4.3.4",
+    "dotenv": "^16.4.7",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/App.tsx b/src/App.tsx
@@ -73,8 +73,8 @@ function getCookie(name: string) {
 export const App = () => {
 	const location: any = useLocation();
 	const [environment] = useState<Environment>({
-		version: process.env.REACT_APP_VERSION,
-		server: process.env.REACT_APP_NEOFS,
+		version: import.meta.env.VITE_VERSION,
+		server: import.meta.env.VITE_NEOFS,
 	});
 	const [user] = useState<User | null>(getCookie('X-Bearer') && getCookie('X-Attribute-Email') ? {
 		XBearer: getCookie('X-Bearer'),
@@ -166,7 +166,7 @@ export const App = () => {
 				<Navbar.Menu
 					className={menuActive ? 'is-active' : ''}
 				>
-					<Navbar.Container>
+					<Navbar.Container className="navbar-start">
 						<Link
 							to="/"
 							className="navbar-item"

diff --git a/src/Home.tsx b/src/Home.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from "react-router-dom";
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import copy from 'copy-to-clipboard';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { UploadedObject } from './App.tsx';
 import api from './api.ts';
@@ -238,22 +238,20 @@ const Home = ({
 														>
 															{uploadedObject.filename}
 														</a>
-														<CopyToClipboard
-															text={`${environment.server ? environment.server : document.location.origin}/gate/get/${uploadedObject.object_id}`}
-															onCopy={() => {
+														<div
+															onClick={() => {
+																copy(`${environment.server ? environment.server : document.location.origin}/gate/get/${uploadedObject.object_id}`);
 																setCopy(`name${index}`);
 																setTimeout(() => {
 																	setCopy(false);
 																}, 700);
 															}}
 														>
-															<div>
-																<FontAwesomeIcon icon={['fas', 'copy']} />
-																{isCopied === `name${index}` && (
-																	<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
-																)}
-															</div>
-														</CopyToClipboard>
+															<FontAwesomeIcon icon={['fas', 'copy']} />
+															{isCopied === `name${index}` && (
+																<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
+															)}
+														</div>
 														<div
 															onClick={() => onDownload(uploadedObject.object_id, uploadedObject.filename)}
 															style={{ lineHeight: 0 }}
@@ -270,61 +268,55 @@ const Home = ({
 														>
 															Metadata
 														</Link>
-														<CopyToClipboard
-															text={`${document.location.origin}/load/${uploadedObject.object_id}`}
-															onCopy={() => {
+														<div
+															onClick={() => {
+																copy(`${document.location.origin}/load/${uploadedObject.object_id}`);
 																setCopy(`link${index}`);
 																setTimeout(() => {
 																	setCopy(false);
 																}, 700);
 															}}
 														>
-															<div>
-																<FontAwesomeIcon icon={['fas', 'copy']} />
-																{isCopied === `link${index}` && (
-																	<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
-																)}
-															</div>
-														</CopyToClipboard>
+															<FontAwesomeIcon icon={['fas', 'copy']} />
+															{isCopied === `link${index}` && (
+																<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
+															)}
+														</div>
 													</Heading>
 												</div>
 												<Heading size={6} subtitle>
 													{`Container ID: ${uploadedObject.container_id}`}
-													<CopyToClipboard
-														text={uploadedObject.container_id}
-														onCopy={() => {
+													<div
+														onClick={() => {
+															copy(uploadedObject.container_id);
 															setCopy(`container_id${index}`);
 															setTimeout(() => {
 																setCopy(false);
 															}, 700);
 														}}
 													>
-														<div>
-															<FontAwesomeIcon icon={['fas', 'copy']} />
-															{isCopied === `container_id${index}` && (
-																<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
-															)}
-														</div>
-													</CopyToClipboard>
+														<FontAwesomeIcon icon={['fas', 'copy']} />
+														{isCopied === `container_id${index}` && (
+															<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
+														)}
+													</div>
 												</Heading>
 												<Heading size={6} subtitle>
 													{`Object ID: ${uploadedObject.object_id}`}
-													<CopyToClipboard
-														text={uploadedObject.object_id}
-														onCopy={() => {
+													<div
+														onClick={() => {
+															copy(uploadedObject.object_id);
 															setCopy(`object_id${index}`);
 															setTimeout(() => {
 																setCopy(false);
 															}, 700);
 														}}
 													>
-														<div>
-															<FontAwesomeIcon icon={['fas', 'copy']} />
-															{isCopied === `object_id${index}` && (
-																<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
-															)}
-														</div>
-													</CopyToClipboard>
+														<FontAwesomeIcon icon={['fas', 'copy']} />
+														{isCopied === `object_id${index}` && (
+															<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
+														)}
+													</div>
 												</Heading>
 											</Notification>
 										))}

diff --git a/src/Load.tsx b/src/Load.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import copy from 'copy-to-clipboard';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
 	Button,
@@ -59,23 +59,21 @@ const Load = ({
 										<span>Download</span>
 										<FontAwesomeIcon icon={['fas', 'download']} style={{ marginLeft: 5, fontSize: 14 }} />
 									</Button>
-									<CopyToClipboard
-										text={`${environment.server ? environment.server : document.location.origin}/gate/get/${objectData.objectId}`}
-										onCopy={() => {
+									<Button
+										onClick={() => {
+											copy(`${environment.server ? environment.server : document.location.origin}/gate/get/${objectData.objectId}`);
 											setCopied(true);
 											setTimeout(() => {
 												setCopied(false);
 											}, 700);
 										}}
 									>
-										<Button>
-											<span>Copy link</span>
-											<FontAwesomeIcon icon={['fas', 'copy']} style={{ marginLeft: 5, fontSize: 14 }} />
-											{isCopied && (
-												<div className='tooltip'>Copied!</div>
-											)}
-										</Button>
-									</CopyToClipboard>
+										<span>Copy link</span>
+										<FontAwesomeIcon icon={['fas', 'copy']} style={{ marginLeft: 5, fontSize: 14 }} />
+										{isCopied && (
+											<div className='tooltip'>Copied!</div>
+										)}
+									</Button>
 								</Button.Group>
 								<Button.Group style={{ justifyContent: 'center' }}>
 									<a

diff --git a/src/api.ts b/src/api.ts
@@ -1,4 +1,5 @@
-const server = process.env.REACT_APP_NEOFS;
+/// <reference types="vite/client" />
+const server = import.meta.env.VITE_NEOFS;
 
 type Methods = "GET" | "POST" | "HEAD";
 

diff --git a/src/index.tsx b/src/index.tsx
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,12 @@
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App.tsx';
+import { BrowserRouter } from "react-router-dom";
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+		<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+			<App />
+		</BrowserRouter>
+  </StrictMode>,
+)
diff --git a/vite.config.mjs b/vite.config.mjs
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+  build: {
+    sourcemap: false,
+    outDir: 'send.fs.neo.org',
+  },
+});