WIP: Separate app into workspaces

Signed-off-by: Johannes Loher <[email protected]>

.dockerignore

@@ -1,6 +1,4 @@
 node_modules/
 deploy/
 build/
-db/
-**/*.test.js
-.heroku/
+dist/

.github/workflows/checks.yml

@@ -7,21 +7,25 @@ on:
     branches: [master]
 
 env:
-  node-version: '16.x'
+  DO_NOT_TRACK: '1'
 
 jobs:
   build:
+    strategy:
+      matrix:
+        node-version: ['18.x', '20.x']
+
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ env.node-version }}
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.node-version }}
+          node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci --prefer-offline
-      - run: npm run checkformat
-      - run: npm run lint
-      - run: npm run build
-      - run: npm test
+      - run: npx turbo run checkformat
+      - run: npx turbo run lint
+      - run: npx turbo run build
+      - run: npx turbo run test

.gitignore

@@ -1,16 +1,17 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
 # testing
 /coverage
 
 # production
-/build
-/build-server
+build
+dist
+*.tsbuildinfo
 
 # misc
 .DS_Store
@@ -23,10 +24,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-db/
-db-images/
 deploy/
 
 # IDE
 .idea
 .vscode
+
+# Turbo
+.turbo

README.md

@@ -81,7 +81,9 @@ For the case of Elevation of Privilege, we partly support the latest version (as
 
 This repository allows you to build docker containers ready to be deployed e.g. to Kubernetes.
 
-Frontend and backend are written in Javascript, although there are plans to migrate to Typescript. This game uses [boardgame.io](https://boardgame.io/) as a framework for turn based games. The backend furthermore exposes an API using [koa](https://koajs.com/). Frontend is written in [react](https://reactjs.org/).
+The frontend and backend are written in TypeScript and use [boardgame.io](https://boardgame.io/) as a framework for turn based games. The backend furthermore exposes an API using [koa](https://koajs.com/). The frontend is written in [react](https://reactjs.org/).
+
+This repository uses [npm workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces) to structure the different sub-packages and [Turborepo](https://turbo.build/repo) as a build system and task runner.
 
 ### Running the app
 There are two components that need to be started in order to run the game.
@@ -99,54 +101,67 @@ This will start the app on port `8080` and make it accessible at [http://localho
 The docker-compose setup starts two containers: 
 
 * `threats-client`: running `nginx` as a reverse proxy and serving the react application
-* `threats-server`: running the `nodejs` backends: public API and game server
+* `threats-server`: running the Node.js backend: public API and game server
 
 ![docker-compose setup](docs/docker-setup.svg)
 
 #### Local deployment
 
-The server can be started using:
+To start both the server and UI in dev mode, just run
 
 ```bash
-npm run server
+npx turbo run dev
 ```
 
-This will also automatically build the server first, compiling any TypeScript code, and then start the backend
-application listening on the following ports:
+For starting and building the individual applications separately, read on.
+
+The server can be started in dev mode using:
+
+```bash
+npx turbo run dev --filter=@eop/server
+```
+
+This will build any dependencies of the server if necessary and then start the backend application in dev mode,
+listening on the following ports:
 
 | Application | Description                                                       | Environment Variable | Default |
 |-------------|-------------------------------------------------------------------|----------------------|---------|
 | Server      | The game server for boardgame, exposes socket.io endpoints        | `SERVER_PORT`        | 8000    |
 | Lobby API   | Internal API for lobby operations, should not be exposed publicly | `INTERNAL_API_PORT`  | 8002    |
 | Public API  | Public API to create games and retrieve game info                 | `API_PORT`           | 8001    |
 
- If you want to build the server code manually, you can do so by running
+If you want to build the server code manually, you can do so by running
+
+```bash
+npx turbo run build --filter=@eop/server
+```
+
+You can also start the server in production mode:
 
 ```bash
-npm run build:server
+npx turbo run start --filter=@eop/server
 ```
 
-The UI can be started using
+The UI can be started in dev mode using
 
 ```bash
-npm start
+npx turbo run dev --filter=@eop/client
 ```
 
-which starts a watch mode that automatically compiles and reloads the UI every time source files are changed. The UI is
-accessible at [http://localhost:3000/](http://localhost:3000/).
+The UI is accessible at [http://localhost:3000/](http://localhost:3000/).
 
 You can also build the client manually by running
 
 ```bash
-npm run build:client
+npx turbo run build --filter=@eop/client
 ```
 
-The UI can also be built and served statically (see the [dockerfile](docker/client.dockerfile)), keep in mind that the values of the port numbers will be hard coded in the generated files.
+The UI can also be built and served statically (see the [Dockerfile](apps/client/Dockerfile)). Keep in mind that the values of the port numbers will be hard coded in the generated files.
 
 To build both the client and the server, just run
 
 ```bash
-npm run build
+npx turbo run build
 ```
 
 #### Imprint and privacy notices
@@ -162,23 +177,9 @@ are set when building the app.
 When building the client via docker these env vars can be set by defining `build-args`
 
 ```bash
-docker build --build-arg "REACT_APP_EOP_IMPRINT=https://example.tld/imprint/" --build-arg "REACT_APP_EOP_PRIVACY=https://example.tld/privacy/" -f docker/client.dockerfile . -t "some-tag"
+docker build --build-arg "REACT_APP_EOP_IMPRINT=https://example.tld/imprint/" --build-arg "REACT_APP_EOP_PRIVACY=https://example.tld/privacy/" -f apps/client/Dockerfile . -t "some-tag"
 ```
 
-### Using MongoDB
-
-As of boardgame.io v0.39.0, MongoDB is no longer supported as a database connector. There is currently no external library providing this functionality, however there is an [implementation](https://github.com/boardgameio/boardgame.io/issues/6#issuecomment-656144940) posted on github. This class implements the abstract functions in [this base class](https://github.com/boardgameio/boardgame.io/blob/ce8ef4a16bcc420b05c5e0751b41f168352bce7d/src/server/db/base.ts#L49-L111).
-
-MongoDB has also been removed as a dependency so must be installed by running
-
-```bash
-npm install mongodb
-```
-
-An equivalent to `ModelFlatFile` should also be implemented. This extends the FlatFile database connector to allow the model to be saved to the database. The functions this implements are `setModel`, which allows the model to be set, and `fetch`, which is also overwritten to allow the model to be read in addition to the other properties. The implementations of these for the FlatFile object are available in `ModelFlatFile.ts`
-
-Once the database connector is fully implemented, it can be used instead of a FlatFile by changing the object used in `config.ts`. Just replace `ModelFlatFile` with the name of the mongoDB database connector.
-
 ## Credits
 The card game Elevation of Privilege was originally invented by [Adam Shostack](https://adam.shostack.org/) at Microsoft and is licensed under [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/). The [EoP Whitepaper](http://download.microsoft.com/download/F/A/E/FAE1434F-6D22-4581-9804-8B60C04354E4/EoP_Whitepaper.pdf) written by Adam can be downloaded which describes the motivation, experience and lessons learned in creating the game.
 

apps/client/.prettierignore

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

apps/client/Dockerfile

@@ -0,0 +1,27 @@
+FROM node:20-alpine AS base
+
+FROM base AS pruner
+WORKDIR /app
+COPY . .
+RUN npm ci --workspaces=false
+RUN npx turbo prune @eop/client --docker
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=pruner /app/out/json/ .
+COPY --from=pruner /app/out/package-lock.json ./package-lock.json
+RUN npm ci
+COPY --from=pruner /app/out/full/ .
+ARG REACT_APP_EOP_IMPRINT
+ARG REACT_APP_EOP_PRIVACY
+ARG REACT_APP_EOP_BANNER_TEXT
+ENV REACT_APP_EOP_IMPRINT=$REACT_APP_EOP_IMPRINT
+ENV REACT_APP_EOP_PRIVACY=$REACT_APP_EOP_PRIVACY
+ENV REACT_APP_EOP_BANNER_TEXT=$REACT_APP_EOP_BANNER_TEXT
+RUN npx turbo run build
+
+FROM nginxinc/nginx-unprivileged:1.27.0-alpine
+COPY --from=builder /app/apps/client/nginx/etc/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /app/apps/client/nginx/etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/apps/client/build /usr/share/nginx/html/
+EXPOSE 8080

apps/client/eslint.config.mjs

@@ -0,0 +1,11 @@
+import config from '@eop/eslint-config/type-checked';
+import react from 'eslint-plugin-react/configs/recommended.js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['build/'] },
+  { languageOptions: { parserOptions: { project: './tsconfig.json' } } },
+  { settings: { react: { version: 'detect' } } },
+  react,
+  ...config,
+);