Finalize local dev env setup

docker/README.md

@@ -1,10 +1,84 @@
+# Running the Application on DevContainer for Local Development
+
+## Pre-requisite
+
+Ensure `Docker` and `Dev Containers` extenion (`ms-vscode-remote.remote-containers`) is installed in your machine.
+
+## Steps
+
+1. Launch code in VSCode.
+2. Hit `Ctrl + Shift + P`, select `Dev Containers: Open Folder in Container...` and wait for it to completely load.
+3. [Start](#starting-the-project) the project.
+
+## Enabling Hot Reloading and Debugging
+
+Hot reloading is a feature that lets you see the effects of your code changes almost instantly without having to completely restart the application. This significantly speeds up the development process.
+
+### Frontend
+
+1. Go to `./manage` file.
+2. Find the `DEFAULT_CONTAINERS` and replace `web` with `web-dev`.
+
+```
+DEFAULT_CONTAINERS="db api web-dev"
+```
+
+3. Find the `build-all` function and replace with the code below.
+
+```
+build-all() {
+ build-web-dev
+ build-api
+}
+```
+
+4. [Rebuild](#building-the-images) the images.
+5. [Start](#starting-the-project) the project.
+
+### Backend
+
+- The backend is automatically utilizing hot reloading.
+- Add the code below to the `launch.json` to enable remote debugging.
+
+```
+{
+  "configurations": [
+    {
+      "name": ".NET Core Docker Attach",
+      "type": "coreclr",
+      "request": "attach",
+      "processId": "${command:pickRemoteProcess}",
+      "pipeTransport": {
+        "pipeProgram": "docker",
+        "pipeArgs": ["exec", "-i", "scv-api-1"],
+        "debuggerPath": "/vsdbg/vsdbg",
+        "pipeCwd": "${workspaceRoot}",
+        "quoteArgs": false
+      },
+      "sourceFileMap": {
+        "/opt/app-root/src": "${workspaceRoot}/"
+      }
+    }
+  ]
+}
+```
+
+## Notes
+
+- When the error below occurs, go to `manage` file and change the _Select End Line of Sequence_ (lower right hand side of VSCode) from **CRLF** to **LF**.
+
+```
+bash: ./manage: /bin/bash^M: bad interpreter: No such file or directory
+```
+
 # Running the Application on Docker
 
 ## Management Script
 
 The `manage` script wraps the Docker process in easy to use commands.
 
 To get full usage information on the script, run:
+
 ```
 ./manage -h
 ```
@@ -14,34 +88,37 @@ To get full usage information on the script, run:
 The first thing you'll need to do is build the Docker images.
 
 To build the images, run:
+
 ```
 ./manage build
 ```
 
 ## Starting the Project
 
 To start the project, run:
+
 ```
 ./manage start
 ```
 
-This will start the project interactively; with all of the logs being written to the command line.  Press `Ctrl-C` to shut down the services from the same shell window.
+This will start the project interactively; with all of the logs being written to the command line. Press `Ctrl-C` to shut down the services from the same shell window.
 
 Any environment variables containing settings, configuration, or secrets can be placed in a `.env` file in the `docker` folder and they will automatically be picked up and loaded by the `./manage` script when you start the application.
 
 ## Stopping the Project
 
 To stop the project, run:
+
 ```
 ./manage stop
 ```
 
-This will shut down and clean up all of the containers in the project.  This is a non-destructive process.  The containers are not deleted so they will be reused the next time you run start.
+This will shut down and clean up all of the containers in the project. This is a non-destructive process. The containers are not deleted so they will be reused the next time you run start.
 
-Since the services are started interactively, you will have to issue this command from another shell window.  This command can also be run after shutting down the services using the `Ctrl-C` method to clean up any services that may not have shutdown correctly.
+Since the services are started interactively, you will have to issue this command from another shell window. This command can also be run after shutting down the services using the `Ctrl-C` method to clean up any services that may not have shutdown correctly.
 
 ## Using the Application
 
 - By default, the main developer UI is exposed at; https://localhost:8080/scjscv/
 - The Swagger API and documentation is available at; https://localhost:8080/scjscv/api/
-  - Which is also exposed directly at; http://localhost:5000/api/
+- Which is also exposed directly at; http://localhost:5000/api/

docker/docker-compose.yaml

@@ -15,6 +15,23 @@ services:
     depends_on:
       - api
 
+  web-dev:
+    image: "scv-web-dev"
+    environment:
+      - API_URL=${API_URL}
+      - WEB_BASE_HREF=${WEB_BASE_HREF}
+      - DEV_MODE=false
+      - NODE_ENV=development
+      - NPM_CONFIG_LOGLEVEL=notice
+      - NPM_RUN=serve
+    ports:
+      - 8080:1339
+    volumes:
+      - "../web/src:/opt/app-root/src/src"
+      - "../web/package.json:/opt/app-root/src/package.json"
+    depends_on:
+      - api
+
   api:
     image: scv-api
     environment: 

docker/manage

@@ -52,12 +52,15 @@ usage() {
 EOF
 exit 1
 }
-
+# -----------------------------------------------------------------------------------------------------------------
+# Default Settings:
+# -----------------------------------------------------------------------------------------------------------------
+DEFAULT_CONTAINERS="db api web-dev"
 # -----------------------------------------------------------------------------------------------------------------
 # Functions:
 # -----------------------------------------------------------------------------------------------------------------
 build-all() {
- build-web
+ build-web-dev
  build-api
 }
 
@@ -130,9 +133,11 @@ build-web-dev() {
   echo -e "Building the scv-web-dev image using s2i ..."
   echo -e "----------------------------------------------------------------------------------------------------"
   ${S2I_EXE} build \
+    --copy \
     -e "DEV_MODE=true" \
+    -e WEB_BASE_HREF=${WEB_BASE_HREF} \
     '../web' \
-    'quay.io/centos7/nodejs-12-centos7' \
+    'centos/nodejs-12-centos7' \
     'scv-web-dev'
   echo -e "===================================================================================================="
 }
@@ -165,21 +170,24 @@ configureEnvironment () {
 
 getStartupParams() {
   CONTAINERS=""
-
-  ARGS=""
+  ARGS="--force-recreate"
 
   for arg in $@; do
     case "$arg" in
       *=*)
         # Skip it
-        ;;
+        ;;  
      -*)
         ARGS+=" $arg";;
       *)
         CONTAINERS+=" $arg";;
     esac
   done
 
+  if [ -z "$CONTAINERS" ]; then
+    CONTAINERS="$DEFAULT_CONTAINERS"
+  fi
+
   echo ${ARGS} ${CONTAINERS}
 }
 

web/vue.config.js

@@ -10,18 +10,23 @@ module.exports = {
 	configureWebpack: {
 		devServer: {
 			historyApiFallback: true,
-			host: 'localhost',
+			host: '0.0.0.0',
 			port: 1339,
 			https: true,
+			watchOptions: {
+				ignored: /node_modules/,
+				aggregateTimeout: 300,
+				poll: 1000,
+			},
 			proxy: {
 				//This is for WEB_BASE_HREF = '/' specifically. 
 				//If having problems connecting, try adding: netsh http add iplisten 127.0.0.1
 				'^/api': {
-					target: "https://localhost:44369",
+					target: "http://host.docker.internal:5000",
 					headers: {
 						Connection: 'keep-alive',
 						'X-Forwarded-Host': 'localhost',
-						'X-Forwarded-Port': '1339',
+						'X-Forwarded-Port': '8080',
 						'X-Base-Href': '/'
 					},
 					changeOrigin: true