Use /api proxy + convert to tailwindcss v4

Author: mythz

src/demo/App.vue

@@ -9,6 +9,10 @@
     <SecondaryButton @click="modal = !modal">Modal Dialog</SecondaryButton>
   </div>
 
+  type=Booking
+  <AutoQueryGrid ref="grid" type="Booking" />
+  !end=Booking
+
   <div class="mt-8 mx-auto max-w-4xl flex flex-col gap-y-4">
     <h3>date</h3>
     <div class="grid grid-cols-6 gap-6">
@@ -502,20 +506,20 @@
       <pre>{{ createBooking }}</pre>
     </form>
 
-    <form class="mb-3" @submit.prevent="">
+    <!-- <form class="mb-3" @submit.prevent="">
       <input type="submit" class="hidden">
       <h3 class="text-lg">CreateJobApplication</h3>
       <AutoFormFields v-model="createJobApplication" :api="createJobApplicationApi" @update:modelValue="$forceUpdate" />
       <pre>{{ createJobApplication }}</pre>
-    </form>
+    </form> -->
 
-    <form class="mb-3" @submit.prevent="">
+    <!--form class="mb-3" @submit.prevent="">
       <input type="submit" class="hidden">
       <h3 class="text-lg">AllTypes</h3>
       <AutoFormFields v-model="allTypes" :api="allTypesApi" @update:modelValue="$forceUpdate" />
       <AutoEditForm v-model="allTypesJson" formStyle="card" type="AllTypes" />
       <pre>{{ allTypes }}</pre>
-    </form>
+    </form-->
   </div>
 
   <div class="mx-auto max-w-4xl">
@@ -702,6 +706,7 @@ import { AllTypes, Authenticate,
 } from './dtos'
 import Combobox from '../components/Combobox.vue'
 import SecondaryButton from '../components/SecondaryButton.vue'
+// import metadataJson from './app.json'
 
 function classes(type:'array'|'object', tag:'div'|'table'|'thead'|'th'|'tr'|'td',depth:number,cls:string,index?:number) {
     if (type == 'array') {
@@ -732,13 +737,20 @@ const booking = bookingObject[0]
 
 const { dateInputFormat, setRef } = useUtils()
 const { setConfig, setAutoQueryGridDefaults } = useConfig()
-const { loadMetadata, metadataApi, enumOptions } = useMetadata()
+const { loadMetadata, metadataApi, enumOptions, setMetadata } = useMetadata()
 const { Formats, currency, formatDate, relativeTime } = useFormatters()
 
+// setMetadata(metadataJson)
+
+const client = inject<JsonServiceClient>('client')!
+
+authenticate()
+
 loadMetadata({
   olderThan: 60 * 60 * 1000,
+  client,
   //resolvePath: 'https://localhost:5001/metadata/app.json',
-  resolvePath: 'https://blazor-gallery.servicestack.net/metadata/app.json',
+  //resolvePath: 'https://blazor-gallery.servicestack.net/metadata/app.json',
 })
 
 setConfig({
@@ -786,10 +798,6 @@ const dynamicDates:{[k:string]:InputInfo} = Object.keys(dates).reduce((acc,x) =>
   modelDates.value[x] = dates[x]
   return acc }, {})
 
-const client = inject<JsonServiceClient>('client')!
-
-authenticate()
-
 const autoFormRequest = new QueryBookings({  
   skip: 1,
   take: 2,

src/main.ts

@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from "vue-router"
 import './tailwind.css'
 import App from './demo/App.vue'
 import ServiceStackVue from '.'
-import { JsonApiClient } from '@servicestack/client'
+import { JsonServiceClient } from '@servicestack/client'
 
 const colorScheme = localStorage.getItem('color-scheme')
 if (colorScheme === 'dark') {
@@ -17,9 +17,11 @@ const router = createRouter({
     routes: [],
 })
 
+// const client = new JsonServiceClient('https://blazor-gallery.servicestack.net')
+const client = new JsonServiceClient()
 
 createApp(App)
     .use(ServiceStackVue)
     .use(router)
-    .provide('client', JsonApiClient.create('http://localhost:5000'))
+    .provide('client', client)
     .mount('#app')

src/tailwind.css

@@ -1,12 +1,25 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
 
-.svg-external {
+@variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  .dark {
+    color-scheme: dark;
+  }
+}
+
+@layer utilities {
+  .svg-external {
     color: #007bff;
     background: url("data:image/svg+xml,%3Csvg width='1.25rem' height='1.25rem' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right;
     padding-right: 1.35rem;
-}
-.svg-external:hover {
+  }
+  .svg-external:hover {
     text-decoration: underline;
+  }
 }

tailwind.config.cjs

@@ -1,3 +1,13 @@
+/**
+ * Tailwind CSS v4 Configuration
+ *
+ * Note: In Tailwind CSS v4, configuration is now CSS-first.
+ * This file is kept for backward compatibility but is not actively used.
+ * All configuration is now done in src/tailwind.css using @theme and @plugin directives.
+ *
+ * See: https://tailwindcss.com/docs/upgrade-guide
+ */
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
@@ -6,6 +16,8 @@ module.exports = {
     extend: {},
   },
   plugins: [
+    // Note: In v4, plugins are imported in CSS using @plugin directive
+    // See src/tailwind.css for the actual plugin configuration
     require('@tailwindcss/forms'),
   ],
 }

vite.config.ts

@@ -4,6 +4,34 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
+    
+import fs from 'fs'
+import path from 'path'
+import { env } from 'process'
+
+
+const baseFolder =
+    env.APPDATA !== undefined && env.APPDATA !== ''
+        ? `${env.APPDATA}/ASP.NET/https`
+        : `${env.HOME}/.aspnet/https`;
+
+const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
+const certificateName = certificateArg ? certificateArg!.groups!.value : "myapp.client";
+
+if (!certificateName) {
+    console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
+    process.exit(-1);
+}
+
+const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
+const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
+
+const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
+    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:5001';
+const apiUrl = process.env.NODE_ENV === 'development' ? target : ''
+const baseUrl = process.env.NODE_ENV === 'development'
+    ? "https://locahost:5173"
+    : process.env.DEPLOY_HOST ? `https://${process.env.DEPLOY_HOST}` : undefined
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -37,5 +65,20 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
-  }
+  },
+  server: {
+      proxy: {
+          '^/api': {
+              target,
+              secure: false
+          }
+      },
+      port: 5173,
+      ...(fs.existsSync(keyFilePath) && fs.existsSync(certFilePath) ? {
+          https: {
+              key: fs.readFileSync(keyFilePath),
+              cert: fs.readFileSync(certFilePath),
+          }
+      } : {})
+  }  
 })