finalised vite setup

.ddev/config.yaml

@@ -24,7 +24,7 @@ composer_version: "2"
 web_environment:
     - FINAL_RELEASEFOLDER=/var/www/html
     - APP_DEBUG=1
-    - APP_ENV=prod
+    - APP_ENV=dev
     - DB_HOST=db
     - DB_PORT=3306
     - DB_NAME=db

.env

@@ -21,10 +21,12 @@ APP_EMAIL_SENDER="%env(APP_NAME)% Bot <noreply@localhost>"
 APP_AUTH_MODE="oauth"
 
 ###> symfony/framework-bundle ###
-APP_ENV=prod
+APP_ENV=dev
 APP_SECRET=98414ca3612ebba3061cf8c92c4a984e
 ###< symfony/framework-bundle ###
 
+VITE_DEV_SERVER_URL=http://localhost:5173
+
 ###> doctrine/doctrine-bundle ###
 # Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
 # IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml

config/packages/pentatrion_vite.yaml

@@ -2,8 +2,4 @@ pentatrion_vite:
   public_directory: public
   build_directory: static
   throw_on_missing_entry: true
-  preload: link-tag
-
-when@prod:
-    pentatrion_vite:
-        cache: true
+  preload: link-tag

src/Mealz/MealBundle/Resources/views/Meals/index.html.twig

@@ -4,19 +4,8 @@
 
 {% block body %}
     <div id="app" class="bg-[rgb(244,247,249)]">
-        <h4>{{ vite_mode() }}</h4>
-        <h4>{{ app.environment }}</h4>
         <div id="loading-fallback-container">
             <div id="loading-fallback-img"></div>
         </div>
     </div>
-{% endblock %}
-{# {% block stylesheets %}
-    {{ parent() }}
-    {{ vite_entry_link_tags('pageVue') }}
-{% endblock %}
-
-{% block javascripts %}
-    {{ parent() }}
-    {{ vite_entry_script_tags('pageVue') }}
-{% endblock %} #}
+{% endblock %}

src/Resources/package.json

@@ -1,7 +1,8 @@
 {
-  "name": "meals",
-  "version": "0.0.0",
-  "private": true,
+  "name": "mealz",
+  "version": "3.1.3",
+  "description": "",
+  "author": "AOE GmbH",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -49,11 +50,13 @@
     "cssnano": "^7.0.4",
     "cssnano-preset-advanced": "^7.0.4",
     "eslint": "^8.57.0",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "eslint-plugin-vue": "^9.23.0",
     "jsdom": "^24.1.0",
     "npm-run-all2": "^6.2.0",
     "postcss": "^8.4.39",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.6",
     "typescript": "~5.4.0",
     "vite": "^5.3.1",

src/Resources/src/components/NavBar.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="relative top-0 z-[3] print:hidden">
-    <h2>Test</h2>
     <Menu v-slot="{ open }">
       <header class="relative h-[60px] bg-white shadow-[0_15px_35px_0_#5B788F21] xl:h-24">
         <nav

src/Resources/vite.config.ts

@@ -8,23 +8,17 @@ import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { dirname } from 'node:path'
 import { rm } from 'node:fs/promises'
 
-const port = 5173;
-const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;
-
 // https://vitejs.dev/config/
 export default defineConfig({
-  // base: process.env.NODE_ENV === 'production' ? '/static/' : '/',
-  base: '/static/',
-  mode: 'production',
+  base: process.env.NODE_ENV === 'production' ? '/static/' : '/',
   plugins: [
     vue(),
     vueDevTools(),
     symfony({
-      // debug: true,
       enforcePluginOrderingPosition: true,
-      enforceServerOriginAfterListening: false,
+      enforceServerOriginAfterListening: true,
       viteDevServerHostname: 'meals.test',
-      // originOverride: 'https://meals.test'
+      originOverride: 'https://meals.test:5173'
     }),
     VueI18nPlugin({
       include: resolve(dirname(fileURLToPath(import.meta.url)), './src/locales/**'),
@@ -42,23 +36,26 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
-  // server: {
-  //   host: true,
-  //   port: port,
-  //   strictPort: true,
-  //   origin: 'https://meals.test:5173',
-  //   cors: true,
-  //   headers: {
-  //     'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-  //     'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
-  //     'Access-Control-Allow-Origin': '*',
-  //     'X-Content-Type-Options': 'nosniff'
-  //   },
-  //   // hmr: {
-  //   //   host: 'meals.test',
-  //   //   protocol: 'ws'
-  //   // }
-  // },
+  server: {
+    host: true,
+    port: 5173,
+    strictPort: true,
+    origin: 'https://meals.test:5173',
+    cors: true,
+    headers: {
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+      'Access-Control-Allow-Origin': '*',
+      'X-Content-Type-Options': 'nosniff'
+    },
+    proxy: {
+      '/static/': 'https://localhost:5173'
+    },
+    // hmr: {
+    //   host: 'meals.test',
+    //   protocol: 'ws'
+    // }
+  },
   build: {
     outDir: '../../public/static',
     manifest: true,
@@ -74,9 +71,9 @@ export default defineConfig({
           chunkFileNames: '[name]-[hash].js',
           entryFileNames: '[name]-[hash].js',
           assetFileNames: '[name]-[hash].[ext]',
-          manualChunks: {
-            vue: ['vue']
-          }
+          // manualChunks: {
+          //   vue: ['vue']
+          // }
         }
     }
   },

templates/base.html.twig

@@ -16,9 +16,9 @@
         <script type="module" src="https://meals.test:5173/@vite/client"></script>
         <script type="module" src="https://meals.test:5173/src/main.ts"></script>
     {% else %} #}
-        {% block javascripts %}
-            {{ vite_entry_script_tags('app') }}
-        {% endblock %}
+    {% block javascripts %}
+        {{ vite_entry_script_tags('app') }}
+    {% endblock %}
     {# {% endif %} #}
 </head>
 <style>