WIP: Separate app into workspaces

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

.dockerignore

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

.github/workflows/checks.yml

@@ -2,26 +2,28 @@ name: Checks
 
 on:
   push:
-    branches: ['*']
+    branches: ["*"]
   pull_request:
     branches: [master]
 
-env:
-  node-version: '16.x'
-
 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 }}
-          cache: 'npm'
+          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: npm run checkformat -ws --if-present
+      - run: npm run build -w @eop/shared
+      - run: npm run lint -ws --if-present
+      - run: npm run build -ws --if-present
+      - run: npm test -ws --if-present

.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,8 +24,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-db/
-db-images/
 deploy/
 
 # IDE

apps/client/.prettierignore

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

apps/client/Dockerfile

@@ -0,0 +1,28 @@
+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/ .
+RUN npm run build -w @eop/shared
+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 npm run build -w @eop/client
+
+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,
+);

apps/client/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@eop/client",
+  "type": "module",
+  "version": "0.24.0",
+  "main": "src/client/index.tsx",
+  "scripts": {
+    "build": "react-scripts build",
+    "start": "react-scripts start",
+    "test": "react-scripts test",
+    "lint": "eslint .",
+    "fixlint": "eslint . --fix",
+    "checkformat": "prettier . --check",
+    "format": "prettier . --write"
+  },
+  "dependencies": {
+    "@eop/cornucopia-cards": "*",
+    "@eop/shared": "*",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "bootstrap": "^4.6.0",
+    "jointjs": "^3.7.7",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-countdown-circle-timer": "^3.2.1",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
+    "react-map-interaction": "^2.1.0",
+    "react-nl2br": "^1.0.4",
+    "react-router-dom": "^5.3.1",
+    "reactstrap": "^8.10.1",
+    "reactstrap-confirm": "^1.3.2",
+    "superagent": "^9.0.2"
+  },
+  "devDependencies": {
+    "@eop/eslint-config": "*",
+    "@eop/prettier-config": "*",
+    "@eop/typescript-config": "*",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/backbone": "^1.4.19",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/superagent": "^8.1.7",
+    "eslint-plugin-react": "^7.34.3",
+    "nock": "^13.3.8",
+    "prettier": "^3.3.2",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.8.4",
+    "typescript-eslint": "^8.0.0-alpha.37"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!<rootDir>/node_modules/",
+      "!src/serviceWorker.js",
+      "!src/components/board/board.ignoretest.js",
+      "!src/jointjs/shapes.js",
+      "!src/index.tsx"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 5,
+        "functions": 5,
+        "lines": 5,
+        "statements": 5
+      }
+    },
+    "coverageReporters": [
+      "text",
+      "lcov"
+    ]
+  },
+  "private": true
+}

apps/client/prettier.config.js

@@ -0,0 +1,3 @@
+import config from '@eop/prettier-config';
+
+export default config;

public/index.html → apps/client/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

src/client/components/banner/banner.test.tsx → apps/client/src/components/banner/banner.test.tsx

@@ -19,13 +19,13 @@ describe('Banner', () => {
     expect(banner).toBeInTheDocument();
   });
 
-  it('should not render link if env var is not defined', async () => {
+  it('should not render link if env var is not defined', () => {
     // given
     process.env.REACT_APP_EOP_BANNER_TEXT = '';
     render(<Banner />);
 
     // when
-    const banner = await screen.queryByText('This is a banner text');
+    const banner = screen.queryByText('This is a banner text');
 
     // then
     expect(banner).not.toBeInTheDocument();

src/client/components/board/board.test.tsx → apps/client/src/components/board/board.test.tsx

@@ -1,13 +1,17 @@
-import React from 'react';
+import {
+  API_PORT,
+  DEFAULT_GAME_MODE,
+  DEFAULT_TURN_DURATION,
+  ModelType,
+} from '@eop/shared';
 import { render, screen } from '@testing-library/react';
-import Board from './board';
-import { DEFAULT_TURN_DURATION, ModelType } from '../../../utils/constants';
-import { DEFAULT_GAME_MODE } from '../../../utils/GameMode';
-import type { GameState } from '../../../game/gameState';
-import type { Ctx } from 'boardgame.io';
+import React from 'react';
 import nock from 'nock';
 
-import { API_PORT } from '../../../utils/serverConfig';
+import Board from './board';
+
+import type { GameState } from '@eop/shared';
+import type { Ctx } from 'boardgame.io';
 
 const baseUrl = `${window.location.protocol}//${window.location.hostname}:${API_PORT}`;