fix(examples): ensure Vue web servers start correctly (#5668)

In some examples, the Vue web server wouldn't start correctly due to how eslint was set up and the version of some of its dependencies. This commit fixes that.
garden-io · Jan 26, 2024 · 1979e0e · 1979e0e
1 parent 466ac8c
commit 1979e0e
Show file tree

Hide file tree

Showing 18 changed files with 124 additions and 127 deletions.
diff --git a/core/src/garden.ts b/core/src/garden.ts
@@ -2065,7 +2065,7 @@ async function prepareCloud({
     )} command.`
     if (isCommunityEdition) {
       cloudLog.info(msg)
-      cloudLog.info(`Learn more at: ${styles.underline(`${DOCS_BASE_URL}/using-garden/dashboard`)}`)
+      cloudLog.info(`Learn more at: ${styles.link(`${DOCS_BASE_URL}/using-garden/dashboard`)}`)
     } else {
       cloudLog.warn(msg)
     }

diff --git a/examples/k8s-deploy-config-templates/README.md b/examples/k8s-deploy-config-templates/README.md
@@ -13,7 +13,7 @@ The example is a three tier web app with web, API, and database components.
 
 ## How it's set up
 
-### The overview
+### Overview
 
 At the root of the project there's a directory called `manifests` which contains manifests for the API and web
 components.

diff --git a/examples/k8s-deploy-config-templates/project.garden.yml b/examples/k8s-deploy-config-templates/project.garden.yml
@@ -1,6 +1,6 @@
 apiVersion: "garden.io/v1"
 kind: Project
-name: kubernetes-deploy-shared-manifests
+name: k8s-deploy-config-templates
 defaultEnvironment: local
 dotIgnoreFile: .gitignore
 
@@ -10,7 +10,7 @@ variables:
   postgresPassword: postgres # <-- Don't do this in production!
   # postgresPassword: ${secrets.POSTGRES_PASSWORD} # <-- It's recommended to store secrets in Garden Enterprise
 
-  remoteEnvName: k8s-deploy-shared-${kebabCase(local.username)}
+  remoteEnvName: k8s-deploy-config-templates-${kebabCase(local.username)}
 
 environments:
   - name: local

diff --git a/examples/k8s-deploy-config-templates/templates/garden.yml b/examples/k8s-deploy-config-templates/templates/garden.yml
@@ -19,7 +19,7 @@ configs:
 
     dependencies:
       - build.${parent.name}
-      - $concat: "${input.dependencies ? input.dependencies : []}"
+      - $concat: "${inputs.dependencies || []}"
 
     spec:
       files: ${inputs.manifests}

diff --git a/examples/k8s-deploy-config-templates/web/.eslintrc.js b/examples/k8s-deploy-config-templates/web/.eslintrc.js
@@ -3,15 +3,19 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-  ],
+  extends: ["plugin:vue/essential", "@vue/airbnb"],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "vue/multi-word-component-names": [
+      "error",
+      {
+        ignores: ["Vote"],
+      },
+    ],
   },
+  plugins: ["only-warn"],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: "@babel/eslint-parser",
   },
-};
+}
diff --git a/examples/k8s-deploy-config-templates/web/babel.config.js b/examples/k8s-deploy-config-templates/web/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app',
+    '@vue/cli-plugin-babel/preset',
   ],
 };
diff --git a/examples/k8s-deploy-config-templates/web/package.json b/examples/k8s-deploy-config-templates/web/package.json
@@ -3,32 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "VUE_APP_HOSTNAME=$GARDEN_VARIABLES_BASE_HOSTNAME vue-cli-service serve --dashboard",
+    "serve": "vue-cli-service serve --dashboard",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
-    "test:integ": "node_modules/mocha/bin/mocha tests/integ/test.js",
-    "test:e2e": "node_modules/mocha/bin/mocha tests/integ/test.js"
+    "lint": "vue-cli-service lint",
+    "test:integ": "node_modules/mocha/bin/_mocha tests/integ/test.js --timeout 30000"
   },
   "dependencies": {
     "axios": "^0.21.2",
-    "chai": "^4.1.2",
-    "socket.io-client": "^4.7.2",
-    "vue": "^2.5.17",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "chai": "^4.2.0",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.10",
+    "vue-router": "^3.4.9",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.0",
+    "@babel/core": "^7.21.8",
+    "@babel/eslint-parser": "^7.21.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^3.2.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-airbnb": "^4.0.1",
     "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
+    "eslint": "^8.41.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-vue": "^9.14.0",
     "mocha": "^10.2.0",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.10"
   }
 }
diff --git a/examples/k8s-deploy-config-templates/web/vue.config.js b/examples/k8s-deploy-config-templates/web/vue.config.js
@@ -1,22 +1,16 @@
 module.exports = {
   devServer: {
-    disableHostCheck: true,
-    public: process.env.HOSTNAME ? `http://${process.env.HOSTNAME}` : undefined,
-    progress: false,
+    allowedHosts: "all",
+    client: {
+      webSocketURL: process.env.HOSTNAME ? "http://" + process.env.HOSTNAME : undefined,
+    },
     proxy: {
-      '^/api': {
-        target: 'http://api',
-        changeOrigin: true,
-        secure: false,
-        logLevel: 'debug',
-      },
-      '^/socket.io': {
-        target: 'http://result',
+      "^/api": {
+        target: "http://api",
         changeOrigin: true,
         secure: false,
-        ws: true,
-        logLevel: 'debug',
+        logLevel: "debug",
       },
     },
   },
-};
+}
diff --git a/examples/k8s-deploy-patch-resources/project.garden.yml b/examples/k8s-deploy-patch-resources/project.garden.yml
@@ -10,7 +10,7 @@ variables:
   postgresPassword: postgres # <-- Don't do this in production!
   # postgresPassword: ${secrets.POSTGRES_PASSWORD} # <-- It's recommended to store secrets in Garden Enterprise
 
