Skip to content

Commit 38b2ffe

Browse files
mike-petrovmike-petrov
committed
web: Migrate to vite
- update dependencies - update imports - add vite config closes #131 Signed-off-by: Mikhail Petrov <[email protected]>
1 parent 2df0001 commit 38b2ffe

File tree

13 files changed

+123
-126
lines changed

13 files changed

+123
-126
lines changed

‎.env‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
REACT_APP_NEOFS=""
1+
VITE_NEOFS=""

‎Makefile‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,20 @@ $(SITE_DIR):
1414
docker run \
1515
-v $$(pwd)/src:/usr/src/app/src \
1616
-v $$(pwd)/public:/usr/src/app/public \
17+
-v $$(pwd)/index.html:/usr/src/app/index.html \
18+
-v $$(pwd)/vite.config.mjs:/usr/src/app/vite.config.mjs \
1719
-v $$(pwd)/package.json:/usr/src/app/package.json \
1820
-v $$(pwd)/.env:/usr/src/app/.env \
1921
-v $$(pwd)/$(SITE_DIR):/usr/src/app/$(SITE_DIR) \
2022
-e CURRENT_UID=$(CURRENT_UID) \
21-
-w /usr/src/app node:14-alpine \
22-
sh -c 'npm install && REACT_APP_VERSION=$(VERSION) npm run build && chown -R $$CURRENT_UID: $(SITE_DIR)'
23+
-w /usr/src/app node:18-alpine \
24+
sh -c 'npm install && VITE_VERSION=$(VERSION) npm run build && chown -R $$CURRENT_UID: $(SITE_DIR)'
2325

2426
start:
2527
docker run \
2628
-p $(PORT):3000 \
2729
-v `pwd`:/usr/src/app \
28-
-w /usr/src/app node:14-alpine \
30+
-w /usr/src/app node:18-alpine \
2931
sh -c 'npm install --silent && npm run build && npm install -g serve && serve -s $(SITE_DIR) -p 3000'
3032

3133
release: $(SITE_DIR)

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Send.NeoFS is a simple example of integration with NeoFS network via HTTP protoc
1919

2020
- docker
2121
- make
22-
- node (`14+`)
22+
- node (`18+`)
2323

2424
# Make instructions
2525

@@ -29,14 +29,14 @@ Send.NeoFS is a simple example of integration with NeoFS network via HTTP protoc
2929
* Get release directory with tar.gz using `make release`
3030

3131
Set variables in the `.env` file before executing the commands:
32-
- `REACT_APP_NEOFS` - Path to SendFS
32+
- `VITE_NEOFS` - Path to SendFS
3333

3434
# Send.NeoFS local up
3535

