dockerfile improvement

Author: bloombar

.circleci/config.yml

@@ -86,8 +86,10 @@ Copy the file named `.env.example` into a new file named simply, `.env`.
 
 Make sure the `FRONT_END_DOMAIN` setting in this file specifies the correct domain and port where the React front-end app is running.
 
+e.g.
+
 ```js
-FRONT_END_DOMAIN=http://localhost:3001
+FRONT_END_DOMAIN=http://localhost:4000
 ```
 
 ### Install dependencies
@@ -128,7 +130,7 @@ The containerized back-end app should now be running as a background daemon on `
 
 ### Front-end
 
-Open the front-end (`http://localhost:4000`) in your favorite web browser (this should have popped open automatically, unless running the containerized version of the app). Open the browser's `Developer Tools`:
+Open the front-end (`http://localhost:4000` or whichever port React's dev server is runnong on) in your favorite web browser (this should have popped open automatically, unless running the containerized version of the app). Open the browser's `Developer Tools`:
 
 - use the `Console` tab to see any debugging output from the Javascript code running in the browser.
 - use the `Network` tab to see details of all HTTP requests and responses to/from the back-end server. In particular, look at the cookie and authorization-related HTTP headers.

README.md

@@ -2,10 +2,10 @@
 FROM node:16
 
 # create an app directory within the image... if doing this, just make sure your other Dockerfile commands reference this directory
-# WORKDIR /app
+WORKDIR /app
 
 # install dependencies into the image - doing this first will speed up subsequent builds, as Docker will cache this step
-COPY package*.json ./
+COPY package*.json .
 RUN npm install
 
 # copy the remaining app source code into the default directory within the image

back-end/Dockerfile

@@ -0,0 +1,46 @@
+version: '3.8'
+
+services:
+  mongo:
+    image: mongo:latest
+    container_name: ds-mongo
+    ports:
+      - '27017:27017'
+    # volumes:
+    #   - mongo-data:/data/db
+    environment:
+      - MONGO_INITDB_ROOT_USERNAME=admin
+      - MONGO_INITDB_ROOT_PASSWORD=secret
+
+  backend:
+    image: node:latest
+    container_name: ds-backend
+    working_dir: /app
+    # volumes:
+    #   - /data/backend:/app
+    ports:
+      - '3000:3000'
+    environment:
+      - FRONT_END_DOMAIN=http://localhost:4000
+      - JWT_SECRET=knowledge.kitchen
+      - JWT_EXP_DAYS=60
+      - MONGODB_URI=mongodb://admin:secret@localhost:27017/data-storage-app?authSource=admin
+    depends_on:
+      - mongo
+    command: sh -c "npm install && npm start"
+  frontend:
+    image: node:latest
+    container_name: ds-frontend
+    working_dir: /app
+    # volumes:
+    #   - /data/front-end:/app
+    environment:
+      - PORT=4000 # the port at which the react app will run
+      - REACT_APP_BACKEND=http://localhost:3000
+    ports:
+      - '4000:4000'
+    depends_on:
+      - backend
+    command: sh -c "npm install && npm start"
+# volumes:
+#   mongo-data:

docker-compose.yml

@@ -2,15 +2,18 @@
 FROM node:16
 
 # create an app directory within the image... if doing this, just make sure your other Dockerfile commands reference this directory
-# WORKDIR /app
+WORKDIR /app
 
 # install dependencies into the image - doing this first will speed up subsequent builds, as Docker will cache this step
-COPY package*.json ./
+COPY package*.json .
 RUN npm install
 
 # copy the remaining app source code into the default directory within the image
 COPY . .
 
+# install dependencies into the image
+RUN npm install
+
 # expose port 4000 to make it available to the docker daemon
 EXPOSE 4000