[FEATURE] Docker compose config - Issue #1039

README.md

@@ -16,14 +16,42 @@ The application is implemented using [React](https://reactjs.org/).
 
 ## Development
 
-### Install dependencies
+### Without Docker
+
+#### Install dependencies
 
 You'll need to install the project's dependencies before you can run the server:
 
 ```console
 npm install
 ```
 
+### Docker
+
+First [start your backend server](https://github.com/burningmantech/ranger-ims-server#development) with `docker-compose`, then start your frontend server. This will create the required docker network.
+
+#### Install dependencies
+
+You'll need to install the project's dependencies before you can run the server:
+
+```console
+docker compose run --rm app npm install
+```
+
+#### Start the frontend server
+
+```console
+docker compose up app -d
+```
+
+#### Troubleshooting
+
+##### Network error with all docker commands
+
+`Error response from daemon: network rangers not found`
+
+If you see this error you did not start the backend server in docker first.
+
 ### Running the Test Suite
 
 To run all of the tests:

docker-compose.yml

@@ -0,0 +1,20 @@
+version: "3.7"
+
+services:
+  app:
+    container_name: "ranger_ims_web"
+    image: "${NODE_IMG_TAG:-node:18.18.2-alpine3.17}"
+    user: ":${NODE_GROUP_ID:-1420}"
+    ports:
+      - "${NODE_PORT:-3000}:3000"
+    environment:
+      - "BACKEND_URL=${BACKEND_URL:-http://ranger_ims_server:8080}"
+    volumes:
+      - "./:/app:cached"
+    command: "npm start"
+    working_dir: "/app"
+
+networks:
+  default:
+    external: true
+    name: "${DOCKER_RANGERS_NETWORK:-rangers}"

docker-dev-sample.env

@@ -0,0 +1,3 @@
+# BACKEND_URL="http://ranger_ims_server:8080"
+# NODE_PORT=3000
+# DOCKER_RANGERS_NETWORK="rangers"

src/setupProxy.js

@@ -3,11 +3,13 @@
 
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
+const backendUrl = process.env.BACKEND_URL || "http://127.0.0.1:8080";
+
 module.exports = function (app) {
   app.use(
     "/ims/api",
     createProxyMiddleware({
-      target: "http://127.0.0.1:8080",
+      target: backendUrl,
       changeOrigin: true,
     }),
   );
@@ -16,21 +18,21 @@ module.exports = function (app) {
   app.use(
     "/ims/auth",
     createProxyMiddleware({
-      target: "http://127.0.0.1:8080",
+      target: backendUrl,
       changeOrigin: true,
     }),
   );
   app.use(
     "/ims/ext",
     createProxyMiddleware({
-      target: "http://127.0.0.1:8080",
+      target: backendUrl,
       changeOrigin: true,
     }),
   );
   app.use(
     "/ims/static",
     createProxyMiddleware({
-      target: "http://127.0.0.1:8080",
+      target: backendUrl,
       changeOrigin: true,
     }),
   );