-  remoteEnvName: k8s-deploy-shared-${kebabCase(local.username)}
+  remoteEnvName: k8s-deploy-patch-${kebabCase(local.username)}
 
 environments:
   - name: local

diff --git a/examples/k8s-deploy-patch-resources/web/.eslintrc.js b/examples/k8s-deploy-patch-resources/web/.eslintrc.js
@@ -3,15 +3,19 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-  ],
+  extends: ["plugin:vue/essential", "@vue/airbnb"],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "vue/multi-word-component-names": [
+      "error",
+      {
+        ignores: ["Vote"],
+      },
+    ],
   },
+  plugins: ["only-warn"],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: "@babel/eslint-parser",
   },
-};
+}
diff --git a/examples/k8s-deploy-patch-resources/web/babel.config.js b/examples/k8s-deploy-patch-resources/web/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app',
+    '@vue/cli-plugin-babel/preset',
   ],
 };
diff --git a/examples/k8s-deploy-patch-resources/web/package.json b/examples/k8s-deploy-patch-resources/web/package.json
@@ -3,32 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "VUE_APP_HOSTNAME=$GARDEN_VARIABLES_BASE_HOSTNAME vue-cli-service serve --dashboard",
+    "serve": "vue-cli-service serve --dashboard",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
-    "test:integ": "node_modules/mocha/bin/mocha tests/integ/test.js",
-    "test:e2e": "node_modules/mocha/bin/mocha tests/integ/test.js"
+    "lint": "vue-cli-service lint",
+    "test:integ": "node_modules/mocha/bin/_mocha tests/integ/test.js --timeout 30000"
   },
   "dependencies": {
     "axios": "^0.21.2",
-    "chai": "^4.1.2",
-    "socket.io-client": "^4.7.2",
-    "vue": "^2.5.17",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "chai": "^4.2.0",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.10",
+    "vue-router": "^3.4.9",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.0",
+    "@babel/core": "^7.21.8",
+    "@babel/eslint-parser": "^7.21.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^3.2.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-airbnb": "^4.0.1",
     "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
+    "eslint": "^8.41.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-vue": "^9.14.0",
     "mocha": "^10.2.0",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.10"
   }
 }
diff --git a/examples/k8s-deploy-patch-resources/web/vue.config.js b/examples/k8s-deploy-patch-resources/web/vue.config.js
@@ -1,22 +1,16 @@
 module.exports = {
   devServer: {
-    disableHostCheck: true,
-    public: process.env.HOSTNAME ? `http://${process.env.HOSTNAME}` : undefined,
-    progress: false,
+    allowedHosts: "all",
+    client: {
+      webSocketURL: process.env.HOSTNAME ? "http://" + process.env.HOSTNAME : undefined,
+    },
     proxy: {
-      '^/api': {
-        target: 'http://api',
-        changeOrigin: true,
-        secure: false,
-        logLevel: 'debug',
-      },
-      '^/socket.io': {
-        target: 'http://result',
+      "^/api": {
+        target: "http://api",
         changeOrigin: true,
         secure: false,
-        ws: true,
-        logLevel: 'debug',
+        logLevel: "debug",
       },
     },
   },
-};
+}
diff --git a/examples/k8s-deploy-shared-manifests/project.garden.yml b/examples/k8s-deploy-shared-manifests/project.garden.yml
@@ -1,6 +1,6 @@
 apiVersion: "garden.io/v1"
 kind: Project
-name: kubernetes-deploy-shared-manifests
+name: k8s-deploy-shared-manifests
 defaultEnvironment: local
 dotIgnoreFile: .gitignore
 

diff --git a/examples/k8s-deploy-shared-manifests/web/.eslintrc.js b/examples/k8s-deploy-shared-manifests/web/.eslintrc.js
@@ -3,15 +3,19 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-  ],
+  extends: ["plugin:vue/essential", "@vue/airbnb"],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "vue/multi-word-component-names": [
+      "error",
+      {
+        ignores: ["Vote"],
+      },
+    ],
   },
+  plugins: ["only-warn"],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: "@babel/eslint-parser",
   },
-};
+}
diff --git a/examples/k8s-deploy-shared-manifests/web/babel.config.js b/examples/k8s-deploy-shared-manifests/web/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app',
+    '@vue/cli-plugin-babel/preset',
   ],
 };
diff --git a/examples/k8s-deploy-shared-manifests/web/package.json b/examples/k8s-deploy-shared-manifests/web/package.json
@@ -3,32 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "VUE_APP_HOSTNAME=$GARDEN_VARIABLES_BASE_HOSTNAME vue-cli-service serve --dashboard",
+    "serve": "vue-cli-service serve --dashboard",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
-    "test:integ": "mocha tests/integ/test.js",
-    "test:e2e": "mocha tests/integ/test.js"
+    "lint": "vue-cli-service lint",
+    "test:integ": "node_modules/mocha/bin/_mocha tests/integ/test.js --timeout 30000"
   },
   "dependencies": {
     "axios": "^0.21.2",
-    "chai": "^4.1.2",
-    "socket.io-client": "^4.7.2",
-    "vue": "^2.5.17",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "chai": "^4.2.0",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.10",
+    "vue-router": "^3.4.9",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.0",
+    "@babel/core": "^7.21.8",
+    "@babel/eslint-parser": "^7.21.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^3.2.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-airbnb": "^4.0.1",
     "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
+    "eslint": "^8.41.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-vue": "^9.14.0",
     "mocha": "^10.2.0",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.10"
   }
 }