Added support for non root (home) deployment of bit-server #4923

scopes/harmony/graphql/render-lifecycle.tsx

@@ -66,9 +66,9 @@ export class GraphqlRenderLifecycle implements RenderLifecycle<RenderContext, {
   browserInit = ({ state }: { state?: NormalizedCacheObject } = {}) => {
     const { location } = window;
     const isInsecure = location.protocol === 'http:';
-    const wsUrl = `${isInsecure ? 'ws:' : 'wss:'}//${location.host}/subscriptions`;
+    const wsUrl = `${isInsecure ? 'ws:' : 'wss:'}//${location.host}/bit-dev/subscriptions`;
 
-    const client = this.graphqlUI.createClient('/graphql', { state, subscriptionUri: wsUrl });
+    const client = this.graphqlUI.createClient('/bit-dev/graphql', { state, subscriptionUri: wsUrl });
 
     return { client };
   };

scopes/preview/ui/component-preview/urls.ts

@@ -25,7 +25,7 @@ export function toPreviewServer(component: ComponentModel) {
 
   // fallback url for all components. Includes versions support
   // for example - "/api/teambit.base-ui/input/[email protected]/~aspect/preview/"
-  const defaultServerUrl = `/api/${component.id.toString()}/~aspect/preview/`;
+  const defaultServerUrl = `/bit-dev/api/${component.id.toString()}/~aspect/preview/`;
 
   return explicitUrl || /* envBasedUrl || */ defaultServerUrl;
 }

scopes/ui-foundation/react-router/react-router/route-context.tsx

@@ -13,6 +13,7 @@ type RouterContextProps = {
   routing?: Routing;
   children: ReactNode;
   location?: string;
+  basename?: string;
 };
 
 type RootRouteProps = {
@@ -23,10 +24,16 @@ type RootRouteProps = {
 /**
  * Setup context needed for routing.
  */
-export function RouteContext({ reactRouterUi, routing = Routing.url, children, location }: RouterContextProps) {
+export function RouteContext({
+  reactRouterUi,
+  routing = Routing.url,
+  children,
+  location,
+  basename = '/bit-dev/',
+}: RouterContextProps) {
   return (
     // {/* set up the virtual router (browser, inMemory, etc) */}
-    <Router type={routing} location={location}>
+    <Router type={routing} location={location} basename={basename}>
       {/* injects History object back to reactRouterUi */}
       <HistoryGetter onRouterChange={reactRouterUi.setRouter} />
       {/* injects react-router Link into context  */}
@@ -43,21 +50,35 @@ export function RootRoute({ rootRoutes, routeSlot }: RootRouteProps) {
 }
 
 /** provides the router engine (browser, inMemory, etc) */
-function Router({ type, children, location }: { type: Routing; children: ReactNode; location?: string }) {
+function Router({
+  type,
+  children,
+  location,
+  basename,
+}: {
+  type: Routing;
+  children: ReactNode;
+  location?: string;
+  basename?: string;
+}) {
   switch (type) {
     case Routing.static:
-      return <StaticRouter location={location}>{children}</StaticRouter>;
+      return (
+        <StaticRouter basename={basename} location={location}>
+          {children}
+        </StaticRouter>
+      );
     case Routing.inMemory:
       return (
         <MemoryRouter initialEntries={[location || '/']} initialIndex={1}>
           {children}
         </MemoryRouter>
       );
     case Routing.hash:
-      return <HashRouter>{children}</HashRouter>;
+      return <HashRouter basename={basename}>{children}</HashRouter>;
     case Routing.url:
     default:
-      return <BrowserRouter>{children}</BrowserRouter>;
+      return <BrowserRouter basename={basename}>{children}</BrowserRouter>;
   }
 }
 

scopes/ui-foundation/ui/ui.main.runtime.ts

@@ -77,6 +77,12 @@ export type UIConfig = {
    */
   publicDir: string;
 
+  /**
+   * set `publicPath` value for webpack.config to override
+   * in case server is not accessed using root route.
+   */
+  publicPath: string;
+
   /** the url to display when server is listening. Note that bit does not provide proxying to this url */
   publicUrl?: string;
 };
@@ -216,7 +222,13 @@ export class UiMain {
     const ssr = uiRoot.buildOptions?.ssr || false;
     const mainEntry = await this.generateRoot(await uiRoot.resolveAspects(UIRuntime.name), name);
 
-    const browserConfig = createWebpackConfig(uiRoot.path, [mainEntry], uiRoot.name, await this.publicDir(uiRoot));
+    const browserConfig = createWebpackConfig(
+      uiRoot.path,
+      [mainEntry],
+      uiRoot.name,
+      await this.publicDir(uiRoot),
+      this.config.publicPath
+    );
     const ssrConfig = ssr && createSsrWebpackConfig(uiRoot.path, [mainEntry], await this.publicDir(uiRoot));
 
     const config = [browserConfig, ssrConfig].filter((x) => !!x) as webpack.Configuration[];
@@ -490,7 +502,8 @@ export class UiMain {
       uiRoot.path,
       [await this.generateRoot(await uiRoot.resolveAspects(UIRuntime.name), name)],
       uiRoot.name,
-      await this.publicDir(uiRoot)
+      await this.publicDir(uiRoot),
+      this.config.publicPath
     );
     if (config.output?.path && fs.pathExistsSync(config.output.path)) return;
     const hash = await this.buildUiHash(uiRoot);
@@ -509,6 +522,8 @@ export class UiMain {
 
   static defaultConfig: UIConfig = {
     publicDir: 'public/bit',
+    // Changing to relative path which should work in all cases
+    publicPath: process.env.ASSET_PATH || './',
     portRange: [3000, 3100],
     host: 'localhost',
   };

scopes/ui-foundation/ui/webpack/webpack.browser.config.ts

@@ -12,17 +12,18 @@ export default function createWebpackConfig(
   workspaceDir: string,
   entryFiles: string[],
   title: string,
-  publicDir: string
+  publicDir: string,
+  publicPath: string
 ): Configuration {
   const baseConfig = createBaseConfig(workspaceDir, entryFiles);
-  const browserConfig = createBrowserConfig(workspaceDir, title, publicDir);
+  const browserConfig = createBrowserConfig(workspaceDir, title, publicDir, publicPath);
 
   const combined = merge(baseConfig, browserConfig);
 
   return combined;
 }
 
-function createBrowserConfig(workspaceDir: string, title: string, publicDir: string) {
+function createBrowserConfig(workspaceDir: string, title: string, publicDir: string, publicPath: string) {
   const browserConfig: Configuration = {
     // target: 'web', // already default
 
@@ -31,7 +32,7 @@ function createBrowserConfig(workspaceDir: string, title: string, publicDir: str
       // webpack uses `publicPath` to determine where the app is being served from.
       // It requires a trailing slash, or the file assets will get an incorrect path.
       // We inferred the "public path" (such as / or /my-project) from homepage.
-      publicPath: '/',
+      publicPath,
     },
 
     optimization: {

workspace.jsonc

@@ -4,7 +4,10 @@
     "name": "bit",
     "icon": "https://static.bit.dev/bit-logo.svg",
     "defaultScope": "teambit.bit",
-    "defaultDirectory": "components"
+    "defaultDirectory": "components",
+    // I would like to see this to be used across all places where 
+    // code changes are done as part of this PR.
+    "publicPath": "/bit-dev"
   },
   "teambit.dependencies/dependency-resolver": {
     "packageManager": "teambit.dependencies/yarn",