diff --git a/.env b/.env index 177e996..a9b7e1a 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -REACT_APP_NEOFS="" +VITE_NEOFS="" diff --git a/Makefile b/Makefile index 08ba4e0..4f7d8fd 100644 --- 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 index 7e72cd6..36b1f08 100644 --- 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 new file mode 100644 index 0000000..d44afff --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + Send.NeoFS + + + + + + + + + + + + + + + + + +
+ + + diff --git a/package.json b/package.json index 688007c..9c0361e 100644 --- a/package.json +++ b/package.json @@ -3,31 +3,24 @@ "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%", @@ -35,8 +28,9 @@ "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 deleted file mode 100644 index fdbc9e7..0000000 --- a/public/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - Send.NeoFS - - - - - - - - - - - - - - - - - - - -
- - - diff --git a/src/App.tsx b/src/App.tsx index dff7790..3ba0e69 100644 --- 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({ - 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(getCookie('X-Bearer') && getCookie('X-Attribute-Email') ? { XBearer: getCookie('X-Bearer'), @@ -166,7 +166,7 @@ export const App = () => { - + {uploadedObject.filename} - { +
{ + copy(`${environment.server ? environment.server : document.location.origin}/gate/get/${uploadedObject.object_id}`); setCopy(`name${index}`); setTimeout(() => { setCopy(false); }, 700); }} > -
- - {isCopied === `name${index}` && ( -
Copied!
- )} -
- + + {isCopied === `name${index}` && ( +
Copied!
+ )} +
onDownload(uploadedObject.object_id, uploadedObject.filename)} style={{ lineHeight: 0 }} @@ -270,61 +268,55 @@ const Home = ({ > Metadata - { +
{ + copy(`${document.location.origin}/load/${uploadedObject.object_id}`); setCopy(`link${index}`); setTimeout(() => { setCopy(false); }, 700); }} > -
- - {isCopied === `link${index}` && ( -
Copied!
- )} -
- + + {isCopied === `link${index}` && ( +
Copied!
+ )} +
{`Container ID: ${uploadedObject.container_id}`} - { +
{ + copy(uploadedObject.container_id); setCopy(`container_id${index}`); setTimeout(() => { setCopy(false); }, 700); }} > -
- - {isCopied === `container_id${index}` && ( -
Copied!
- )} -
- + + {isCopied === `container_id${index}` && ( +
Copied!
+ )} +
{`Object ID: ${uploadedObject.object_id}`} - { +
{ + copy(uploadedObject.object_id); setCopy(`object_id${index}`); setTimeout(() => { setCopy(false); }, 700); }} > -
- - {isCopied === `object_id${index}` && ( -
Copied!
- )} -
- + + {isCopied === `object_id${index}` && ( +
Copied!
+ )} +
))} diff --git a/src/Load.tsx b/src/Load.tsx index a551203..3337718 100644 --- 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 = ({ Download - { + - + Copy link + + {isCopied && ( +
Copied!
+ )} + +const server = import.meta.env.VITE_NEOFS; type Methods = "GET" | "POST" | "HEAD"; diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index 6302304..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { App } from './App.tsx'; -import { BrowserRouter } from "react-router-dom"; - -ReactDOM.render( - - - - - , - document.getElementById('root') -); diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..dcdc892 --- /dev/null +++ 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( + + + + + , +) diff --git a/vite.config.mjs b/vite.config.mjs new file mode 100644 index 0000000..9ffe837 --- /dev/null +++ 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', + }, +});