3636
- Start [neofs-dev-env](https://github.com/nspcc-dev/neofs-dev-env)
3737
- Update `.env`
3838
- Execute `npm install`
39-
- Run local `npm start`
39+
- Run local `npm run build`
4040

4141
# Deployment to production
4242

‎index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Send.NeoFS</title>
5+
<meta charset='utf-8'>
6+
<link rel="icon" href="/img/favicon.ico">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="title" content="Send.NeoFS">
9+
<meta name="description" content="HTTP-gate demo for distributed object storage">
10+
<meta property="og:url" content="https://send.fs.neo.org">
11+
<meta property="og:title" content="Send.NeoFS">
12+
<meta property="og:description" content="HTTP-gate demo for distributed object storage">
13+
<meta property="og:type" content="website">
14+
<meta property="og:image" content="/img/cover.png">
15+
<meta name="theme-color" content="#29363b" />
16+
<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';">
17+
<link rel="preconnect" href="https://fonts.googleapis.com">
18+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;800&display=swap" rel="stylesheet">
20+
</head>
21+
<body>
22+
<div id="root"></div>
23+
<script type="module" src="/src/main.jsx"></script>
24+
</body>
25+
</html>

‎package.json‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,34 @@
33
"version": "0.6.4",
44
"private": true,
55
"dependencies": {
6-
"@fortawesome/fontawesome-svg-core": "^6.4.0",
7-
"@fortawesome/free-brands-svg-icons": "^6.4.0",
8-
"@fortawesome/free-regular-svg-icons": "^6.4.0",
9-
"@fortawesome/free-solid-svg-icons": "^6.4.0",
6+
"@fortawesome/fontawesome-svg-core": "^6.7.2",
7+
"@fortawesome/free-brands-svg-icons": "^6.7.2",
8+
"@fortawesome/free-regular-svg-icons": "^6.7.2",
9+
"@fortawesome/free-solid-svg-icons": "^6.7.2",
1010
"@fortawesome/react-fontawesome": "^0.2.0",
11-
"@types/react": "^18.2.41",
12-
"@types/react-dom": "^18.2.17",
11+
"@types/react": "^19.0.8",
12+
"@types/react-dom": "^19.0.3",
1313
"bulma": "^0.9.4",
14-
"react": "^17.0.2",
14+
"copy-to-clipboard": "^3.3.3",
15+
"react": "^19.0.0",
1516
"react-bulma-components": "^4.1.0",
16-
"react-copy-to-clipboard": "^5.1.0",
17-
"react-dom": "^17.0.2",
17+
"react-dom": "^19.0.0",
1818
"react-router-dom": "^6.10.0"
1919
},
2020
"scripts": {
21-
"start": "REACT_APP_VERSION=$(make version) GENERATE_SOURCEMAP=false react-scripts start",
22-
"build": "GENERATE_SOURCEMAP=false BUILD_PATH='./send.fs.neo.org' react-scripts build",
23-
"test": "react-scripts test",
24-
"eject": "react-scripts eject"
25-
},
26-
"eslintConfig": {
27-
"extends": [
28-
"react-app",
29-
"react-app/jest"
30-
]
21+
"dev": "VITE_VERSION=$(make version) vite",
22+
"build": "vite build",
23+
"preview": "vite preview"
3124
},
3225
"browserslist": [
3326
">0.2%",
3427
"not dead",
3528
"not op_mini all"
3629
],
3730
"devDependencies": {
38-
"dotenv": "^16.0.3",
39-
"react-scripts": "^5.0.1",
40-
"typescript": "^4.9.5"
31+
"@vitejs/plugin-react": "^4.3.4",
32+
"dotenv": "^16.4.7",
33+
"typescript": "^5.7.3",
34+
"vite": "^6.1.0"
4135
}
4236
}

