Moved to VITE
This commit is contained in:
parent
e2d00d5887
commit
d8790d3318
3
.env
3
.env
@ -1,2 +1,5 @@
|
||||
VITE_basePath="/ketr.ketran"
|
||||
NODE_CONFIG_ENV='production'
|
||||
VITE_HMR_HOST=battle-linux.ketrenos.com
|
||||
VITE_HMR_PROTOCOL=wss
|
||||
VITE_HMR_PORT=3001
|
||||
46
client/index.html
Executable file
46
client/index.html
Executable file
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%VITE_API_BASE%/favicon.ico" />
|
||||
|
||||
<base href="%VITE_API_BASE%"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Play Peddlers of Ketran!"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%VITE_API_BASE%/logo192.png" />
|
||||
<!--
|
||||
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/
|
||||
-->
|
||||
<link rel="manifest" href="%VITE_API_BASE%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
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.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
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`.
|
||||
-->
|
||||
<title>Peddlers of Ketran</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
44
client/src/WebRTCStatus.tsx
Normal file
44
client/src/WebRTCStatus.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import { Box, CircularProgress, Typography } from '@mui/material';
|
||||
|
||||
interface WebRTCStatusProps {
|
||||
isNegotiating: boolean;
|
||||
connectionState?: string;
|
||||
}
|
||||
|
||||
const WebRTCStatus: React.FC<WebRTCStatusProps> = ({
|
||||
isNegotiating,
|
||||
connectionState
|
||||
}) => {
|
||||
if (!isNegotiating && connectionState !== 'connecting') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
className="webrtc-status"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
color: 'white',
|
||||
padding: 2,
|
||||
borderRadius: 2,
|
||||
zIndex: 10
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={24} color="inherit" />
|
||||
<Typography variant="caption">
|
||||
{isNegotiating ? 'Negotiating WebRTC...' : 'Connecting...'}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default WebRTCStatus;
|
||||
48
client/vite.config.js
Normal file
48
client/vite.config.js
Normal file
@ -0,0 +1,48 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import fs from 'fs';
|
||||
|
||||
const httpsEnv = (process.env.HTTPS || '').toLowerCase();
|
||||
const useHttps = httpsEnv === 'true' || httpsEnv === '1';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths'
|
||||
|
||||
|
||||
// If custom cert paths are provided via env, use them; otherwise let Vite handle a self-signed cert when true.
|
||||
const httpsOption = useHttps
|
||||
? (process.env.VITE_HTTPS_KEY && process.env.VITE_HTTPS_CERT
|
||||
? {
|
||||
key: fs.readFileSync(process.env.VITE_HTTPS_KEY),
|
||||
cert: fs.readFileSync(process.env.VITE_HTTPS_CERT)
|
||||
}
|
||||
: true)
|
||||
: false;
|
||||
|
||||
export default defineConfig({
|
||||
// Base public path when served in dev or production. Allow overriding
|
||||
// via VITE_API_BASE (e.g. /ketr.ketran) so assets and manifest paths work.
|
||||
base: '/',
|
||||
plugins: [react(), tsconfigPaths()],
|
||||
build: {
|
||||
outDir: 'build',
|
||||
},
|
||||
server: {
|
||||
host: process.env.HOST || '0.0.0.0',
|
||||
port: Number(process.env.PORT) || 3000,
|
||||
https: httpsOption,
|
||||
proxy: {
|
||||
'/ketr.ketran/api': {
|
||||
target: 'http://peddlers-server:8930',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/ketr.ketran/, '')
|
||||
}
|
||||
},
|
||||
// HMR options: allow overriding host/port/protocol from env so external
|
||||
// browsers (accessing via a different hostname) can connect to the dev
|
||||
// server's websocket. See https://vite.dev/config/server-options.html#server-hmr
|
||||
hmr: {
|
||||
port: process.env.VITE_HMR_PORT || 3001,
|
||||
host: process.env.VITE_HMR_HOST || 'localhost',
|
||||
protocol: process.env.VITE_HMR_PROTOCOL || 'ws'
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -6,6 +6,8 @@ services:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
restart: always
|
||||
env_file:
|
||||
- .env
|
||||
ports:
|
||||
- 8930:8930
|
||||
volumes:
|
||||
@ -53,7 +55,12 @@ services:
|
||||
# a certificate for the external hostname (e.g. battle-linux.ketrenos.com).
|
||||
- VITE_HTTPS_KEY=/certs/battle.key
|
||||
- VITE_HTTPS_CERT=/certs/battle.crt
|
||||
command: ["bash", "-c", "cd /client && npm install --legacy-peer-deps --silent --no-audit --no-fund && npm start"]
|
||||
env_file:
|
||||
- .env
|
||||
# Install deps then run vite directly to avoid using the npm wrapper which
|
||||
# was receiving SIGTERM in the container and making the service appear to
|
||||
# restart repeatedly.
|
||||
command: ["bash", "-c", "cd /client && npm install --legacy-peer-deps --silent --no-audit --no-fund && ./node_modules/.bin/vite --host"]
|
||||
networks:
|
||||
- peddlers-network
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user