Improve instructions to run dev environment with Docker

README.md

@@ -37,9 +37,6 @@ A full development environment can be brought up using Docker, without having to
 ```bash
 make docker-test
 
-# **OR** with docker-compose directly
-
-docker-compose -f docker-compose.yml -f docker-compose.dev.yml up
 ```
 
 Then go to `http://localhost`. If you're using dnsmasq, the `app` container is listening on `phpvms.test`, or you can add to your `/etc/hosts` file:
@@ -48,14 +45,29 @@ Then go to `http://localhost`. If you're using dnsmasq, the `app` container is l
 127.0.0.1   phpvms.test
 ```
 
-The `docker-compose.local.yml` overrides the `app` section in `docker-compose.yml`. The standard `docker-compose.yml` can be used if you want to deploy from the image, or as a template for your own Dockerized deployments.
+### Accessing npm or composer with Docker
+
+You can access to npm and composer by going into the Docker comtainer:
+
+```
+$ docker compose -f docker-compose.dev.yml exec -it app /bin/sh
+/var/www #
+```
+
+Run `composer install` if this is your first bootup of the Docker environment
+
 
 ### Building JS/CSS assets
 
-Yarn is required, run:
+Install frontend dependencies:
+
+```
+npm install
+```
+
+Build all of the assets according to the webpack file:
 
 ```bash
 make build-assets
 ```
 
-This will build all of the assets according to the webpack file.

docker-compose.dev.yml

@@ -1,6 +1,5 @@
 #
-# Run with either `make docker-test` or the following Docker command:
+# Run with `make docker-test`
-# docker-compose -f docker-compose.yml -f docker-compose.dev.yml up
 #
 ---
 services:
@@ -54,3 +53,12 @@ services:
       - ./resources/docker/mysql:/etc/mysql/conf.d
     ports:
       - 3306:3306
+
+  redis:
+    image: redis:5.0.4-alpine
+    command: ["redis-server", "--appendonly", "yes"]
+    volumes:
+      - ./storage/docker/redis:/data
+    ports:
+      - 6379:6379
+    restart: always

package-lock.json

@@ -54,8 +54,8 @@
         "eslint-plugin-jsx-a11y": "^6.2.3",
         "eslint-plugin-react": "^7.21.5",
         "node-gyp": "~9.1.0",
-        "sass": "^1.32.13",
+        "sass": "^1.54.5",
-        "sass-loader": "^8.0.2",
+        "sass-loader": "^12.1.0",
         "tailwindcss": "^0.5.3",
         "vue-template-compiler": "^2.6.12",
         "webpack-bundle-analyzer": "^3.9.0",
@@ -10241,19 +10241,16 @@
       }
     },
     "node_modules/sass-loader": {
-      "version": "8.0.2",
+      "version": "12.6.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
-      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
       "dev": true,
       "dependencies": {
-        "clone-deep": "^4.0.1",
+        "klona": "^2.0.4",
-        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.2"
-        "neo-async": "^2.6.1",
-        "schema-utils": "^2.6.1",
-        "semver": "^6.3.0"
       },
       "engines": {
-        "node": ">= 8.9.0"
+        "node": ">= 12.13.0"
       },
       "funding": {
         "type": "opencollective",
@@ -10261,9 +10258,10 @@
       },
       "peerDependencies": {
         "fibers": ">= 3.1.0",
-        "node-sass": "^4.0.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
         "sass": "^1.3.0",
-        "webpack": "^4.36.0 || ^5.0.0"
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
       },
       "peerDependenciesMeta": {
         "fibers": {
@@ -10274,62 +10272,12 @@
         },
         "sass": {
           "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
         }
       }
     },
-    "node_modules/sass-loader/node_modules/json5": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      }
-    },
-    "node_modules/sass-loader/node_modules/loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/sass-loader/node_modules/schema-utils": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/sass-loader/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/schema-utils": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
@@ -20036,55 +19984,13 @@
       }
     },
     "sass-loader": {
-      "version": "8.0.2",
+      "version": "12.6.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
-      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
       "dev": true,
       "requires": {
-        "clone-deep": "^4.0.1",
+        "klona": "^2.0.4",
-        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.2"
-        "neo-async": "^2.6.1",
-        "schema-utils": "^2.6.1",
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "schema-utils": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.5",
-            "ajv": "^6.12.4",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
       }
     },
     "schema-utils": {