‎public/index.html‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ function getCookie(name: string) {
7373
export const App = () => {
7474
const location: any = useLocation();
7575
const [environment] = useState<Environment>({
76-
version: process.env.REACT_APP_VERSION,
77-
server: process.env.REACT_APP_NEOFS,
76+
version: import.meta.env.VITE_VERSION,
77+
server: import.meta.env.VITE_NEOFS,
7878
});
7979
const [user] = useState<User | null>(getCookie('X-Bearer') && getCookie('X-Attribute-Email') ? {
8080
XBearer: getCookie('X-Bearer'),

‎src/Home.tsx‎

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import { Link } from "react-router-dom";
3-
import { CopyToClipboard } from 'react-copy-to-clipboard';
3+
import copy from 'copy-to-clipboard';
44
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
55
import { UploadedObject } from './App.tsx';
66
import api from './api.ts';
@@ -238,22 +238,20 @@ const Home = ({
238238
>
239239
{uploadedObject.filename}
240240
</a>
241-
<CopyToClipboard
242-
text={`${environment.server ? environment.server : document.location.origin}/gate/get/${uploadedObject.object_id}`}
243-
onCopy={() => {
241+
<div
242+
onClick={() => {
243+
copy(`${environment.server ? environment.server : document.location.origin}/gate/get/${uploadedObject.object_id}`);
244244
setCopy(`name${index}`);
245245
setTimeout(() => {
246246
setCopy(false);
247247
}, 700);
248248
}}
249249
>
250-
<div>
251-
<FontAwesomeIcon icon={['fas', 'copy']} />
252-
{isCopied === `name${index}` && (
253-
<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
254-
)}
255-
</div>
256-
</CopyToClipboard>
250+
<FontAwesomeIcon icon={['fas', 'copy']} />
251+
{isCopied === `name${index}` && (
252+
<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
253+
)}
254+
</div>
257255
<div
258256
onClick={() => onDownload(uploadedObject.object_id, uploadedObject.filename)}
259257
style={{ lineHeight: 0 }}
@@ -270,61 +268,55 @@ const Home = ({
270268
>
271269
Metadata
272270
</Link>
273-
<CopyToClipboard
274-
text={`${document.location.origin}/load/${uploadedObject.object_id}`}
275-
onCopy={() => {
271+
<div
272+
onClick={() => {
273+
copy(`${document.location.origin}/load/${uploadedObject.object_id}`);
276274
setCopy(`link${index}`);
277275
setTimeout(() => {
278276
setCopy(false);
279277
}, 700);
280278
}}
281279
>
282-
<div>
283-
<FontAwesomeIcon icon={['fas', 'copy']} />
284-
{isCopied === `link${index}` && (
285-
<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
286-
)}
287-
</div>
288-
</CopyToClipboard>
280+
<FontAwesomeIcon icon={['fas', 'copy']} />
281+
{isCopied === `link${index}` && (
282+
<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
283+
)}
284+
</div>
289285
</Heading>
290286
</div>
291287
<Heading size={6} subtitle>
292288
{`Container ID: ${uploadedObject.container_id}`}
293-
<CopyToClipboard
294-
text={uploadedObject.container_id}
295-
onCopy={() => {
289+
<div
290+
onClick={() => {
291+
copy(uploadedObject.container_id);
296292
setCopy(`container_id${index}`);
297293
setTimeout(() => {
298294
setCopy(false);
299295
}, 700);
300296
}}
301297
>
302-
<div>
303-
<FontAwesomeIcon icon={['fas', 'copy']} />
304-
{isCopied === `container_id${index}` && (
305-
<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
306-
)}
307-
</div>
308-
</CopyToClipboard>
298+
<FontAwesomeIcon icon={['fas', 'copy']} />
299+
{isCopied === `container_id${index}` && (
300+
<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
301+
)}
302+
</div>
309303
</Heading>
310304
<Heading size={6} subtitle>
311305
{`Object ID: ${uploadedObject.object_id}`}
312-
<CopyToClipboard
313-
text={uploadedObject.object_id}
314-
onCopy={() => {
306+
<div
307+
onClick={() => {
308+
copy(uploadedObject.object_id);
315309
setCopy(`object_id${index}`);
316310
setTimeout(() => {
317311
setCopy(false);
318312
}, 700);
319313
}}
320314
>
321-
<div>
322-
<FontAwesomeIcon icon={['fas', 'copy']} />
323-
{isCopied === `object_id${index}` && (
324-
<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
325-
)}
326-
</div>
327-
</CopyToClipboard>
315+
<FontAwesomeIcon icon={['fas', 'copy']} />
316+
{isCopied === `object_id${index}` && (
317+
<div className="tooltip" style={{ top: '-125%', left: '-165%' }}>Copied!</div>
318+
)}
319+
</div>
328320
</Heading>
329321
</Notification>
330322
))}

‎src/Load.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2-
import { CopyToClipboard } from 'react-copy-to-clipboard';
2+
import copy from 'copy-to-clipboard';
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
44
import {
55
Button,
@@ -59,23 +59,21 @@ const Load = ({
5959
<span>Download</span>
6060
<FontAwesomeIcon icon={['fas', 'download']} style={{ marginLeft: 5, fontSize: 14 }} />
6161
</Button>
62-
<CopyToClipboard
63-
text={`${environment.server ? environment.server : document.location.origin}/gate/get/${objectData.objectId}`}
64-
onCopy={() => {
62+
<Button
63+
onClick={() => {
64+
copy(`${environment.server ? environment.server : document.location.origin}/gate/get/${objectData.objectId}`);
6565
setCopied(true);
6666
setTimeout(() => {
6767
setCopied(false);
6868
}, 700);
6969
}}
7070
>
71-
<Button>
72-
<span>Copy link</span>
73-
<FontAwesomeIcon icon={['fas', 'copy']} style={{ marginLeft: 5, fontSize: 14 }} />
74-
{isCopied && (
75-
<div className='tooltip'>Copied!</div>
76-
)}
77-
</Button>
78-
</CopyToClipboard>
71+
<span>Copy link</span>
72+
<FontAwesomeIcon icon={['fas', 'copy']} style={{ marginLeft: 5, fontSize: 14 }} />
73+
{isCopied && (
74+
<div className='tooltip'>Copied!</div>
75+
)}
76+
</Button>
7977
</Button.Group>
8078
<Button.Group style={{ justifyContent: 'center' }}>
8179
<a

‎src/api.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
const server = process.env.REACT_APP_NEOFS;
1+
/// <reference types="vite/client" />
2+
const server = import.meta.env.VITE_NEOFS;
23

34
type Methods = "GET" | "POST" | "HEAD";
45

0 commit comments

Comments
 (0)