rework build process

client/public/index.html

@@ -11,7 +11,7 @@
   <noscript>
     You need to enable JavaScript to run this app.
   </noscript>
-  <script src="../dist/bundle.js"></script>
+  <script src="bundle.js"></script>
 </body>
 
 </html>

package.json

@@ -14,15 +14,21 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "babel-loader": "^8.2.5",
     "better-react-mathjax": "^2.0.2",
     "concurrently": "^7.4.0",
+    "css-loader": "^6.7.1",
     "express": "^4.18.2",
+    "http-server": "^14.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.3",
     "react-refresh": "^0.14.0",
     "react-use-websocket": "^4.2.0",
+    "style-loader": "^3.3.1",
     "web-vitals": "^3.0.3",
+    "webpack": "^5.74.0",
+    "webpack-dev-server": "^4.11.1",
     "ws": "^8.9.0"
   },
   "scripts": {
@@ -30,8 +36,9 @@
     "start_server": "cd server && NODE_ENV=development node ./index.js",
     "start_client": "NODE_ENV=development webpack-dev-server --hot",
     "build": "npm run build_server && npm run build_client",
-    "build_server": "cd server && lake build",
-    "build_client": "NODE_ENV=production webpack"
+    "build_server": "server/build.sh",
+    "build_client": "NODE_ENV=production webpack",
+    "production": "NODE_ENV=production concurrently -n server,client -c blue,green \"node server/index.js\" \"http-server ./client/dist\""
   },
   "eslintConfig": {
     "extends": [
@@ -56,12 +63,7 @@
     "@babel/core": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.2",
-    "css-loader": "^1.0.0",
-    "file-loader": "^6.2.0",
-    "style-loader": "^0.23.0",
-    "webpack": "^4.19.1",
-    "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.1.8"
+    "webpack-cli": "^4.10.0",
+    "webpack-shell-plugin-next": "^2.2.2"
   }
 }

server/.gitignore

@@ -1,2 +0,0 @@
-build
-node_modules

server/Dockerfile

@@ -1,25 +0,0 @@
-FROM ubuntu:18.04
-
-WORKDIR /
-
-RUN apt-get update
-RUN apt-get upgrade -y
-RUN apt-get install -y git curl
-
-# Install elan
-RUN curl -sSfL https://github.com/leanprover/elan/releases/download/v1.4.2/elan-x86_64-unknown-linux-gnu.tar.gz | tar xz
-RUN ./elan-init -y --default-toolchain leanprover/lean4:stable
-ENV PATH="${PATH}:/root/.elan/bin"
-
-# clone repos
-RUN git clone https://github.com/hhu-adam/lean4-game-server.git game-server
-RUN cd game-server && git checkout gvisor
-RUN cd game-server && lake build
-
-RUN git clone https://github.com/hhu-adam/NNG4.git
-
-WORKDIR /NNG4
-
-RUN git checkout gvisor
-RUN lake build
-CMD ["./build/bin/nng"]

server/build.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env sh
+
+# Operate in the directory where this file is located
+cd $(dirname $0)
+
+# Build elan image if not already present
+docker build --pull --rm -f elan.Dockerfile -t elan:latest .
+
+(cd leanserver && lake build)
+(cd testgame && lake build)
+docker rmi testgame:latest || true
+docker build --rm -f server.Dockerfile -t testgame:latest .

server/elan.Dockerfile

@@ -0,0 +1,13 @@
+FROM ubuntu:18.04
+
+WORKDIR /
+
+RUN apt-get update
+RUN apt-get upgrade -y
+RUN apt-get install -y git curl
+
+# Install elan
+RUN curl -sSfL https://github.com/leanprover/elan/releases/download/v1.4.2/elan-x86_64-unknown-linux-gnu.tar.gz | tar xz
+RUN ./elan-init -y --default-toolchain leanprover/lean4:nightly-2022-09-23
+# TODO: Read out lean version from lean-toolchain file
+ENV PATH="${PATH}:/root/.elan/bin"

server/index.js

@@ -19,8 +19,8 @@ const isDevelopment = environment === 'development'
 
 let cmd, cmdArgs;
 if (isDevelopment) {
-    cmd = "./build/bin/gameserver";
-    cmdArgs = ["TestGame","../testgame"];
+    cmd = "./leanserver/build/bin/gameserver";
+    cmdArgs = ["TestGame","testgame"];
 } else{
     cmd = "docker";
     cmdArgs = ["run", "--runtime=runsc", "--network=none", "--rm", "-i", "testgame:latest"];

server/server.Dockerfile

@@ -0,0 +1,11 @@
+FROM elan:latest
+
+WORKDIR /
+
+# Copy lean files
+COPY leanserver ./leanserver
+COPY testgame ./testgame
+# TODO: make `testgame` a build argument
+
+WORKDIR /leanserver
+CMD ["./build/bin/gameserver", "TestGame", "../testgame"]

server/testgame/.gitignore

@@ -0,0 +1 @@
+build

server/testgame/lakefile.lean

@@ -1,7 +1,7 @@
 import Lake
 open Lake DSL
 
-require GameServer from ".."/"server"
+require GameServer from ".."/"leanserver"
 
 package TestGame
 

webpack.config.js

@@ -1,11 +1,11 @@
 const path = require("path");
-const webpack = require("webpack");
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const WebpackShellPluginNext = require('webpack-shell-plugin-next');
 
 module.exports = env => {
   const environment = process.env.NODE_ENV
   const isDevelopment = environment === 'development'
-  
+
   const babelOptions = {
     presets: ['@babel/preset-env', '@babel/preset-react'],
     plugins: [
@@ -17,7 +17,7 @@ module.exports = env => {
   global.$RefreshSig$ = () => () => {};
 
   return {
-    entry: "./client/src/index.js",
+    entry: ["./client/src/index.js"],
     mode: isDevelopment ? 'development' : 'production',
     module: {
       rules: [
@@ -32,33 +32,28 @@ module.exports = env => {
         {
           test: /\.css$/,
           use: ["style-loader", "css-loader"]
-        },
-        {
-          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-          use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/'
-            }
-          }
-          ]
         }
       ]
     },
     resolve: { extensions: ["*", ".js", ".jsx"] },
     output: {
       path: path.resolve(__dirname, "client/dist/"),
-      publicPath: "/client/dist/",
-      filename: "bundle.js"
+      filename: "bundle.js",
     },
     devServer: {
-      contentBase: path.join(__dirname, "client/public/"),
+      static: path.join(__dirname, 'client/public/'),
       port: 3000,
-      publicPath: "http://localhost:3000/dist/",
-      hotOnly: true
+      hot: true,
     },
-    plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
+    plugins: [
+      !isDevelopment && new WebpackShellPluginNext({
+        onBuildEnd:{
+          scripts: ['cp client/public/index.html client/dist/'],
+          blocking: false,
+          parallel: true
+        }
+      }),
+      isDevelopment && new ReactRefreshWebpackPlugin()
+    ].filter(Boolean),
   };
 }