Vite-based Vue temaplates (#117)

Shpota · web-flow · commit c0be24e0a601 · 2023-06-03T12:22:10.000+02:00
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1,5 +1,5 @@
 name: build
-on: [push, pull_request]
+on: [push]
 jobs:
 
   test:
@@ -9,7 +9,7 @@ jobs:
       - name: Set up Go 1.19
         uses: actions/setup-go@v1
         with:
-          go-version: 1.19
+          go-version: 1.20
         id: go
       - name: Check out
         uses: actions/checkout@v2
@@ -30,7 +30,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        go: [ 1.11, 1.12, 1.13, 1.14, 1.15, 1.16, 1.17, 1.18 ]
+        go: [ 1.11, 1.12, 1.13, 1.14, 1.15, 1.16, 1.17, 1.18, 1.19 ]
     steps:
       - name: Set up Go ${{ matrix.go }}
         uses: actions/setup-go@v1
diff --git a/.github/workflows/verify-templates.yml b/.github/workflows/verify-templates.yml
@@ -1,7 +1,6 @@
 name: verify-templates
 on:
   push:
-  pull_request:
   schedule:
     - cron: '0 14 * * *'
 jobs:
@@ -18,7 +17,7 @@ jobs:
       - name: Set up Go
         uses: actions/setup-go@v1
         with:
-          go-version: 1.18
+          go-version: 1.20
       - name: Checkout project
         uses: actions/checkout@v2
       - name: Generate application
@@ -29,8 +28,28 @@ jobs:
         run: timeout 60 bash -c 'until curl -s localhost:8080/api/technologies | grep Go > /dev/null; do sleep 1; done'
       - name: Check availability of frontend
         run: |
-          npm i domcurl
-          timeout 60 bash -c 'until ./node_modules/domcurl/index.js http://localhost:8080 | grep Go > /dev/null; do sleep 1; done'
+          npm i puppeteer
+          cat > index.js << EOF
+          const puppeteer = require('puppeteer');
+          (async () => {
+            try {
+              const browser = await puppeteer.launch({headless: "new"});
+              const page = await browser.newPage();
+              await page.goto('http://localhost:8080');
+              page.on('console', (message) => { 
+                console.log('Console ' + message.type().toUpperCase() + ': ' + message.text());
+              });
+              await page.waitForSelector('.technologies', { timeout: 60000 });
+              const content = await page.content();
+              console.log(content);
+              await browser.close();
+            } catch (error) {
+              console.error('Error:', error);
+              throw error;
+            }
+          })();
+          EOF
+          node index.js
       - name: Stop application
         run: cd app && docker-compose down
-        if: always()
+        if: always()
diff --git a/static/generated.go b/static/generated.go
diff --git a/templates/angular.webapp/src/app/tech/tech.component.html b/templates/angular.webapp/src/app/tech/tech.component.html
@@ -1,4 +1,4 @@
-<ul>
+<ul class="technologies">
   <li *ngFor="let tech of technologies">
     <b>{{tech.name}}</b>: {{tech.details}}
   </li>
diff --git a/templates/mongo.Dockerfile b/templates/mongo.Dockerfile
@@ -1,6 +1,6 @@
 FROM node:16.18.1-alpine3.16 AS JS_BUILD
 COPY webapp /webapp
-WORKDIR webapp
+WORKDIR /webapp
 RUN npm install && npm run build
 
 FROM golang:1.19.0-alpine3.16 AS GO_BUILD
diff --git a/templates/mysql.Dockerfile b/templates/mysql.Dockerfile
@@ -1,6 +1,6 @@
 FROM node:16.18.1-alpine3.16 AS JS_BUILD
 COPY webapp /webapp
-WORKDIR webapp
+WORKDIR /webapp
 RUN npm install && npm run build
 
 FROM golang:1.19.0-alpine3.16 AS GO_BUILD
diff --git a/templates/postgres.Dockerfile b/templates/postgres.Dockerfile
@@ -1,6 +1,6 @@
 FROM node:16.18.1-alpine3.16 AS JS_BUILD
 COPY webapp /webapp
-WORKDIR webapp
+WORKDIR /webapp
 RUN npm install && npm run build
 
 FROM golang:1.19.0-alpine3.16 AS GO_BUILD
diff --git a/templates/vue.webapp/.env.development b/templates/vue.webapp/.env.development
diff --git a/templates/vue.webapp/.env.local b/templates/vue.webapp/.env.local
@@ -0,0 +1,2 @@
+NODE_ENV=local
+VITE_API_URL=http://localhost:8080
diff --git a/templates/vue.webapp/.env.production b/templates/vue.webapp/.env.production
@@ -1,2 +1 @@
-NODE_ENV=production
-VUE_APP_API_URL=
+VITE_API_URL=
diff --git a/templates/vue.webapp/.eslintrc.cjs b/templates/vue.webapp/.eslintrc.cjs
@@ -0,0 +1,11 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
diff --git a/templates/vue.webapp/.vscode/extensions.json b/templates/vue.webapp/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/templates/vue.webapp/babel.config.js b/templates/vue.webapp/babel.config.js
diff --git a/templates/vue.webapp/index.html b/templates/vue.webapp/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>project-name</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/templates/vue.webapp/jsconfig.json b/templates/vue.webapp/jsconfig.json
diff --git a/templates/vue.webapp/package.json b/templates/vue.webapp/package.json
@@ -3,42 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "vue-cli-service serve --port 3000",
-    "build": "vue-cli-service build --dest build",
-    "lint": "vue-cli-service lint"
+    "start": "vite --port 3000",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "axios": "~0.27.2",
-    "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "axios": "^1.4.0",
+    "vue": "^3.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
-}
+    "@vitejs/plugin-vue": "^4.2.3",
+    "eslint": "^8.39.0",
+    "eslint-plugin-vue": "^9.11.0",
+    "vite": "^4.3.5"
+  }
+}
diff --git a/templates/vue.webapp/public/index.html b/templates/vue.webapp/public/index.html
diff --git a/templates/vue.webapp/src/App.vue b/templates/vue.webapp/src/App.vue
@@ -1,5 +1,10 @@
+<script setup>
+import TechItems from './components/TechItems.vue'
+import logoSVG from '@/assets/logo.svg';
+</script>
+
 <template>
