Moved to VITE
This commit is contained in:
parent
e2d00d5887
commit
d8790d3318
3
.env
3
.env
@ -1,2 +1,5 @@
|
|||||||
VITE_basePath="/ketr.ketran"
|
VITE_basePath="/ketr.ketran"
|
||||||
NODE_CONFIG_ENV='production'
|
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: .
|
context: .
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
restart: always
|
restart: always
|
||||||
|
env_file:
|
||||||
|
- .env
|
||||||
ports:
|
ports:
|
||||||
- 8930:8930
|
- 8930:8930
|
||||||
volumes:
|
volumes:
|
||||||
@ -53,7 +55,12 @@ services:
|
|||||||
# a certificate for the external hostname (e.g. battle-linux.ketrenos.com).
|
# a certificate for the external hostname (e.g. battle-linux.ketrenos.com).
|
||||||
- VITE_HTTPS_KEY=/certs/battle.key
|
- VITE_HTTPS_KEY=/certs/battle.key
|
||||||
- VITE_HTTPS_CERT=/certs/battle.crt
|
- 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:
|
networks:
|
||||||
- peddlers-network
|
- peddlers-network
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user