feat: Support running under subpath (#1451)

client/src/api/http.js

@@ -18,7 +18,7 @@ const http = {};
         return result;
       }, new FormData());
 
-    return fetch(`${Config.SERVER_BASE_URL}/api${url}`, {
+    return fetch(`${Config.BASE_PATH}/api${url}`, {
       method,
       headers,
       body: formData,

client/src/api/socket.js

@@ -10,7 +10,7 @@ import Config from '../constants/Config';
 
 const io = sailsIOClient(socketIOClient);
 
-io.sails.url = Config.SERVER_BASE_URL;
+io.sails.path = `${Config.BASE_PATH}/socket.io`;
 io.sails.autoConnect = false;
 io.sails.reconnection = true;
 io.sails.useCORSRouteToGetCookie = false;

client/src/components/common/Linkify/Link.jsx

@@ -10,6 +10,7 @@ import { useSelector } from 'react-redux';
 import history from '../../../history';
 import selectors from '../../../selectors';
 import matchPaths from '../../../utils/match-paths';
+import Config from '../../../constants/Config';
 import Paths from '../../../constants/Paths';
 
 const Link = React.memo(({ href, content, stopPropagation, ...props }) => {
@@ -23,7 +24,8 @@ const Link = React.memo(({ href, content, stopPropagation, ...props }) => {
     }
   }, [href]);
 
-  const isSameSite = !!url && url.origin === window.location.origin;
+  const isSameSite =
+    !!url && url.origin === window.location.origin && url.pathname.startsWith(Config.BASE_PATH);
 
   const cardsPathMatch = useMemo(() => {
     if (!isSameSite) {

client/src/configs/markdown-plugins/link.js

@@ -4,6 +4,7 @@
  */
 
 import history from '../../history';
+import Config from '../../constants/Config';
 
 const SAME_SITE_CLASS = 'same-site';
 
@@ -30,7 +31,9 @@ function process(token, nextToken) {
     return;
   }
 
-  const isSameSite = url.origin === window.location.origin;
+  const isSameSite =
+    url.origin === window.location.origin && url.pathname.startsWith(Config.BASE_PATH);
+
   const trimOrigin = isSameSite && nextToken.type === 'text' && nextToken.content === href;
 
   if (isSameSite) {

client/src/constants/Config.js

@@ -3,8 +3,7 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-const SERVER_BASE_URL =
-  import.meta.env.VITE_SERVER_BASE_URL || (import.meta.env.DEV ? 'http://localhost:1337' : '');
+const BASE_PATH = window.BASE_PATH || '';
 
 const ACCESS_TOKEN_KEY = 'accessToken';
 const ACCESS_TOKEN_VERSION_KEY = 'accessTokenVersion';
@@ -20,7 +19,7 @@ const MAX_SIZE_TO_DISPLAY_CONTENT = 256 * 1024;
 const IS_MAC = navigator.platform.startsWith('Mac');
 
 export default {
-  SERVER_BASE_URL,
+  BASE_PATH,
   ACCESS_TOKEN_KEY,
   ACCESS_TOKEN_VERSION_KEY,
   ACCESS_TOKEN_VERSION,

client/src/constants/Paths.js

@@ -3,12 +3,14 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-const ROOT = '/';
-const LOGIN = '/login';
-const OIDC_CALLBACK = '/oidc-callback';
-const PROJECTS = '/projects/:id';
-const BOARDS = '/boards/:id';
-const CARDS = '/cards/:id';
+import Config from './Config';
+
+const ROOT = `${Config.BASE_PATH}/`;
+const LOGIN = `${Config.BASE_PATH}/login`;
+const OIDC_CALLBACK = `${Config.BASE_PATH}/oidc-callback`;
+const PROJECTS = `${Config.BASE_PATH}/projects/:id`;
+const BOARDS = `${Config.BASE_PATH}/boards/:id`;
+const CARDS = `${Config.BASE_PATH}/cards/:id`;
 
 export default {
   ROOT,

client/src/utils/access-token-storage.js

@@ -8,24 +8,28 @@ import { jwtDecode } from 'jwt-decode';
 
 import Config from '../constants/Config';
 
+const PATH = Config.BASE_PATH || '/';
+
 export const setAccessToken = (accessToken) => {
   const { exp } = jwtDecode(accessToken);
   const expires = new Date(exp * 1000);
 
   Cookies.set(Config.ACCESS_TOKEN_KEY, accessToken, {
     expires,
+    path: PATH,
     secure: window.location.protocol === 'https:',
     sameSite: 'strict',
   });
 
   Cookies.set(Config.ACCESS_TOKEN_VERSION_KEY, Config.ACCESS_TOKEN_VERSION, {
     expires,
+    path: PATH,
   });
 };
 
 export const removeAccessToken = () => {
-  Cookies.remove(Config.ACCESS_TOKEN_KEY);
-  Cookies.remove(Config.ACCESS_TOKEN_VERSION_KEY);
+  Cookies.remove(Config.ACCESS_TOKEN_KEY, { path: PATH });
+  Cookies.remove(Config.ACCESS_TOKEN_VERSION_KEY, { path: PATH });
 };
 
 export const getAccessToken = () => {

client/tests/setup-symlinks.sh

@@ -17,6 +17,6 @@ ln -s ${CLIENT_PATH}/logo512.png ${SERVER_PUBLIC_PATH}/logo512.png && echo "Link
 ln -s ${CLIENT_PATH}/manifest.json ${SERVER_PUBLIC_PATH}/manifest.json && echo "Linked manifest.json successfully"
 ln -s ${CLIENT_PATH}/robots.txt ${SERVER_PUBLIC_PATH}/robots.txt && echo "Linked robots.txt successfully"
 ln -s ${CLIENT_PATH}/assets ${SERVER_PUBLIC_PATH}/assets && echo "Linked assets folder successfully"
-ln -s ${CLIENT_PATH}/index.html ${SERVER_VIEWS_PATH}/index.html && echo "Linked index.html successfully"
+ln -s ${CLIENT_PATH}/index.ejs ${SERVER_VIEWS_PATH}/index.ejs && echo "Linked index.ejs successfully"
 
 echo "Setup symbolic links completed successfully."

client/vite.config.js

@@ -1,13 +1,42 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
 import { defineConfig } from 'vite';
 import commonjs from 'vite-plugin-commonjs';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+// eslint-disable-next-line import/no-unresolved
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 // eslint-disable-next-line import/no-unresolved
 import browserslistToEsbuild from 'browserslist-to-esbuild';
 
+// eslint-disable-next-line no-underscore-dangle
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const createEjsTemplate = () => ({
+  name: 'create-ejs-template',
+  closeBundle() {
+    if (process.env.INDEX_FORMAT !== 'ejs') return;
+
+    const distPath = path.resolve(__dirname, 'dist');
+    const htmlPath = path.join(distPath, 'index.html');
+
+    if (!fs.existsSync(htmlPath)) return;
+
+    const html = fs.readFileSync(htmlPath, 'utf8');
+
+    const ejs = html
+      .replace(/(href|src)="\.\/([^"]+)"/g, '$1="<%- basePath %>/$2"')
+      .replace('</head>', "  <script>window.BASE_PATH = '<%- basePath %>';</script>\n  </head>");
+
+    fs.writeFileSync(path.join(distPath, 'index.ejs'), ejs);
+    fs.unlinkSync(htmlPath);
+  },
+});
+
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: './',
   plugins: [
     commonjs(),
     nodePolyfills({
@@ -15,6 +44,7 @@ export default defineConfig({
     }),
     react(),
     svgr(),
+    createEjsTemplate(),
   ],
   resolve: {
     alias: {
@@ -24,6 +54,10 @@ export default defineConfig({
   server: {
     port: 3000,
     open: true,
+    proxy: {
+      '/api': 'http://localhost:1337',
+      '/socket.io': { target: 'http://localhost:1337', ws: true },
+    },
   },
   build: {
     target: browserslistToEsbuild(['>0.2%', 'not dead', 'not op_mini all']),