nspcc-dev · roman-khimov · Mar 21, 2025 · Mar 19, 2025
diff --git a/Makefile b/Makefile
@@ -14,17 +14,19 @@ $(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)/$(SITE_DIR):/usr/src/app/$(SITE_DIR) \
 	-e CURRENT_UID=$(CURRENT_UID) \
-	-w /usr/src/app node:12-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 @@ NeoFS status monitoring page using React framework under the hood
 
 - make
 - docker
-- node.js
+- node (`18+`)
 - python
 
 ## Make instructions

diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>NeoFS Status</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="NeoFS Status page">
+    <meta name="description" content="NeoFS status monitoring">
+    <meta property="og:url" content="https://status.fs.neo.org">
+    <meta property="og:title" content="NeoFS Status page">
+    <meta property="og:description" content="NeoFS status monitoring">
+    <meta property="og:type" content="website">
+    <meta name="theme-color" content="#2d333b" />
+    <meta http-equiv="Content-Security-Policy"
+      content="default-src 'none'; script-src 'self'; connect-src 'self' https://status.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">
+    <style>
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #111827;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+    <script src="/js/d3.v3.min.js"></script>
+    <script src="/js/d3.geo.projection.v0.min.js"></script>
+    <script src="/js/topojson.v1.min.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -3,33 +3,27 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@types/react": "^18.2.39",
-    "@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",
+    "react": "^19.0.0",
     "react-bulma-components": "^4.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": "BUILD_PATH='./status.fs.neo.org' GENERATE_SOURCEMAP=false 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": {
-    "react-scripts": "^5.0.1",
-    "typescript": "^3.2.1"
+    "@vitejs/plugin-react": "^4.3.4",
+    "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
@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 import React, { useEffect, useState } from 'react';
 import { Link, Route, Routes, Navigate, useLocation } from "react-router-dom";
 import {
@@ -114,7 +115,7 @@ export const App = () => {
 					<Navbar.Menu
 						className={menuActive ? 'is-active' : ''}
 					>
-						<Navbar.Container>
+						<Navbar.Container className="navbar-start">
 							<Link
 								to="/"
 								className="navbar-item"
@@ -239,7 +240,7 @@ export const App = () => {
 					subtitle
 					style={{ textAlign: 'center', fontSize: '.75rem' }}
 				>
-					{process.env.REACT_APP_VERSION}
+					{import.meta.env.VITE_VERSION}
 				</Heading>
 			</Footer>
     </>

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: 'status.fs.neo.org',
+  },
+});
-Original file line number
+Diff line change
@@ Expand Up @@
     - make
     - docker
-    - node.js
+    - node (`18+`)
     - python
     ## Make instructions
@@ Expand Down @@