Vite migration done

.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
 
@@ -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 &

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

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/.gitignore

@@ -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/README.md

@@ -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/index.html

@@ -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/[email protected]/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/jsconfig.json

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