client: add ability to build static bundle (#93)

projectsophon · Oct 12, 2020 · ece0923 · ece0923
1 parent 6f1010a
commit ece0923
Show file tree

Hide file tree

Showing 10 changed files with 275 additions and 226 deletions.
diff --git a/client/index.html b/client/index.html
@@ -25,34 +25,17 @@
   <meta name="msapplication-TileImage" content="/favicons.ico/ms-icon-144x144.png" />
   <meta name="theme-color" content="#080808" />
 
-  <link rel="shortcut icon" href="/favicon.ico" />
-  <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
-  <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
-  <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
-  <link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
-  <link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
-  <link rel="manifest" href="/icons/manifest.json">
-  <meta name="msapplication-TileColor" content="#080808">
-  <meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png">
-  <meta name="theme-color" content="#080808">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap" />
 
-  <script src="/snarkjs.min.js"></script>
-  <script src="/primus/primus.js"></script>
+  <script type="application/javascript" src="/snarkjs.min.js"></script>
+  <script type="application/javascript" src="/primus/primus.js"></script>
   <title>Sophon - The Dark Forest Toolbox</title>
 </head>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
-  <script type="module" src="src/index.tsx"></script>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 
 </html>
diff --git a/client/src/api/EthereumAccountManager.ts b/client/src/api/EthereumAccountManager.ts
@@ -1,4 +1,4 @@
-import * as stringify from 'json-stable-stringify';
+import stringify from 'json-stable-stringify';
 import { TransactionReceipt } from '@ethersproject/providers';
 import { providers, Contract, Wallet, utils, ContractInterface } from 'ethers';
 import { EthAddress } from '../_types/global/GlobalTypes';
@@ -86,7 +86,7 @@ class EthereumAccountManager extends EventEmitter {
 
   public async loadCoreContract(): Promise<Contract> {
     const contractABI = (
-      await fetch('/public/contracts/DarkForestCore.json').then((x) => x.json())
+      await fetch('/contracts/DarkForestCore.json').then((x) => x.json())
     ).abi;
 
     const { contractAddress } = await import('../utils/prod_contract_addr');

diff --git a/client/src/api/LocalStorageManager.ts b/client/src/api/LocalStorageManager.ts
@@ -1,4 +1,4 @@
-import * as stringify from 'json-stable-stringify';
+import stringify from 'json-stable-stringify';
 import {
   EthAddress,
   ExploredChunkData,

diff --git a/client/src/api/SnarkArgsHelper.ts b/client/src/api/SnarkArgsHelper.ts
@@ -72,8 +72,8 @@ class SnarkArgsHelper {
 
       const snarkProof: SnarkJSProofAndSignals = await window.snarkjs.groth16.fullProve(
         input,
-        '/public/circuits/init/circuit.wasm',
-        '/public/init.zkey'
+        '/circuits/init/circuit.wasm',
+        '/init.zkey'
       );
       const ret = this.callArgsFromProofAndSignals(
         snarkProof.proof,
@@ -119,8 +119,8 @@ class SnarkArgsHelper {
       };
       const snarkProof: SnarkJSProofAndSignals = await window.snarkjs.groth16.fullProve(
         input,
-        'public/circuits/move/circuit.wasm',
-        '/public/move.zkey'
+        '/circuits/move/circuit.wasm',
+        '/move.zkey'
       );
       const hash1 = this.useMockHash ? fakeHash(x1, y1) : mimcHash(x1, y1);
       const hash2 = this.useMockHash ? fakeHash(x2, y2) : mimcHash(x2, y2);

diff --git a/client/src/app/board/ControllableCanvas.tsx b/client/src/app/board/ControllableCanvas.tsx
@@ -159,7 +159,7 @@ export default function ControllableCanvas(): JSX.Element {
     >
       <img
         ref={imgRef}
-        src='/public/img/texture.jpg'
+        src='/img/texture.jpg'
         style={{ position: 'absolute', left: '-1000px', top: '-1000px' }}
         onLoad={() => setLoaded(true)}
       />

diff --git a/client/src/styles/style.css b/client/src/styles/style.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap');
-
 html,
 body,
 #root {
@@ -24,4 +22,4 @@ body {
 * {
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
-}
+}
diff --git a/index.mjs b/index.mjs
@@ -1,8 +1,10 @@
 import path from 'path';
+import { createRequire } from 'module';
 import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const require = createRequire(import.meta.url);
 
 import os from 'os';
 import fs from 'fs';
@@ -21,6 +23,8 @@ import { SpiralPattern } from './lib/SpiralPattern.mjs';
 import LocalStorageManager from './lib/LocalStorageManager.mjs';
 import { toBoolean, toNumber, toObject, toFullPath, isUnset, toEnv } from './lib/env-utils.mjs';
 
+const { viteConfig } = require('./vite.config.js');
+
 let cores = os.cpus();
 
 let env = dotenv.config();
@@ -279,33 +283,9 @@ const minerManager = MinerManager.create(
 
 let server;
 
-import VitePluginReact from 'vite-plugin-react';
-
 if (isClientServer) {
-  server = createServer({
-    root: path.join(__dirname, 'client'),
-    alias: {
-      'react': '@pika/react',
-      'react-dom': '@pika/react-dom',
-      'auto-bind': 'auto-bind/index',
-      'crypto': 'crypto-browserify',
-      'http': 'http-browserify',
-      'https': 'https-browserify',
-      'stream': 'stream-browserify',
-    },
-    jsx: 'react',
-    optimizeDeps: {
-      include: ['auto-bind/index', 'stylis-rule-sheet'],
-    },
-    env: {
-      PORT: port,
-    },
-    // Explictly don't add the plugin resolvers because
-    // we want prod React to make warnings go away
-    // resolvers: [...VitePluginReact.resolvers],
-    configureServer: [VitePluginReact.configureServer],
-    transforms: [...VitePluginReact.transforms],
-  });
+  const config = viteConfig({ port });
+  server = createServer(config);
 } else if (isWebsocketServer) {
   server = http.createServer();
 }

diff --git a/package.json b/package.json
@@ -19,28 +19,34 @@
     "primus": "^7.3.5",
     "primus-emit": "^1.0.0",
     "update-dotenv": "^1.1.1",
-    "vite": "^1.0.0-rc.4",
+    "vite": "1.0.0-rc.4",
     "vite-plugin-react": "^3.0.2",
     "ws": "^7.3.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",
     "bs-platform": "^8.2.0",
+    "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.12.0",
-    "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-react": "^7.21.4",
-    "eslint": "^7.11.0",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "neon-cli": "^0.4.2",
+    "st": "^2.0.0",
     "typescript": "^3.7.2"
   },
+  "resolutions": {
+    "vite": "npm:@phated/[email protected]"
+  },
   "scripts": {
     "start": "node .",
     "prepare": "yarn build",
     "build": "yarn re:build && yarn rust:build",
     "re:build": "bsb -make-world",
     "re:watch": "bsb -make-world -w",
     "re:clean": "bsb -clean-world",
-    "rust:build": "neon build --release"
+    "rust:build": "neon build --release",
+    "static:build": "vite build",
+    "static:serve": "st -p 8083 -d dist -i index.html -nc"
   }
 }
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,37 @@
+const path = require('path');
+const VitePluginReact = require('vite-plugin-react');
+
+const viteConfig = ({ port = 8082, ...rest }) => ({
+  root: path.join(__dirname, 'client'),
+  alias: {
+    'react': '@pika/react',
+    'react-dom': '@pika/react-dom',
+    'auto-bind': 'auto-bind/index',
+    'crypto': 'crypto-browserify',
+    'http': 'http-browserify',
+    'https': 'https-browserify',
+    'stream': 'stream-browserify',
+  },
+  jsx: 'react',
+  optimizeDeps: {
+    include: ['auto-bind/index', 'stylis-rule-sheet'],
+  },
+  env: {
+    PORT: port,
+  },
+  // Explictly don't add the plugin resolvers because
+  // we want prod React to make warnings go away
+  // resolvers: [...VitePluginReact.resolvers],
+  configureServer: [VitePluginReact.configureServer],
+  transforms: [...VitePluginReact.transforms],
+  ...rest
+});
+
+// Only for build
+module.exports = viteConfig({
+  outDir: path.join(__dirname, 'dist'),
+  rollupInputOptions: {
+    external: ['/primus/primus.js', '/snarkjs.min.js']
+  },
+});
+module.exports.viteConfig = viteConfig;