impr(dev): allow docker compose to start the backend server (plbstl, Miodec) (#4995)

* chore: allow backend docker compose to start the api-server alongside redis & mongodb

* chore: update node versions in docker compose

* chore: add an extra compose file in backend

* docs: update advanced contribution guide with docker compose changes

* add docker script
support server_open env variable

* move files

* npm scripts
rename file

* add docker ignore

* fix redis not working

* rename file

* mounting root instead

* update docs

* update docs table of contents

* restart on fail

---------

Co-authored-by: Miodec <jack@monkeytype.com>

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+frontend/node_modules
+backend/node_modules

CONTRIBUTING_ADVANCED.md

@@ -2,15 +2,22 @@
 
 ## **Table of Contents**
 
-- [Prerequisites](#prerequisites)
-  - [Git](#git)
-  - [NodeJS and NPM](#nodejs-and-npm)
-  - [Firebase](#firebase)
-  - [Docker (Recommended but Optional)](#docker-recommended-but-optional)
-  - [Backend (optional)](#backend-optional)
-- [Building and Running Monkeytype](#building-and-running-monkeytype)
-- [Standards and Guidelines](#standards-and-guidelines)
-- [Questions](#questions)
+- [Contributing - Advanced](#contributing---advanced)
+  - [**Table of Contents**](#table-of-contents)
+  - [Prerequisites](#prerequisites)
+    - [Git](#git)
+    - [NodeJS and NPM](#nodejs-and-npm)
+    - [Docker (Recommended but Optional)](#docker-recommended-but-optional)
+    - [Firebase (optional)](#firebase-optional)
+    - [Config file](#config-file)
+    - [Databases (optional if running frontend only)](#databases-optional-if-running-frontend-only)
+  - [Building and Running Monkeytype](#building-and-running-monkeytype)
+    - [Dependencies (if running manually)](#dependencies-if-running-manually)
+    - [Both Frontend and Backend](#both-frontend-and-backend)
+    - [Backend only](#backend-only)
+    - [Frontend only](#frontend-only)
+  - [Standards and Guidelines](#standards-and-guidelines)
+  - [Questions](#questions)
 
 ## Prerequisites
 
@@ -90,7 +97,7 @@ If you want to access the frontend from other machines on your network create a
 BACKEND_URL="http://<Your IP>:5005"
 ```
 
-### Backend (optional)
+### Databases (optional if running frontend only)
 
 Follow these steps if you want to work on anything involving the database/account system. Otherwise, you can skip this section.
 
@@ -98,43 +105,45 @@ Follow these steps if you want to work on anything involving the database/accoun
 
 2. Setup the database server
 
-| Local Server                                                                                                                                             | Docker (recommended)                                                                                                                                                                                                   |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <ol><li>Install [MongoDB Community Edition](https://docs.mongodb.com/manual/administration/install-community/)</li><li>Make sure it is running</li></ol> | <ol><li>Install [Docker](http://www.docker.io/gettingstarted/#h_installation) on your machine</li><li>Run `docker compose up` from the `./backend` directory (this is also how you start the backend server)</li></ol> |
+| Manual                                                                                                                                                                                                                            | Docker (recommended)                                                                                                                                                        |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <ol><li>Install [MongoDB Community Edition](https://docs.mongodb.com/manual/administration/install-community/)</li><li>Install [Redis](https://redis.io/docs/install/install-redis/)</li><li>Make sure both are running</li></ol> | <ol><li>Install [Docker](http://www.docker.io/gettingstarted/#h_installation) on your machine</li><li>Run `npm run docker-db-only` from the `./backend` directory</li></ol> |
 
 3. (Optional) Install [MongoDB-compass](https://www.mongodb.com/try/download/compass?tck=docs_compass). This tool can be used to see and manipulate your database visually.
    - To connect, type `mongodb://localhost:27017` in the connection string box and press connect. The Monkeytype database will be created and shown after the server is started.
 
 ## Building and Running Monkeytype
 
-- Run `npm run install-all` in the project root to install all dependencies.
-  - If you are on Windows, use `npm run install-windows`.
-  - If neither works, you will have to run `npm install` in root, frontend, and backend directories.
-    Now you are ready to build and run Monkeytype.
+Its time to run Monkeytype. Just like with the databases, you can run the frontend and backend manually or with Docker.
 
-### Using Docker:
+### Dependencies (if running manually)
 
-- Frontend:
-  ```
-  cd frontend && docker compose up
-  ```
-- Backend (in another terminal window):
-  ```
-  cd backend && docker compose up
-  ```
+Run `npm run install-all` in the project root to install all dependencies.
 
-### **_Without_** Docker:
+- If you are on Windows, use `npm run install-windows`.
+- If neither works, you will have to run `npm install` in root, frontend, and backend directories.
 
-- Frontend and backend
-  ```
-  npm run dev
-  ```
-- Only frontend (if you skipped the Backend section):
-  ```
-  npm run dev-fe
-  ```
+### Both Frontend and Backend
 
-These commands will start a local dev server on [port 3000](http://localhost:3000). It will watch for changes and rebuild when you edit files in `src/` or `public/` directories. Use <kbd>Ctrl+C</kbd> to stop it.
+Manual:
+
+```
+npm run dev
+```
+
+### Backend only
+
+| Manual                      | Docker                         |
+| --------------------------- | ------------------------------ |
+| `cd backend && npm run dev` | `cd backend && npm run docker` |
+
+### Frontend only
+
+| Manual                       | Docker                          |
+| ---------------------------- | ------------------------------- |
+| `cd frontend && npm run dev` | `cd frontend && npm run docker` |
+
+These commands will start a local development website on [port 3000](http://localhost:3000) and a local development server on [port 5005](http://localhost:5005). They will automatically rebuild the website/server when you make changes in the `src/` directory. Use <kbd>Ctrl+C</kbd> to stop them.
 
 Note: Rebuilding doesn't happen instantaneously and depends on your machine, so be patient for changes to appear.
 

backend/docker/compose.db-only.yml

@@ -1,22 +1,23 @@
+name: monkeytype
 version: "3.8"
 services:
-  monkeytype-redis:
+  redis:
     container_name: monkeytype-redis
     image: redis:6.2.6
+    restart: on-failure
     ports:
       - "${DOCKER_REDIS_PORT:-6379}:${DOCKER_REDIS_PORT:-6379}"
-    restart: on-failure
     volumes:
       - redis-data:/data
 
-  monkeytype-mongodb:
+  mongodb:
     container_name: monkeytype-mongodb
     image: mongo:5.0.8
     restart: on-failure
-    volumes:
-      - mongo-data:/data/db
     ports:
       - "${DOCKER_DB_PORT:-27017}:${DOCKER_DB_PORT:-27017}"
+    volumes:
+      - mongo-data:/data/db
 
 volumes:
   mongo-data:

backend/docker/compose.yml

@@ -0,0 +1,40 @@
+name: monkeytype
+version: "3.8"
+services:
+  redis:
+    container_name: monkeytype-redis
+    image: redis:6.2.6
+    restart: on-failure
+    ports:
+      - "${DOCKER_REDIS_PORT:-6379}:${DOCKER_REDIS_PORT:-6379}"
+    volumes:
+      - redis-data:/data
+
+  mongodb:
+    container_name: monkeytype-mongodb
+    image: mongo:5.0.8
+    restart: on-failure
+    ports:
+      - "${DOCKER_DB_PORT:-27017}:${DOCKER_DB_PORT:-27017}"
+    volumes:
+      - mongo-data:/data/db
+
+  api-server:
+    container_name: monkeytype-api-server
+    image: node:18.19.1
+    restart: on-failure
+    depends_on:
+      - redis
+      - mongodb
+    environment:
+      - DB_URI=mongodb://mongodb:27017
+      - REDIS_URI=redis://redis:6379
+    ports:
+      - "${DOCKER_SERVER_PORT:-5005}:${DOCKER_SERVER_PORT:-5005}"
+    volumes:
+      - ../../:/monkeytype
+    entrypoint: 'bash -c "cd /monkeytype/backend && npm install && npm run dev"'
+
+volumes:
+  mongo-data:
+  redis-data:

backend/example.env

@@ -1,4 +1,5 @@
 DB_NAME=monkeytype
+DOCKER_SERVER_PORT=5005
 DOCKER_DB_PORT=27017
 DB_URI=mongodb://localhost:27017
 DOCKER_REDIS_PORT=6379
@@ -17,7 +18,7 @@ RECAPTCHA_SECRET=6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
 
 # You can get a testing email address over at
 # https://ethereal.email/create
-# 
+#
 # EMAIL_PORT=587
 # EMAIL_HOST=smtp.ethereal.email
 # EMAIL_USER=

backend/package.json

@@ -10,7 +10,9 @@
     "start": "npm run build && node ./build/server.js",
     "test": "jest --verbose --collect-coverage --runInBand",
     "dev": "ts-node-dev ./src/server.ts -- --inspect --transpileOnly",
-    "knip": "knip"
+    "knip": "knip",
+    "docker-db-only": "docker-compose -f docker/compose.db-only.yml up",
+    "docker": "docker-compose -f docker/compose.yml up"
   },
   "engines": {
     "node": "18.19.1",

frontend/docker-compose.yaml

@@ -1,11 +0,0 @@
-services:
-  monkeytype-frontend:
-    container_name: monkeytype-frontend
-    image: node:gallium-bullseye
-    restart: on-failure
-    ports:
-      - "3000:3000"
-    volumes:
-      - ../:/monkeytype
-    user: node
-    entrypoint: 'bash -c "cd /monkeytype && npm run dev-fe"'

frontend/docker/compose.dev.yml

@@ -0,0 +1,15 @@
+name: monkeytype
+services:
+  frontend:
+    container_name: monkeytype-frontend
+    image: node:18.19.1
+    # restart: on-failure
+    environment:
+      - SERVER_OPEN=false
+    ports:
+      - "3000:3000"
+    volumes:
+      - ../../:/monkeytype
+    user: node
+    entrypoint: 'bash -c "cd /monkeytype/frontend && npm i && npm run dev"'
+    # entrypoint: "tail -f /dev/null"

frontend/package.json

@@ -18,7 +18,8 @@
     "test-coverage": "vitest run --coverage",
     "dev-test": "concurrently --kill-others \"vite dev\" \"vitest\"",
     "tsc": "tsc",
-    "knip": "knip"
+    "knip": "knip",
+    "docker": "docker-compose -f docker/compose.dev.yml up"
   },
   "engines": {
     "node": "18.19.1",

frontend/vite.config.js

@@ -27,11 +27,15 @@ function buildClientVersion() {
   );
   const version = [versionPrefix, versionSuffix].join("_");
 
-  const commitHash = childProcess
-    .execSync("git rev-parse --short HEAD")
-    .toString();
+  try {
+    const commitHash = childProcess
+      .execSync("git rev-parse --short HEAD")
+      .toString();
 
-  return `${version}.${commitHash}`;
+    return `${version}.${commitHash}`;
+  } catch (e) {
+    return `${version}.unknown-hash`;
+  }
 }
 
 /** @type {import("vite").UserConfig} */
@@ -71,7 +75,7 @@ const BASE_CONFIG = {
     Inspect(),
   ],
   server: {
-    open: true,
+    open: process.env.SERVER_OPEN !== "false",
     port: 3000,
     host: process.env.BACKEND_URL !== undefined,
   },