Create docker-compose.yaml file for frontend (#3058)

* Create docker-compose.yaml file for frontend

* Move docker-compose.yaml file

* change name

* Add docker instructions

* Add docker installation link

CONTRIBUTING_ADVANCED.md

@@ -6,6 +6,7 @@
   - [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)
@@ -71,6 +72,15 @@ Alternatively, if you use `nvm` then you can run `nvm install` and `nvm use` (yo
    - Click "Generate New Private Key"
    - Save as `serviceAccountKey.json` inside the `backend/credentials/` directory.
 
+#### Docker (Recommended but Optional)
+
+You can use docker to run the frontend development environment. This will take care of OS specific problems. After installing [Docker](https://www.docker.com/get-started/#h_installation) run the following command to start the frontend server:
+
+```bash
+cd frontend && docker-compose up
+```
+Once wepback has compiled, the frontend will be served on [port 3000](http://localhost:3000)
+
 #### Backend (optional)
 
 Follow these steps if you want to work on anything involving the database/account system. Otherwise, you can skip this section.

frontend/docker-compose.yaml

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