Rebase the frontend using Vite (#10)

* Docs & Helm
* Vite migration done
* Fix tests in makefile

Author: benc-uk

.github/workflows/ci-build.yml

@@ -12,7 +12,7 @@ on:
     branches: [main]
 
 env:
-  VERSION: 0.8.4
+  VERSION: 0.8.5
   BUILD_INFO: "Build:development / Workflow:${{ github.workflow }} / RunId:${{ github.run_id }} / Ref:${{ github.ref }} / SHA:${{ github.sha }} / ImageTag:${{ github.run_id }}"
   IMAGE_REG: ghcr.io
   IMAGE_TAG: ${{ github.run_id }}

Makefile

@@ -1,7 +1,7 @@
 SERVICE_DIR := cmd
 FRONTEND_DIR := web/frontend
 OUTPUT_DIR := ./output
-VERSION ?= 0.8.4
+VERSION ?= 0.8.5
 BUILD_INFO ?= "Local makefile build"
 DAPR_RUN_LOGLEVEL := warn
 
@@ -28,7 +28,7 @@ lint-fix: $(FRONTEND_DIR)/node_modules  ## 📝 Lint & format, fixes errors and
 
 test:  ## 🎯 Unit tests for services and snapshot tests for SPA frontend 
 	go test -v -count=1 ./$(SERVICE_DIR)/...
-	@cd $(FRONTEND_DIR); NODE_ENV=test npm run test -- --ci
+	@cd $(FRONTEND_DIR); npm run test:unit
 
 frontend: $(FRONTEND_DIR)/node_modules  ## 💻 Build and bundle the frontend Vue SPA
 	cd $(FRONTEND_DIR); npm run build
@@ -46,7 +46,7 @@ clean:  ## 🧹 Clean the project, remove modules, binaries and outputs
 	rm -rf $(SERVICE_DIR)/frontend-host/frontend-host
 
 run:  ## 🚀 Start & run everything locally as processes
-	cd $(FRONTEND_DIR); npm run serve &
+	cd $(FRONTEND_DIR); npm run dev &
 	dapr run --app-id cart     --app-port 9001 --log-level $(DAPR_RUN_LOGLEVEL) go run github.com/azure-samples/dapr-store/cmd/cart &
 	dapr run --app-id products --app-port 9002 --log-level $(DAPR_RUN_LOGLEVEL) go run github.com/azure-samples/dapr-store/cmd/products ./cmd/products/sqlite.db &
 	dapr run --app-id users    --app-port 9003 --log-level $(DAPR_RUN_LOGLEVEL) go run github.com/azure-samples/dapr-store/cmd/users &

README.md

@@ -180,7 +180,7 @@ See `scripts/local-gateway` for details on how this is done, the `scripts/local-
 
 # Running in Kubernetes - Quick guide
 
-#### [📃 SUB-SECTION: Deployment guide for Kubernetes](./deploy/)
+#### [📃 Extra Doc: Deployment guide for Kubernetes](./deploy/)
 
 # Running Locally - Quick guide
 
@@ -262,7 +262,7 @@ The default mode of operation for the Dapr Store is in "demo mode" where there i
 
 Optionally Dapr store can be configured utilise the [Microsoft identity platform](https://docs.microsoft.com/en-us/azure/active-directory/develop/) (aka Microsoft Entra ID) as an identity provider. This then supports real user sign-in, and securing of the APIs.
 
-#### [📃 SECTION: Full details on security, identity & authentication](./docs/auth-identity/)
+#### [📃 Extra Doc: Security, identity & authentication](./docs/auth-identity/)
 
 # Configuration
 
@@ -300,7 +300,7 @@ Frontend host config:
 
 ## Dapr Components
 
-#### [📃 SECTION: Details of the Dapr components used by the application and how to configure them.](components/)
+#### [📃 Extra Doc: Dapr components used and how to configure them.](components/)
 
 # Concepts and Terms
 

build/frontend.Dockerfile

@@ -28,7 +28,7 @@ FROM node:20-alpine as frontend-build
 ARG VERSION="0.0.1"
 ARG BUILD_INFO="Not provided"
 
-ENV VUE_APP_BUILD_INFO=${BUILD_INFO}
+ENV VITE_BUILD_INFO=${BUILD_INFO}
 WORKDIR /build
 
 # Install all the Vue.js dev tools & CLI, and our app dependencies 
@@ -38,11 +38,13 @@ RUN npm version $VERSION --allow-same-version
 RUN npm install --silent
 
 # Copy in the Vue.js app source
-COPY web/frontend/.eslintrc.js .
+COPY web/frontend/.eslintrc.cjs .
+COPY web/frontend/vite.config.js .
+COPY web/frontend/index.html .
 COPY web/frontend/public ./public
 COPY web/frontend/src ./src
 
-# Now main Vue CLI build & bundle, this will output to ./dist
+# Now build & bundle, this will output to ./dist
 RUN npm run build
 
 # ================================================================================================

deploy/helm/daprstore/Chart.yaml

@@ -5,7 +5,7 @@ description: A reference application showcasing the use of Dapr
 type: application
 
 # This is the chart version.
-version: 0.8.4
+version: 0.8.5
 
 # This is the version number of the application being deployed.
-appVersion: 0.8.4
+appVersion: 0.8.5

deploy/helm/daprstore/README.md

@@ -20,7 +20,7 @@ A reference application showcasing the use of Dapr
 | frontendHost.replicas | int | `1` | Dapr store frontend host replica count |
 | image.pullSecrets | list | `[]` | Any pullsecrets that are required to pull the image |
 | image.registry | string | `"ghcr.io"` | Image registry, only change if you're using your own images |
-| image.repo | string | `"benc-uk/azure-samples"` | Image repository |
+| image.repo | string | `"azure-samples/dapr-store"` | Image repository |
 | image.tag | string | `"latest"` | Image tag |
 | ingress.certIssuer | string | `nil` | Cert manager issuer, leave unset to run in insecure mode |
 | ingress.certName | string | `nil` | Set this to enable TLS, leave unset to run in insecure mode |

deploy/helm/daprstore/values.yaml

@@ -6,7 +6,7 @@ image:
   # -- Image registry, only change if you're using your own images
   registry: ghcr.io
   # -- Image repository
-  repo: benc-uk/azure-samples
+  repo: azure-samples/dapr-store
   # -- Image tag
   tag: latest
   # -- Any pullsecrets that are required to pull the image

deploy/readme.md

@@ -5,7 +5,7 @@ This is a brief guide to deploying Dapr Store to Kubernetes.
 Assumptions:
 
 - kubectl is installed, and configured to access your Kubernetes cluster
-- dapr CLI is installed - https://docs.dapr.io/getting-started/install-dapr-cli/
+- Dapr CLI is installed - https://docs.dapr.io/getting-started/install-dapr-cli/
 - helm is installed - https://helm.sh/docs/intro/install/
 
 This guide does not cover more advanced deployment scenarios such as deploying behind a DNS name, or with HTTPS enabled or with used identity enabled.

docs/auth-identity/readme.md

@@ -51,7 +51,7 @@ Note. If running a services directly from their own directory i.e. `cmd/cart/` t
 
 [MSAL.js for browser](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser) is used to provide authentication to the web app frontend
 
-To enable auth, when working locally - create the following file `web/frontend/.env.development.local` and set `VUE_APP_AUTH_CLIENT_ID` with your client id. Note the `VUE_APP_` prefix, this is important.
+To enable auth, when working locally - create the following file `web/frontend/.env.development.local` and set `VITE_AUTH_CLIENT_ID` with your client id. Note the `VITE_` prefix, this is important.
 
 When served from the frontend-host, the frontend will try to fetch it's configuration from the `/config` endpoint and try to get `AUTH_CLIENT_ID` this way. This allows dynamic configuration of the auth feature at runtime.
 
@@ -60,7 +60,7 @@ When `AUTH_CLIENT_ID` is set the application behavior changes as follows:
 - Login page allows users to register, and sign-in with real user accounts in Azure AD.
 - If a user is signed-in, an access token is acquired via the auth service, and used for all API calls made by the frontend to the backend Dapr Store APIs. This token is requested for the scope `store-api`. The fetched access token is then added to the Authorization header of all API calls.
 
-In both cases if `AUTH_CLIENT_ID` is not found at `/config` or if `VUE_APP_AUTH_CLIENT_ID` is not set locally - then the app falls back into "demo user mode" with a fake user account in the frontend.
+In both cases if `AUTH_CLIENT_ID` is not found at `/config` or if `VITE_AUTH_CLIENT_ID` is not set locally - then the app falls back into "demo user mode" with a fake user account in the frontend.
 
 # Services & Token Validation
 

testing/mock-data/products.json

@@ -1,7 +1,7 @@
 [
   {
     "id": "prd1",
-    "name": "Top Hat (6″)",
+    "name": "Top Hat (6″)",
     "cost": 39.95,
     "description": "Made from 100% wool and quite nice",
     "image": "/img/catalog/1.jpg",
@@ -23,4 +23,4 @@
     "image": "/img/catalog/3.jpg",
     "onOffer": false
   }
-]
+]

web/frontend/.env.development

@@ -1,2 +1,2 @@
-VUE_APP_API_ENDPOINT=/
-VUE_APP_AUTH_CLIENT_ID=""
+VITE_API_ENDPOINT=/
+VITE_AUTH_CLIENT_ID=""

web/frontend/.eslintrc.cjs

@@ -0,0 +1,24 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+
+  env: {
+    node: true,
+    es6: true
+  },
+
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier/skip-formatting'],
+
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off',
+    'prefer-const': 'error'
+  }
+}

web/frontend/.eslintrc.js

@@ -1,21 +1,30 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

web/frontend/.gitignore

@@ -1,49 +1,41 @@
-# Dapr Store Frontend
+# dapr-store-new-vite
 
-Created with Vue CLI
+This template should help get you started developing with Vue 3 in Vite.
 
-## Project setup
+## Recommended IDE Setup
 
-```bash
-npm install
-```
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-### Compiles and hot-reloads for development
+## Customize configuration
 
-```bash
-npm run serve
-```
+See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-### Compiles and minifies for production
+## Project Setup
 
-```bash
-npm run build
+```sh
+npm install
 ```
 
-### Lints and fixes files
-
-```bash
-npm run lint
-```
+### Compile and Hot-Reload for Development
 
-```bash
-npm run lint-fix
+```sh
+npm run dev
 ```
 
-### Run unit tests (snapshots)
-
-Against current snapshots
+### Compile and Minify for Production
 
-```bash
-npm run test
+```sh
+npm run build
 ```
 
-Update snapshots with
+### Run Unit Tests with [Vitest](https://vitest.dev/)
 
-```bash
-npm run test-update
+```sh
+npm run test:unit
 ```
 
-### Customize configuration
+### Lint with [ESLint](https://eslint.org/)
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+```sh
+npm run lint
+```

web/frontend/README.md

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="logo.png" type="image/png" />
+    <title>Dapr Store</title>
+
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Josefin+Sans:wght@400&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> -->
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but Dapr Store doesn't work without JavaScript!</strong>
+    </noscript>
+
+    <div id="app"></div>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

web/frontend/index.html

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}