Fix proxying to the app from a subpath (#6212)

api/src/app.ts

@@ -104,10 +104,9 @@ export default async function createApp(): Promise<express.Application> {
 		const adminPath = require.resolve('@directus/app/dist/index.html');
 		const publicUrl = env.PUBLIC_URL.endsWith('/') ? env.PUBLIC_URL : env.PUBLIC_URL + '/';
 
-		// Prefix all href/src in the index html with the APIs public path
+		// Set the App's base path according to the APIs public URL
 		let html = fse.readFileSync(adminPath, 'utf-8');
-		html = html.replace(/href="\//g, `href="${publicUrl}`);
-		html = html.replace(/src="\//g, `src="${publicUrl}`);
+		html = html.replace(/<meta charset="utf-8" \/>/, `<meta charset="utf-8" />\n\t\t<base href="${publicUrl}admin/">`);
 
 		app.get('/', (req, res, next) => {
 			if (env.ROOT_REDIRECT) {

app/package.json

@@ -18,7 +18,7 @@
 		"access": "public"
 	},
 	"scripts": {
-		"dev": "vite",
+		"dev": "cross-env NODE_ENV=development vite",
 		"build": "vite build",
 		"serve": "vite preview",
 		"copy-docs-images": "rimraf public/img/docs && copyfiles -u 3 \"../docs/assets/**/*\" \"public/img/docs\" --verbose",

app/src/modules/docs/components/markdown.vue

@@ -92,7 +92,7 @@ export default defineComponent({
 					filenameParts.shift();
 				}
 
-				const newFilename = `/admin${rootPath}img/docs/${filenameParts.join('/')}`;
+				const newFilename = `${rootPath}admin/img/docs/${filenameParts.join('/')}`;
 				const newImage = rawImage[0].replace(rawImage.groups!.filename, newFilename);
 				markdown = markdown.replace(rawImage[0], newImage);
 			}

app/vite.config.js

@@ -18,7 +18,7 @@ export default defineConfig({
 			'@': path.resolve(__dirname, '/src'),
 		},
 	},
-	base: '/admin/',
+	base: process.env.NODE_ENV === 'development' ? '/admin/' : '',
 	server: {
 		port: 8080,
 		proxy: {