diff --git a/.env.example b/.env.example index 45f2085441c..4f5b54116e5 100644 --- a/.env.example +++ b/.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 diff --git a/resources/js/app.ts b/resources/js/app.ts index 7cfe5c52c6e..3c5fd813dfb 100644 --- a/resources/js/app.ts +++ b/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; diff --git a/resources/js/router/routes.ts b/resources/js/router/routes.ts index 3f42e173b15..64113018d21 100644 --- a/resources/js/router/routes.ts +++ b/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_; diff --git a/resources/js/vite-env.d.ts b/resources/js/vite-env.d.ts new file mode 100644 index 00000000000..b8ff78e588f --- /dev/null +++ b/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; +} diff --git a/tsconfig.json b/tsconfig.json index f972ce5aee8..73ddbf629eb 100644 --- a/tsconfig.json +++ b/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 ''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. */ } } diff --git a/vite.config.ts b/vite.config.ts index dacf0d14306..dd00dd81f24 100644 --- a/vite.config.ts +++ b/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; + } + }); diff --git a/vite/index.html b/vite/index.html new file mode 100644 index 00000000000..e2e2e3ba360 --- /dev/null +++ b/vite/index.html @@ -0,0 +1,302 @@ + + + + + + + + + + + + + + + + + +
+ +
+ +