Skip to content

Commit

Permalink
Add middleware redirection in vite (#2686)
Browse files Browse the repository at this point in the history 
* add middleware redirection

* fix typo

* Update vite.config.ts

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

---------

Co-authored-by: Martin Stone <1611702+d7415@users.noreply.github.com>
  • Loading branch information
@ildyria @d7415
ildyria and d7415 authored Nov 14, 2024
1 parent fe68b5f commit 5bed17c
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 98 deletions.
2 changes: 1 addition & 1 deletion .env.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

###################################################################
# Vite local development without running a server. #
# set VITE_LOCA_DEV to true #
# set VITE_LOCAL_DEV to true #
# set VITE_HTTP_PROXY_TARGET to the rediction for the API calls. #
###################################################################
# VITE_LOCAL_DEV=true
Expand Down
228 changes: 131 additions & 97 deletions vite.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,142 @@
import { fileURLToPath, URL } from 'node:url';
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 { fileURLToPath, URL } from "node:url";
import { defineConfig, loadEnv, PluginOption, UserConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import i18n from "laravel-vue-i18n/vite";

const laravelPlugin = laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.ts',
],
refresh: true,
})
input: ["resources/sass/app.scss", "resources/js/app.ts"],
refresh: true,
});

const baseConfig = {
base: './',
plugins: [
vue(
{
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
i18n(),
],
server: {
watch: {
ignored: [
"**/.*/**",
"**/app/**",
"**/database/**",
"**/node_modules/**",
"**/public/**",
"**/storage/**",
"**/tests/**",
"**/vendor/**",
"**/presets/**",
],
},
},
resolve: {
alias: {
// @ts-ignore-next-line
'@': fileURLToPath(new URL('./resources/js/', import.meta.url)),
vue: 'vue/dist/vue.esm-bundler.js',
},
},
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
const localDevelopMiddleware: PluginOption = {
name: "develop-rewrite-middleware",
configureServer(server) {
const viteIndexPath = "/vite/index.html";

server.middlewares.use((req, res, next) => {
if (!req.url) {
next();
return;
}

const requestUrl : string = req.url;
const doNotTouch = ["/@", "/api", "/resources", "/node_modules"];
if (doNotTouch.some((page) => requestUrl.startsWith(page))) {
next();
return;
}

console.log(req.url);
const startsWithPages = ["/gallery", "/frame", "/map", "/search"];
// Check if req.url starts with pages
if (startsWithPages.some((page) => requestUrl.startsWith(page))) {
req.url = viteIndexPath;
}

const pages = [
"/",
"/diagnostics",
"/permissions",
"/jobs",
"/maintenance",
"/profile",
"/settings",
"/sharing",
"/statistics",
"/users",
];
// Check if requestUrl is in pages
if (pages.includes(requestUrl)) {
req.url = viteIndexPath;
}

next();
});
},
css: {
preprocessorOptions: {
scss: {
api: 'modern'
},
}
}
} as UserConfig;
}

const baseConfig = {
base: "./",
plugins: [
vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false } } }),
i18n(),
],
server: {
watch: {
ignored: [
"**/.*/**",
"**/app/**",
"**/database/**",
"**/node_modules/**",
"**/public/**",
"**/storage/**",
"**/tests/**",
"**/vendor/**",
"**/presets/**",
],
},
},
resolve: {
alias: {
// @ts-ignore-next-line
"@": fileURLToPath(new URL("./resources/js/", import.meta.url)),
vue: "vue/dist/vue.esm-bundler.js",
},
},
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes("node_modules")) {
return id.toString().split("node_modules/")[1].split("/")[0].toString();
}
},
},
},
},
css: {
preprocessorOptions: {
scss: {
api: "modern",
},
},
},
} as UserConfig;

/** @type {import('vite').UserConfig} */
export default defineConfig(
({ command, mode, isSsrBuild, isPreview }) => {
const config = baseConfig;
const env = loadEnv(mode, process.cwd(), '')

if (config.server === undefined) {
throw new Error('server config is missing');
}
if (config.plugins === undefined) {
throw new Error('plugins list is missing');
}
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
const config = baseConfig;
const env = loadEnv(mode, process.cwd(), "");

if (command === 'serve') {
if (config.server === undefined) {
throw new Error("server config is missing");
}
if (config.plugins === undefined) {
throw new Error("plugins list is missing");
}

console.log("LOCAL VITE MODE detected")
if (env.VITE_HTTP_PROXY_TARGET !== undefined) {
console.log("api calls will be forwarded to:")
console.log(env.VITE_HTTP_PROXY_TARGET);
}
if (command === "serve") {
console.log("LOCAL VITE MODE detected");
if (env.VITE_HTTP_PROXY_TARGET !== undefined) {
console.log("api calls will be forwarded to:");
console.log(env.VITE_HTTP_PROXY_TARGET);
}

if (env.VITE_LOCAL_DEV === 'true') {
if (env.VITE_HTTP_PROXY_TARGET === undefined) {
throw new Error('VITE_HTTP_PROXY_TARGET is missing');
}
config.server.open = 'vite/index.html';
config.server.proxy = {
'/api/': env.VITE_HTTP_PROXY_TARGET,
}
return config;
}
}
if (env.VITE_LOCAL_DEV === "true") {
if (env.VITE_HTTP_PROXY_TARGET === undefined) {
throw new Error("VITE_HTTP_PROXY_TARGET is missing");
}
config.server.open = "vite/index.html";
config.server.proxy = {
"/api/": env.VITE_HTTP_PROXY_TARGET,
};
config.plugins.push(localDevelopMiddleware);
return config;
}
}

// command === 'build'
config.plugins.push(laravelPlugin);
return config;
});
// command === 'build'
config.plugins.push(laravelPlugin);
return config;
});

0 comments on commit 5bed17c

Please sign in to comment.