pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

Migrated from CRA to Vite

Browse Source
This commit is contained in:
Pierre HUBERT 2023-12-12 16:55:06 +01:00
parent 019348aa78
commit 32ae92d7aa
12 changed files with 2165 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -3,7 +3,7 @@ all: frontend backend
frontend: frontend:
cd virtweb_frontend && npm run build && cd .. cd virtweb_frontend && npm run build && cd ..
rm -rf virtweb_backend/static rm -rf virtweb_backend/static
mv virtweb_frontend/build virtweb_backend/static mv virtweb_frontend/dist virtweb_backend/static
backend: frontend backend: frontend
cd virtweb_backend && cargo clippy -- -D warnings && cargo build --release cd virtweb_backend && cargo clippy -- -D warnings && cargo build --release

2
virtweb_frontend/.env
View File

@ -1 +1 @@
REACT_APP_BACKEND=http://localhost:8000/api VITE_APP_BACKEND=http://localhost:8000/api

2
virtweb_frontend/.env.production
View File

@ -1 +1 @@
REACT_APP_BACKEND=/api VITE_APP_BACKEND=/api

11
virtweb_frontend/public/index.html → virtweb_frontend/index.html
View File

@ -2,25 +2,25 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
@ -39,5 +39,6 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script type="module" src="/src/index.tsx"></script>
</body> </body>
</html> </html>

2338
virtweb_frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
virtweb_frontend/package.json
View File

@ -1,6 +1,7 @@
{ {
"name": "virtweb_frontend", "name": "virtweb_frontend",
"version": "0.1.0", "version": "0.1.0",
"type": "module",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1", "@emotion/react": "^11.11.1",
@ -21,25 +22,26 @@
"@types/react-dom": "^18.2.7", "@types/react-dom": "^18.2.7",
"@types/react-syntax-highlighter": "^15.5.11", "@types/react-syntax-highlighter": "^15.5.11",
"@types/uuid": "^9.0.5", "@types/uuid": "^9.0.5",
"@vitejs/plugin-react": "^4.2.1",
"filesize": "^10.0.12", "filesize": "^10.0.12",
"humanize-duration": "^3.29.0", "humanize-duration": "^3.29.0",
"mui-file-input": "^3.0.1", "mui-file-input": "^3.0.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.15.0", "react-router-dom": "^6.15.0",
"react-scripts": "5.0.1",
"react-syntax-highlighter": "^15.5.0", "react-syntax-highlighter": "^15.5.0",
"react-vnc": "^1.0.0", "react-vnc": "^1.0.0",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"uuid": "^9.0.1", "uuid": "^9.0.1",
"vite": "^5.0.8",
"vite-tsconfig-paths": "^4.2.2",
"web-vitals": "^2.1.4", "web-vitals": "^2.1.4",
"xml-formatter": "^3.6.0" "xml-formatter": "^3.6.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "vite",
"build": "react-scripts build", "build": "tsc && vite build",
"test": "react-scripts test", "preview": "vite preview"
"eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [

2
virtweb_frontend/src/api/ApiClient.ts
View File

@ -26,7 +26,7 @@ export class APIClient {
* Get backend URL * Get backend URL
*/ */
static backendURL(): string { static backendURL(): string {
const URL = process.env.REACT_APP_BACKEND ?? ""; const URL = import.meta.env.VITE_APP_BACKEND ?? "";
if (URL.length === 0) throw new Error("Backend URL undefined!"); if (URL.length === 0) throw new Error("Backend URL undefined!");
return URL; return URL;
} }

1
virtweb_frontend/src/react-app-env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

2
virtweb_frontend/src/widgets/vms/VMScreenshot.tsx
View File

@ -9,7 +9,7 @@ export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
string | undefined string | undefined
>(); >();
const int = React.useRef<NodeJS.Timer | undefined>(); const int = React.useRef<number | undefined>();
React.useEffect(() => { React.useEffect(() => {
const refresh = async () => { const refresh = async () => {

3
virtweb_frontend/tsconfig.json
View File

@ -1,11 +1,12 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5",
"lib": [ "lib": [
"dom", "dom",
"dom.iterable", "dom.iterable",
"esnext" "esnext"
], ],
"target": "ESNext",
"types": ["vite/client"],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,

1
virtweb_frontend/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

15
virtweb_frontend/vite.config.ts Normal file
View File

@ -0,0 +1,15 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
// depending on your application, base can also be "/"
base: "/",
plugins: [react(), viteTsconfigPaths()],
server: {
// this ensures that the browser opens upon server start
open: true,
// this sets a default port to 3000
port: 3000,
},
});