Vite local dev (#2636)

* vite local dev

* fix formatting

* fix local dev complaints

* Apply suggestions from code review

Co-authored-by: Martin Stone <1611702+d7415@users.noreply.github.com>

* WTRC

---------

Co-authored-by: Martin Stone <1611702+d7415@users.noreply.github.com>

.env.example

@@ -185,3 +185,11 @@ VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 # AWS_ENDPOINT=
 # AWS_IMAGE_VISIBILITY=
 # AWS_USE_PATH_STYLE_ENDPOINT=
+
+###################################################################
+# Vite local development without running a server.                #
+# set VITE_LOCA_DEV to true                                       #
+# set VITE_HTTP_PROXY_TARGET to the rediction for the API calls.  #
+###################################################################
+# VITE_LOCAL_DEV=true
+# VITE_HTTP_PROXY_TARGET=http://localhost:8000

resources/js/app.ts

@@ -19,6 +19,7 @@ import { definePreset } from "@primevue/themes";
 import LycheePrimeVueConfig from "./style/preset";
 import FocusTrap from "primevue/focustrap";
 import Tooltip from "primevue/tooltip";
+import "../sass/app.scss";
 
 declare global {
 	var assets_url: string;

resources/js/router/routes.ts

@@ -15,7 +15,7 @@ import Frame from "@/views/gallery-panels/Frame.vue";
 import Map from "@/views/gallery-panels/Map.vue";
 import Statistics from "@/views/Statistics.vue";
 
-export const routes = [
+const routes_ = [
 	{
 		name: "landing",
 		path: "/",
@@ -123,3 +123,13 @@ export const routes = [
 		component: Users,
 	},
 ];
+
+if (import.meta.env.MODE === "development" && import.meta.env.VITE_LOCAL_DEV === "true") {
+	routes_.push({
+		name: "local-dev",
+		path: "/vite/index.html",
+		component: Landing,
+	});
+}
+
+export const routes = routes_;

resources/js/vite-env.d.ts

@@ -0,0 +1,8 @@
+interface ImportMetaEnv {
+	readonly VITE_LOCAL_DEV: string;
+	readonly MODE: "development" | "production";
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

tsconfig.json

@@ -12,8 +12,8 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    "lib": ["ES6", "DOM"],                            /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "target": "es2020",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "lib": ["es2020", "DOM"],                            /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -26,9 +26,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "CommonJS",                                /* Specify what module code is generated. */
-    "rootDir": "./resources/js",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    "module": "es2020",                                  /* Specify what module code is generated. */
+    "rootDir": "./resources/js",                         /* Specify the root folder within your source files. */
+    "moduleResolution": "bundler",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     "paths": {
       "@/*": ["./resources/js/*"]
@@ -47,8 +47,8 @@
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
-    "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    "allowJs": false,                                     /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    "checkJs": false,                                     /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
     /* Emit */
@@ -77,7 +77,7 @@
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 
     /* Interop Constraints */
-    "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "isolatedModules": true,                             /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
@@ -107,6 +107,6 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    // "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
+    // "skipLibCheck": true,                             /* Skip type checking all .d.ts files. */
   }
 }

vite.config.ts

@@ -1,21 +1,20 @@
 import { fileURLToPath, URL } from 'node:url';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv, UserConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 import i18n from 'laravel-vue-i18n/vite';
-// import path from "path";
 
-/** @type {import('vite').UserConfig} */
-export default defineConfig({
+const laravelPlugin = laravel({
+    input: [
+      'resources/sass/app.scss',
+      'resources/js/app.ts',
+    ],
+    refresh: true,
+  })
+
+const baseConfig =   {
   base: './',
   plugins: [
-    laravel({
-      input: [
-        'resources/sass/app.scss',
-        'resources/js/app.ts',
-      ],
-      refresh: true,
-    }),
     vue(
     {
       template: {
@@ -67,4 +66,40 @@ export default defineConfig({
       },
     }
   }
-});
+} as UserConfig;
+
+
+/** @type {import('vite').UserConfig} */
+export default defineConfig(
+  ({ command, mode, isSsrBuild, isPreview }) => {
+    const config = baseConfig;
+    if (command === 'serve') {
+      const env = loadEnv(mode, process.cwd(), '')
+
+      console.log("LOCAL VITE MODE detected")
+      console.log("api calls will be forwarded to:")
+      console.log(env.VITE_HTTP_PROXY_TARGET);
+      if (env.VITE_LOCAL_DEV === 'true') {
+        if (config.server === undefined) {
+          throw new Error('server config is missing');
+        }
+        config.server.open = 'vite/index.html';
+        config.server.proxy =  {
+          '/api/': env.VITE_HTTP_PROXY_TARGET,
+        }
+        return config;
+      }
+
+      return {
+        // dev specific config
+      }
+
+    } else { // command === 'build'
+      if (config.plugins === undefined) {
+        throw new Error('plugins list is missing');
+      }
+
+      config.plugins.push(laravelPlugin);
+      return config;
+    }
+  });