-  <div id="app">
+  <main id="app">
     <h2 class="title">project-name</h2>
     <div class="logo">
       <img :src="logoSVG" height="150" alt="logo" />
@@ -16,25 +21,9 @@
       and <code>server/web/app.go</code>.
       <TechItems />
     </div>
-  </div>
+  </main>
 </template>
 
-<script>
-import TechItems from './components/TechItems.vue'
-
-export default {
-  name: 'App',
-  components: {
-    TechItems
-  },
-  data() {
-    return {
-      logoSVG: require('./assets/logo.svg')
-    }
-  }
-};
-</script>
-
 <style>
 body {
   margin-top: 5%;
diff --git a/templates/vue.webapp/src/components/TechItems.vue b/templates/vue.webapp/src/components/TechItems.vue
@@ -18,7 +18,7 @@ export default {
   },
   mounted() {
     axios
-      .get(`${process.env.VUE_APP_API_URL}/api/technologies`)
+      .get(`${import.meta.env.VITE_API_URL}/api/technologies`)
       .then(response => (this.technologies = response.data));
   }
 };
diff --git a/templates/vue.webapp/vite.config.js b/templates/vue.webapp/vite.config.js
@@ -0,0 +1,17 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  build: {
+    outDir: 'build',
+  },
+})
diff --git a/templates/vue.webapp/vue.config.js b/templates/vue.webapp/vue.config.js
diff --git a/transform/go.mod b/transform/go.mod
@@ -1,3 +1,3 @@
 module transform
 
-go 1.19
+go 1.20

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<ul>`
	`1`	`+<ul class="technologies">`
`2`	`2`	`<li *ngFor="let tech of technologies">`
`3`	`3`	`<b>{{tech.name}}</b>: {{tech.details}}`
`4`	`4`	`</li>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+NODE_ENV=local`
	`2`	`+VITE_API_URL=http://localhost:8080`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-NODE_ENV=production`
`2`		`-VUE_APP_API_URL=`
	`1`	`+VITE_API_URL=`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export default {`
`18`	`18`	`},`
`19`	`19`	`mounted() {`
`20`	`20`	`axios`
`21`		- .get(`${process.env.VUE_APP_API_URL}/api/technologies`)
	`21`	+ .get(`${import.meta.env.VITE_API_URL}/api/technologies`)
`22`	`22`	`.then(response => (this.technologies = response.data));`
`23`	`23`	`}`
`24`	`24`	`};`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`module transform`
`2`	`2`
`3`		`-go 1.19`
	`3`	`+go 1.20`