feat: containerization

.gitignore

@@ -8,6 +8,8 @@ node_modules
 .env
 .env.*
 !.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
 
 .DS_STORE
 .cache
@@ -145,4 +147,4 @@ dist
 .stylelintcache
 
 # SvelteKit build / generate output
-.svelte-kit
+.svelte-kit

package.json

@@ -42,7 +42,7 @@
         "@melt-ui/pp": "^0.1.4",
         "@melt-ui/svelte": "^0.61.2",
         "@playwright/test": "^1.37.1",
-        "@sveltejs/adapter-static": "^3.0.1",
+        "@sveltejs/adapter-node": "^5.0.1",
         "@sveltejs/kit": "^2.3.4",
         "@sveltejs/vite-plugin-svelte": "^3.0.1",
         "@testing-library/dom": "^9.0.1",

src/app.html

@@ -9,37 +9,37 @@
 
         <link
             rel="preload"
-            href="/fonts/inter/inter-v8-latin-600.woff2"
+            href="/console/fonts/inter/inter-v8-latin-600.woff2"
             as="font"
             type="font/woff2"
             crossorigin />
         <link
             rel="preload"
-            href="/fonts/inter/inter-v8-latin-regular.woff2"
+            href="/console/fonts/inter/inter-v8-latin-regular.woff2"
             as="font"
             type="font/woff2"
             crossorigin />
         <link
             rel="preload"
-            href="/fonts/poppins/poppins-v19-latin-500.woff2"
+            href="/console/fonts/poppins/poppins-v19-latin-500.woff2"
             as="font"
             type="font/woff2"
             crossorigin />
         <link
             rel="preload"
-            href="/fonts/poppins/poppins-v19-latin-600.woff2"
+            href="/console/fonts/poppins/poppins-v19-latin-600.woff2"
             as="font"
             type="font/woff2"
             crossorigin />
         <link
             rel="preload"
-            href="/fonts/poppins/poppins-v19-latin-700.woff2"
+            href="/console/fonts/poppins/poppins-v19-latin-700.woff2"
             as="font"
             type="font/woff2"
             crossorigin />
         <link
             rel="preload"
-            href="/fonts/source-code-pro/source-code-pro-v20-latin-regular.woff2"
+            href="/console/fonts/source-code-pro/source-code-pro-v20-latin-regular.woff2"
             as="font"
             type="font/woff2"
             crossorigin />
@@ -127,10 +127,9 @@
             as="font"
             type="font/woff2"
             crossorigin />
-        <link rel="preload" as="style" type="text/css" href="/fonts/main.css" />
-        <link rel="stylesheet" href="/fonts/main.css" />
+        <link rel="preload" as="style" type="text/css" href="/console/fonts/main.css" />
+        <link rel="stylesheet" href="/console/fonts/main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <!-- {{CLOUD_OG}} -->
 
         %sveltekit.head%
     </head>

src/lib/commandCenter/panels/createAttribute.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { initCreateAttribute } from '$routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte';
-    import { attributeOptions } from '$routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store';
+    import { initCreateAttribute } from '$routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte';
+    import { attributeOptions } from '$routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/store';
     import Template from './template.svelte';
 
     let search = '';

src/lib/commandCenter/panels/createMessage.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-    import { providers } from '$routes/console/project-[project]/messaging/providers/store';
+    import { providers } from '$routes/(console)/project-[project]/messaging/providers/store';
     import {
         messageParams,
         providerType,
         targetsById
-    } from '$routes/console/project-[project]/messaging/wizard/store';
+    } from '$routes/(console)/project-[project]/messaging/wizard/store';
     import { MessagingProviderType } from '@appwrite.io/console';
     import Template from './template.svelte';
     import { wizard } from '$lib/stores/wizard';
-    import Create from '$routes/console/project-[project]/messaging/create.svelte';
-    import { topicsById } from '$routes/console/project-[project]/messaging/store';
+    import Create from '$routes/(console)/project-[project]/messaging/create.svelte';
+    import { topicsById } from '$routes/(console)/project-[project]/messaging/store';
 
     let search = '';
 

src/lib/commandCenter/panels/platforms.svelte

@@ -2,7 +2,7 @@
     import {
         Platform,
         addPlatform
-    } from '$routes/console/project-[project]/overview/platforms/+page.svelte';
+    } from '$routes/(console)/project-[project]/overview/platforms/+page.svelte';
     import Template from './template.svelte';
 
     let search = '';

src/lib/commandCenter/searchers/buckets.ts

@@ -1,17 +1,18 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { Query, type Models } from '@appwrite.io/console';
 import { get } from 'svelte/store';
 import type { Command, Searcher } from '../commands';
 import { addSubPanel } from '../subPanels';
 import { FilesPanel } from '../panels';
+import { base } from '$app/paths';
 
 const getBucketCommand = (bucket: Models.Bucket, projectId: string) => {
     return {
         label: `${bucket.name}`,
         callback() {
-            goto(`/console/project-${projectId}/storage/bucket-${bucket.$id}`);
+            goto(`${base}/project-${projectId}/storage/bucket-${bucket.$id}`);
         },
         group: 'buckets',
         icon: 'folder'
@@ -31,7 +32,7 @@ export const bucketSearcher = (async (query: string) => {
             {
                 label: 'Find files',
                 async callback() {
-                    await goto(`/console/project-${$project.$id}/storage/bucket-${bucket.$id}`);
+                    await goto(`${base}/project-${$project.$id}/storage/bucket-${bucket.$id}`);
                     addSubPanel(FilesPanel);
                 },
                 group: 'buckets',
@@ -43,7 +44,7 @@ export const bucketSearcher = (async (query: string) => {
                 label: 'Permissions',
                 async callback() {
                     await goto(
-                        `/console/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#permissions`
+                        `${base}/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#permissions`
                     );
                     scrollBy({ top: -100 });
                 },
@@ -55,7 +56,7 @@ export const bucketSearcher = (async (query: string) => {
                 label: 'Extensions',
                 async callback() {
                     await goto(
-                        `/console/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#extensions`
+                        `${base}/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#extensions`
                     );
                 },
                 group: 'buckets',
@@ -66,7 +67,7 @@ export const bucketSearcher = (async (query: string) => {
                 label: 'File Security',
                 async callback() {
                     await goto(
-                        `/console/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#file-security`
+                        `${base}/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#file-security`
                     );
                     scrollBy({ top: -100 });
                 },

src/lib/commandCenter/searchers/collections.ts

@@ -1,9 +1,10 @@
 import { goto } from '$app/navigation';
-import { database } from '$routes/console/project-[project]/databases/database-[database]/store';
-import { project } from '$routes/console/project-[project]/store';
+import { database } from '$routes/(console)/project-[project]/databases/database-[database]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
+import { base } from '$app/paths';
 
 export const collectionsSearcher = (async (query: string) => {
     const databaseId = get(database).$id;
@@ -19,7 +20,7 @@ export const collectionsSearcher = (async (query: string) => {
                     label: col.name,
                     callback: () => {
                         goto(
-                            `/console/project-${projectId}/databases/database-${databaseId}/collection-${col.$id}`
+                            `${base}/project-${projectId}/databases/database-${databaseId}/collection-${col.$id}`
                         );
                     }
                 }) as const

src/lib/commandCenter/searchers/databases.ts

@@ -1,8 +1,9 @@
 import { goto } from '$app/navigation';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
+import { base } from '$app/paths';
 
 export const dbSearcher = (async (query: string) => {
     const { databases } = await sdk.forProject.databases.list();
@@ -15,7 +16,7 @@ export const dbSearcher = (async (query: string) => {
                     group: 'databases',
                     label: db.name,
                     callback: () => {
-                        goto(`/console/project-${get(project).$id}/databases/database-${db.$id}`);
+                        goto(`${base}/project-${get(project).$id}/databases/database-${db.$id}`);
                     },
                     icon: 'database'
                 }) as const

src/lib/commandCenter/searchers/files.ts

@@ -1,10 +1,11 @@
 import { sdk } from '$lib/stores/sdk';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
-import { bucket } from '$routes/console/project-[project]/storage/bucket-[bucket]/store';
+import { bucket } from '$routes/(console)/project-[project]/storage/bucket-[bucket]/store';
 import { Query } from '@appwrite.io/console';
 import { goto } from '$app/navigation';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
+import { base } from '$app/paths';
 
 export const fileSearcher = (async (query: string) => {
     const $bucket = get(bucket);
@@ -19,7 +20,7 @@ export const fileSearcher = (async (query: string) => {
     return files.map((file) => ({
         label: file.name,
         callback: () => {
-            goto(`/console/project-${$project.$id}/storage/bucket-${$bucket.$id}/file-${file.$id}`);
+            goto(`${base}/project-${$project.$id}/storage/bucket-${$bucket.$id}/file-${file.$id}`);
         },
         icon: 'document',
         group: 'files'

src/lib/commandCenter/searchers/functions.ts

@@ -1,17 +1,18 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
 import { page } from '$app/stores';
-import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/store';
+import { showCreateDeployment } from '$routes/(console)/project-[project]/functions/function-[function]/store';
+import { base } from '$app/paths';
 
 const getFunctionCommand = (fn: Models.Function, projectId: string) => {
     return {
         label: fn.name,
         callback: () => {
-            goto(`/console/project-${projectId}/functions/function-${fn.$id}`);
+            goto(`${base}/project-${projectId}/functions/function-${fn.$id}`);
         },
         group: 'functions',
         icon: 'lightning-bolt'
@@ -35,7 +36,7 @@ export const functionsSearcher = (async (query: string) => {
                 async callback() {
                     const $page = get(page);
                     if (!$page.url.pathname.endsWith(func.$id)) {
-                        await goto(`/console/project-${projectId}/functions/function-${func.$id}`);
+                        await goto(`${base}/project-${projectId}/functions/function-${func.$id}`);
                     }
                     showCreateDeployment.set(true);
                 },
@@ -46,7 +47,7 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to deployments',
                 nested: true,
                 callback() {
-                    goto(`/console/project-${projectId}/functions/function-${func.$id}`);
+                    goto(`${base}/project-${projectId}/functions/function-${func.$id}`);
                 },
                 group: 'functions'
             },
@@ -54,7 +55,7 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to usage',
                 nested: true,
                 callback() {
-                    goto(`/console/project-${projectId}/functions/function-${func.$id}/usage`);
+                    goto(`${base}/project-${projectId}/functions/function-${func.$id}/usage`);
                 },
                 group: 'functions'
             },
@@ -62,7 +63,7 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to executions',
                 nested: true,
                 callback() {
-                    goto(`/console/project-${projectId}/functions/function-${func.$id}/executions`);
+                    goto(`${base}/project-${projectId}/functions/function-${func.$id}/executions`);
                 },
                 group: 'functions'
             },
@@ -70,7 +71,7 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to settings',
                 nested: true,
                 callback() {
-                    goto(`/console/project-${projectId}/functions/function-${func.$id}/settings`);
+                    goto(`${base}/project-${projectId}/functions/function-${func.$id}/settings`);
                 },
                 group: 'functions'
             }

src/lib/commandCenter/searchers/messages.ts

@@ -1,9 +1,10 @@
 import { goto } from '$app/navigation';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { get } from 'svelte/store';
 import { type Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
 import { MessagingProviderType } from '@appwrite.io/console';
+import { base } from '$app/paths';
 
 const getLabel = (message) => {
     switch (message.providerType) {
@@ -44,7 +45,7 @@ export const messagesSearcher = (async (query: string) => {
                     group: 'messages',
                     label: getLabel(message),
                     callback: () => {
-                        goto(`/console/project-${projectId}/messaging/message-${message.$id}`);
+                        goto(`${base}/project-${projectId}/messaging/message-${message.$id}`);
                     },
                     icon: getIcon(message)
                 }) as const

src/lib/commandCenter/searchers/organizations.ts

@@ -1,4 +1,5 @@
 import { goto } from '$app/navigation';
+import { base } from '$app/paths';
 import { sdk } from '$lib/stores/sdk';
 import type { Searcher } from '../commands';
 
@@ -10,7 +11,7 @@ export const orgSearcher = (async (query: string) => {
             return {
                 label: organization.name,
                 callback: () => {
-                    goto(`/console/organization-${organization.$id}`);
+                    goto(`${base}/organization-${organization.$id}`);
                 },
                 group: 'organizations'
             } as const;

src/lib/commandCenter/searchers/projects.ts

@@ -4,6 +4,7 @@ import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
+import { base } from '$app/paths';
 
 export const projectsSearcher = (async (query: string) => {
     const { projects } = await sdk.forConsole.projects.list([
@@ -17,7 +18,7 @@ export const projectsSearcher = (async (query: string) => {
             return {
                 label: project.name,
                 callback: () => {
-                    goto(`/console/project-${project.$id}`);
+                    goto(`${base}/project-${project.$id}`);
                 },
                 group: 'projects'
             } as const;

src/lib/commandCenter/searchers/providers.ts

@@ -1,9 +1,10 @@
 import { goto } from '$app/navigation';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
-import { getProviderDisplayNameAndIcon } from '$routes/console/project-[project]/messaging/provider.svelte';
+import { getProviderDisplayNameAndIcon } from '$routes/(console)/project-[project]/messaging/provider.svelte';
+import { base } from '$app/paths';
 
 const getIcon = (provider: string) => {
     const { icon } = getProviderDisplayNameAndIcon(provider);
@@ -24,7 +25,7 @@ export const providersSearcher = (async (query: string) => {
                     label: provider.name,
                     callback: () => {
                         goto(
-                            `/console/project-${projectId}/messaging/providers/provider-${provider.$id}`
+                            `${base}/project-${projectId}/messaging/providers/provider-${provider.$id}`
                         );
                     },
                     image: getIcon(provider.provider)

src/lib/commandCenter/searchers/teams.ts

@@ -1,15 +1,16 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { get } from 'svelte/store';
 import type { Command, Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
+import { base } from '$app/paths';
 
 const getTeamCommand = (team: Models.Team<Models.Preferences>, projectId: string) =>
     ({
         label: team.name,
         callback: () => {
-            goto(`/console/project-${projectId}/auth/teams/team-${team.$id}`);
+            goto(`${base}/project-${projectId}/auth/teams/team-${team.$id}`);
         },
         group: 'teams',
         icon: 'user-circle'
@@ -25,7 +26,7 @@ export const teamSearcher = (async (query: string) => {
             {
                 label: 'Go to members',
                 callback: () => {
-                    goto(`/console/project-${projectId}/auth/teams/team-${teams[0].$id}/members`);
+                    goto(`${base}/project-${projectId}/auth/teams/team-${teams[0].$id}/members`);
                 },
                 group: 'teams',
                 nested: true
@@ -34,7 +35,7 @@ export const teamSearcher = (async (query: string) => {
             {
                 label: 'Go to activity',
                 callback: () => {
-                    goto(`/console/project-${projectId}/auth/teams/team-${teams[0].$id}/activity`);
+                    goto(`${base}/project-${projectId}/auth/teams/team-${teams[0].$id}/activity`);
                 },
                 group: 'teams',
                 nested: true

src/lib/commandCenter/searchers/topics.ts

@@ -1,8 +1,9 @@
 import { goto } from '$app/navigation';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
+import { base } from '$app/paths';
 
 export const topicsSearcher = (async (query: string) => {
     const { topics } = await sdk.forProject.messaging.listTopics([], query || undefined);
@@ -17,7 +18,7 @@ export const topicsSearcher = (async (query: string) => {
                     group: 'topics',
                     label: topic.name,
                     callback: () => {
-                        goto(`/console/project-${projectId}/messaging/topics/topic-${topic.$id}`);
+                        goto(`${base}/project-${projectId}/messaging/topics/topic-${topic.$id}`);
                     },
                     icon: 'send'
                 }) as const

src/lib/commandCenter/searchers/users.ts

@@ -1,16 +1,17 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { project } from '$routes/console/project-[project]/store';
+import { project } from '$routes/(console)/project-[project]/store';
 import { get } from 'svelte/store';
 import type { Command, Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
-import { promptDeleteUser } from '$routes/console/project-[project]/auth/user-[user]/dangerZone.svelte';
+import { promptDeleteUser } from '$routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte';
+import { base } from '$app/paths';
 
 const getUserCommand = (user: Models.User<Models.Preferences>, projectId: string) =>
     ({
         label: user.name,
         callback: () => {
-            goto(`/console/project-${projectId}/auth/user-${user.$id}`);
+            goto(`${base}/project-${projectId}/auth/user-${user.$id}`);
         },
         group: 'users',
         icon: 'user-circle'
@@ -35,7 +36,7 @@ export const userSearcher = (async (query: string) => {
             {
                 label: 'Go to activity',
                 callback: () => {
-                    goto(`/console/project-${projectId}/auth/user-${users[0].$id}/activity`);
+                    goto(`${base}/project-${projectId}/auth/user-${users[0].$id}/activity`);
                 },
                 group: 'users',
                 nested: true
@@ -43,7 +44,7 @@ export const userSearcher = (async (query: string) => {
             {
                 label: 'Go to sessions',
                 callback: () => {
-                    goto(`/console/project-${projectId}/auth/user-${users[0].$id}/sessions`);
+                    goto(`${base}/project-${projectId}/auth/user-${users[0].$id}/sessions`);
                 },
                 group: 'users',
                 nested: true
@@ -51,7 +52,7 @@ export const userSearcher = (async (query: string) => {
             {
                 label: 'Go to memberships',
                 callback: () => {
-                    goto(`/console/project-${projectId}/auth/user-${users[0].$id}/memberships`);
+                    goto(`${base}/project-${projectId}/auth/user-${users[0].$id}/memberships`);
                 },
                 group: 'users',
                 nested: true

src/lib/components/billing/alerts/limitReached.svelte

@@ -8,10 +8,10 @@
     import { readOnly, tierToPlan } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
 </script>
 
-{#if $organization?.$id && $organization?.billingPlan === BillingPlan.STARTER && $readOnly && !$page.url.pathname.includes('/console/account')}
+{#if $organization?.$id && $organization?.billingPlan === BillingPlan.STARTER && $readOnly && !$page.url.pathname.includes(`${base}/account`)}
     <HeaderAlert
         type="error"
         title={`${$organization.name} usage has reached the ${tierToPlan($organization.billingPlan).name} plan limit`}>
@@ -20,10 +20,7 @@
             plan. Consider upgrading to increase your resource usage.
         </svelte:fragment>
         <svelte:fragment slot="buttons">
-            <Button
-                href={`${base}/console/organization-${$organization?.$id}/usage`}
-                text
-                fullWidthMobile>
+            <Button href={`${base}/organization-${$organization?.$id}/usage`} text fullWidthMobile>
                 <span class="text">View usage</span>
             </Button>
             <Button

src/lib/components/billing/alerts/markedForDeletion.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { HeaderAlert } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
 </script>
 
-{#if $organization?.markedForDeletion && !$page.url.pathname.includes('/console/account')}
+{#if $organization?.markedForDeletion && !$page.url.pathname.includes(`${base}/account`)}
     <HeaderAlert title="Organization flagged for deletion">
         <svelte:fragment>
             All existing projects in the {$organization.name} organization have been paused. This organization

src/lib/components/billing/alerts/missingPaymentMethod.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import { orgMissingPaymentMethod } from '$routes/console/store';
+    import { orgMissingPaymentMethod } from '$routes/(console)/store';
 </script>
 
 {#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !$page.url.pathname.includes('/console/account')}
@@ -15,9 +16,7 @@
             your projects.
         </svelte:fragment>
         <svelte:fragment slot="buttons">
-            <Button
-                secondary
-                href={`/console/organization-${$orgMissingPaymentMethod.$id}/billing`}>
+            <Button secondary href={`${base}/organization-${$orgMissingPaymentMethod.$id}/billing`}>
                 Add payment method
             </Button>
         </svelte:fragment>

src/lib/components/billing/alerts/paymentAuthRequired.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
@@ -9,7 +10,7 @@
     const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
 </script>
 
-{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !$page.url.pathname.includes('/console/account')}
+{#if $actionRequiredInvoices && $actionRequiredInvoices?.invoices?.length && !$page.url.pathname.includes(`${base}/account`)}
     <HeaderAlert title="Authorization required" type="error">
         Please authorize your upcoming payment for {$organization.name}. Your bank requires this
         security measure to proceed with payment.
@@ -21,7 +22,7 @@
             </Button>
             <Button
                 secondary
-                href={`/console/organization-${$organization.$id}/billing?type=confirmation&invoice=${$actionRequiredInvoices.invoices[0].$id}`}>
+                href={`${base}/organization-${$organization.$id}/billing?type=confirmation&invoice=${$actionRequiredInvoices.invoices[0].$id}`}>
                 Authorize payment
             </Button>
         </svelte:fragment>

src/lib/components/billing/alerts/paymentMandate.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
@@ -16,7 +17,7 @@
     }
 </script>
 
-{#if $paymentMissingMandate && $paymentMissingMandate.country === 'in' && $paymentMissingMandate.mandateId === null && !$page.url.pathname.includes('/console/account')}
+{#if $paymentMissingMandate && $paymentMissingMandate.country === 'in' && $paymentMissingMandate.mandateId === null && !$page.url.pathname.includes(`${base}/account`)}
     <HeaderAlert title="Authorization required" type="info">
         The payment method for {$organization.name} needs to be verified.
         <svelte:fragment slot="buttons">

src/lib/components/billing/alerts/projectsAtRisk.svelte

@@ -7,7 +7,7 @@
     import { failedInvoice } from '$lib/stores/billing';
 </script>
 
-{#if $failedInvoice && !$page.url.pathname.includes('/console/account')}
+{#if $failedInvoice && !$page.url.pathname.includes(`${base}/account`)}
     {@const daysPassed = diffDays(new Date($failedInvoice.dueAt), new Date())}
     <HeaderAlert title="Your projects are at risk">
         <svelte:fragment>
@@ -22,7 +22,7 @@
         </svelte:fragment>
         <svelte:fragment slot="buttons">
             <Button
-                href={`${base}/console/organization-${$failedInvoice?.teamId}/billing#paymentMethods`}
+                href={`${base}/organization-${$failedInvoice?.teamId}/billing#paymentMethods`}
                 secondary
                 fullWidthMobile>
                 <span class="text">Update billing details</span>

src/lib/components/cardPlanLimit.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { wizard } from '$lib/stores/wizard';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
 
     export let service: string;
 </script>

src/lib/components/filePicker.svelte

@@ -516,7 +516,7 @@
                                     <Button
                                         secondary
                                         external
-                                        href={`${base}/console/project-${$page.params.project}/storage`}>
+                                        href={`${base}/project-${$page.params.project}/storage`}>
                                         Create bucket
                                     </Button>
                                 </div>

src/lib/components/support.svelte

@@ -6,12 +6,12 @@
     import SupportOnlineDark from '$lib/images/support/support-online-dark.png';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
-    import SupportWizard from '../../routes/console/supportWizard.svelte';
-    import { isSupportOnline, showSupportModal } from '../../routes/console/wizard/support/store';
+    import SupportWizard from '$routes/(console)/supportWizard.svelte';
+    import { isSupportOnline, showSupportModal } from '$routes/(console)/(wizard)/support/store';
     import { isCloud } from '$lib/system';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
     import { trackEvent } from '$lib/actions/analytics';
 
     export let show = false;

src/lib/components/uploadBox.svelte

@@ -41,7 +41,7 @@
                     {#if file.completed || file.progress === 100}
                         <a
                             class="upload-box-item"
-                            href={`${base}/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/file-${file.$id}`}>
+                            href={`${base}/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/file-${file.$id}`}>
                             <div class="u-margin-inline-end-16">
                                 <Avatar
                                     size={32}

src/lib/elements/table/body.svelte

@@ -3,7 +3,7 @@
     import { getServiceLimit, type PlanServices } from '$lib/stores/billing';
     import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
     import { Button } from '../forms';
 
     let tableBody: HTMLDivElement;

src/lib/layout/containerHeader.svelte

@@ -15,7 +15,7 @@
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
     import { createEventDispatcher, onMount } from 'svelte';
     import { ContainerButton } from '.';
     import { trackEvent } from '$lib/actions/analytics';

src/lib/layout/footer.svelte

@@ -2,7 +2,7 @@
     import { settings } from '$lib/components/consent.svelte';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { isCloud } from '$lib/system';
-    import { version } from '$routes/console/store';
+    import { version } from '$routes/(console)/store';
 
     const currentYear = new Date().getFullYear();
 </script>

src/lib/layout/header.svelte

@@ -21,9 +21,9 @@
     import { sdk } from '$lib/stores/sdk';
     import { isCloud } from '$lib/system';
     import { wizard } from '$lib/stores/wizard';
-    import CreateOrganizationCloud from '$routes/console/createOrganizationCloud.svelte';
+    import CreateOrganizationCloud from '$routes/(console)/createOrganizationCloud.svelte';
     import { Feedback } from '$lib/components/feedback';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
     import { BillingPlan } from '$lib/constants';
 
     let showDropdown = false;
@@ -79,10 +79,7 @@
 <svelte:window on:click={onBlur} />
 
 <div class="logo u-inline-flex u-gap-16 u-cross-center">
-    <a
-        href={$organization
-            ? `${base}/console/organization-${$organization.$id}`
-            : `${base}/console`}>
+    <a href={$organization ? `${base}/organization-${$organization.$id}` : `${base}/`}>
         <img
             src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
             width="120"
@@ -104,7 +101,7 @@
 
 <div class="main-header-end">
     <nav class="u-flex is-only-desktop u-cross-center">
-        {#if isCloud && $organization?.billingPlan === BillingPlan.STARTER && !$page.url.pathname.startsWith('/console/account')}
+        {#if isCloud && $organization?.billingPlan === BillingPlan.STARTER && !$page.url.pathname.startsWith(`${base}/account`)}
             <Button
                 disabled={$organization?.markedForDeletion}
                 on:click={() => {
@@ -183,7 +180,7 @@
                                 <ul class="drop-list">
                                     {#each $organizationList.teams as org}
                                         <DropListLink
-                                            href={`${base}/console/organization-${org.$id}`}
+                                            href={`${base}/organization-${org.$id}`}
                                             on:click={() => {
                                                 showDropdown = false;
                                             }}>{org.name}</DropListLink>
@@ -197,7 +194,7 @@
                                     New organization
                                 </DropListItem>
                                 <DropListLink
-                                    href={`${base}/console/account`}
+                                    href={`${base}/account`}
                                     on:click={() => (showDropdown = false)}>
                                     Your account
                                 </DropListLink>

src/lib/layout/logs.svelte

@@ -14,7 +14,7 @@
     import { beforeNavigate } from '$app/navigation';
     import { Pill } from '$lib/elements';
     import { isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
     import { wizard } from '$lib/stores/wizard';
     import { getServiceLimit, tierToPlan } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';

src/lib/layout/navigation.svelte

@@ -9,14 +9,14 @@
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
-    import Create from '$routes/console/feedbackWizard.svelte';
-    import { showSupportModal } from '$routes/console/wizard/support/store';
+    import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
+    import Create from '$routes/(console)/feedbackWizard.svelte';
+    import { showSupportModal } from '$routes/(console)/(wizard)/support/store';
 
     export let isOpen = false;
 
     $: project = $page.params.project;
-    $: projectPath = `${base}/console/project-${project}`;
+    $: projectPath = `${base}/project-${project}`;
 
     $: subNavigation = $page.data.subNavigation;
     // We need to have this second variable, because we only want narrow

src/lib/layout/shell.svelte

@@ -4,7 +4,7 @@
     import { page } from '$app/stores';
     import { log } from '$lib/stores/logs';
     import { wizard } from '$lib/stores/wizard';
-    import { activeHeaderAlert } from '$routes/console/store';
+    import { activeHeaderAlert } from '$routes/(console)/store';
 
     export let isOpen = false;
     export let showSideNavigation = false;

src/lib/layout/unauthenticated.svelte

@@ -3,6 +3,7 @@
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.png';
     import LoginLight from '$lib/images/login/login-light-mode.png';
+    import { base } from '$app/paths';
     import { app } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
 
@@ -15,7 +16,7 @@
         class="u-flex u-flex-vertical"
         style:--url={`url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
         <div class="logo u-flex u-gap-16 is-not-mobile">
-            <a href={user ? '/console' : '/'}>
+            <a href={user ? `${base}/console` : base}>
                 {#if $app.themeInUse === 'dark'}
                     <img
                         src={AppwriteLogoDark}
@@ -60,7 +61,7 @@
             </div>
             <div
                 class="logo u-flex u-gap-16 u-margin-inline-auto is-only-mobile u-margin-block-start-32">
-                <a href={user ? '/console' : '/'}>
+                <a href={user ? `${base}/console` : base}>
                     {#if $app.themeInUse === 'dark'}
                         <img
                             src={AppwriteLogoDark}

src/lib/pages/domains/wizard/step1.svelte

@@ -5,9 +5,9 @@
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { isSelfHosted } from '$lib/system';
-    import { func } from '$routes/console/project-[project]/functions/function-[function]/store';
+    import { func } from '$routes/(console)/project-[project]/functions/function-[function]/store';
     import { domain, typeStore } from './store';
-    import { consoleVariables } from '$routes/console/store';
+    import { consoleVariables } from '$routes/(console)/store';
     import { ResourceType } from '@appwrite.io/console';
 
     let error = null;

src/lib/stores/app.ts

@@ -1,4 +1,5 @@
 import { browser } from '$app/environment';
+import { base } from '$app/paths';
 import { derived, writable } from 'svelte/store';
 
 export type AppStore = {
@@ -13,7 +14,7 @@ export const app = writable<AppStore>({
 
 export const iconPath = derived(app, ($app) => {
     return (name: string, type: 'color' | 'grayscale') => {
-        return `/icons/${$app.themeInUse}/${type}/${name}.svg`;
+        return `${base}/icons/${$app.themeInUse}/${type}/${name}.svg`;
     };
 });
 

src/lib/stores/billing.ts

@@ -18,14 +18,14 @@ import PaymentAuthRequired from '$lib/components/billing/alerts/paymentAuthRequi
 import { addNotification, notifications } from './notifications';
 import { goto } from '$app/navigation';
 import { base } from '$app/paths';
-import { activeHeaderAlert, orgMissingPaymentMethod } from '$routes/console/store';
+import { activeHeaderAlert, orgMissingPaymentMethod } from '$routes/(console)/store';
 import MarkedForDeletion from '$lib/components/billing/alerts/markedForDeletion.svelte';
 import { BillingPlan } from '$lib/constants';
 import PaymentMandate from '$lib/components/billing/alerts/paymentMandate.svelte';
 import MissingPaymentMethod from '$lib/components/billing/alerts/missingPaymentMethod.svelte';
 import LimitReached from '$lib/components/billing/alerts/limitReached.svelte';
 import { wizard } from './wizard';
-import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+import ChangeOrganizationTierCloud from '$routes/(console)/changeOrganizationTierCloud.svelte';
 import { trackEvent } from '$lib/actions/analytics';
 
 export type Tier = 'tier-0' | 'tier-1' | 'tier-2';
@@ -233,7 +233,7 @@ export async function checkForUsageLimit(org: Organization) {
                 {
                     name: 'View usage',
                     method: () => {
-                        goto(`${base}/console/organization-${org.$id}/usage`);
+                        goto(`${base}/organization-${org.$id}/usage`);
                     }
                 },
                 {
@@ -297,7 +297,7 @@ export async function paymentExpired(org: Organization) {
                 {
                     name: 'Update payment details',
                     method: () => {
-                        goto(`${base}/console/account/payments`);
+                        goto(`${base}/account/payments`);
                     }
                 }
             ]
@@ -311,7 +311,7 @@ export async function paymentExpired(org: Organization) {
                 {
                     name: 'Update payment details',
                     method: () => {
-                        goto(`${base}/console/account/payments`);
+                        goto(`${base}/account/payments`);
                     }
                 }
             ]

src/lib/stores/oauth-providers.ts

@@ -1,15 +1,15 @@
 import type { Models } from '@appwrite.io/console';
 import type { SvelteComponent } from 'svelte';
 import { writable } from 'svelte/store';
-import Apple from '../../routes/console/project-[project]/auth/(providers)/appleOAuth.svelte';
-import Auth0 from '../../routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte';
-import Authentik from '../../routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte';
-import GitLab from '../../routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte';
-import Google from '../../routes/console/project-[project]/auth/(providers)/googleOAuth.svelte';
-import Main from '../../routes/console/project-[project]/auth/(providers)/mainOAuth.svelte';
-import Microsoft from '../../routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte';
-import Oidc from '../../routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte';
-import Okta from '../../routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte';
+import Apple from '$routes/(console)/project-[project]/auth/(providers)/appleOAuth.svelte';
+import Auth0 from '$routes/(console)/project-[project]/auth/(providers)/auth0OAuth.svelte';
+import Authentik from '$routes/(console)/project-[project]/auth/(providers)/authentikOAuth.svelte';
+import GitLab from '$routes/(console)/project-[project]/auth/(providers)/gitlabOAuth.svelte';
+import Google from '$routes/(console)/project-[project]/auth/(providers)/googleOAuth.svelte';
+import Main from '$routes/(console)/project-[project]/auth/(providers)/mainOAuth.svelte';
+import Microsoft from '$routes/(console)/project-[project]/auth/(providers)/microsoftOAuth.svelte';
+import Oidc from '$routes/(console)/project-[project]/auth/(providers)/oidcOAuth.svelte';
+import Okta from '$routes/(console)/project-[project]/auth/(providers)/oktaOAuth.svelte';
 
 export type Provider = Models.AuthProvider & {
     icon: string;

src/lib/stores/stripe.ts

@@ -6,6 +6,7 @@ import type { PaymentMethodData } from '$lib/sdk/billing';
 import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 import { addNotification } from './notifications';
 import { organization } from './organization';
+import { base } from '$app/paths';
 
 export const stripe = writable<Stripe>();
 let paymentMethod: PaymentMethodData;
@@ -62,7 +63,7 @@ export async function submitStripeCard(name: string, organizationId?: string) {
         // // Element needs to be submitted before confirming the setup intent
         elements.submit();
 
-        const baseUrl = 'https://cloud.appwrite.io/console';
+        const baseUrl = 'https://cloud.appwrite.io' + base;
         const accountUrl = `${baseUrl}/account/payments?clientSecret=${clientSecret}`;
         const orgUrl = `${baseUrl}/organization-${organizationId}/billing?clientSecret=${clientSecret}`;
 
@@ -120,7 +121,7 @@ export async function confirmPayment(
 ) {
     try {
         const url =
-            window.location.origin + (route ? route : `/console/organization-${orgId}/billing`);
+            window.location.origin + (route ? route : `${base}/organization-${orgId}/billing`);
 
         const paymentMethod = await sdk.forConsole.billing.getPaymentMethod(paymentMethodId);
 
@@ -149,7 +150,7 @@ export async function confirmSetup(
     paymentMethodId: string,
     urlRoute?: string
 ) {
-    const baseUrl = 'https://cloud.appwrite.io/console/';
+    const baseUrl = `https://cloud.appwrite.io${base}/`;
 
     const { setupIntent, error } = await get(stripe).confirmCardSetup(clientSecret, {
         payment_method: paymentMethodId,

src/lib/wizards/functions/components/repositories.svelte

@@ -6,7 +6,7 @@
     import { timeFromNow } from '$lib/helpers/date';
     import { app } from '$lib/stores/app';
     import { sdk } from '$lib/stores/sdk';
-    import { repositories } from '$routes/console/project-[project]/functions/function-[function]/store';
+    import { repositories } from '$routes/(console)/project-[project]/functions/function-[function]/store';
     import { installation, installations, repository } from '../store';
     import { createEventDispatcher } from 'svelte';
 
@@ -120,7 +120,7 @@
     <p class="text u-margin-block-start-16">
         Manage organization configuration in your <a
             class="link"
-            href={`${base}/console/project-${$page.params.project}/settings`}>project settings</a
+            href={`${base}/project-${$page.params.project}/settings`}>project settings</a
         >.
     </p>
     {#if selectedInstallation}

src/lib/wizards/functions/connectExisting.svelte

@@ -4,7 +4,7 @@
     import GitConfiguration from './steps/gitConfiguration.svelte';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import { sdk } from '$lib/stores/sdk';
-    import { func } from '$routes/console/project-[project]/functions/function-[function]/store';
+    import { func } from '$routes/(console)/project-[project]/functions/function-[function]/store';
     import { choices, installation, repository } from './store';
     import { wizard } from '$lib/stores/wizard';
     import { invalidate } from '$app/navigation';

src/lib/wizards/functions/cover.svelte

@@ -35,7 +35,7 @@
     import { marketplace, type MarketplaceTemplate } from '$lib/stores/marketplace';
     import { Button } from '$lib/elements/forms';
     import { page } from '$app/stores';
-    import { baseRuntimesList } from '$routes/console/project-[project]/functions/store';
+    import { baseRuntimesList } from '$routes/(console)/project-[project]/functions/store';
     import { trackEvent } from '$lib/actions/analytics';
     import type { Models } from '@appwrite.io/console';
     import WizardCover from '$lib/layout/wizardCover.svelte';
@@ -44,7 +44,7 @@
     import CreateGit from './createGit.svelte';
     import { tooltip } from '$lib/actions/tooltip';
     import { isSelfHosted } from '$lib/system';
-    import { consoleVariables } from '$routes/console/store';
+    import { consoleVariables } from '$routes/(console)/store';
 
     const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
     let hasInstallations: boolean;
@@ -256,7 +256,7 @@
                         text
                         noMargin
                         class="u-margin-inline-start-auto u-margin-block-start-16"
-                        href={`${base}/console/project-${$page.params.project}/functions/templates`}>
+                        href={`${base}/project-${$page.params.project}/functions/templates`}>
                         <span> All templates </span>
                         <span class="icon-cheveron-right" aria-hidden="true" />
                     </Button>

src/lib/wizards/functions/createGit.svelte

@@ -38,9 +38,7 @@
                 $choices.silentMode || undefined,
                 $choices.rootDir || undefined
             );
-            goto(
-                `${base}/console/project-${$page.params.project}/functions/function-${response.$id}`
-            );
+            goto(`${base}/project-${$page.params.project}/functions/function-${response.$id}`);
             addNotification({
                 message: `${$createFunction.name} has been created`,
                 type: 'success'

src/lib/wizards/functions/createManual.svelte

@@ -44,9 +44,7 @@
                 $createFunctionDeployment[0],
                 true
             );
-            goto(
-                `${base}/console/project-${$page.params.project}/functions/function-${response.$id}`
-            );
+            goto(`${base}/project-${$page.params.project}/functions/function-${response.$id}`);
             addNotification({
                 message: `${$createFunction.name} has been created`,
                 type: 'success'

src/lib/wizards/functions/createTemplate.svelte

@@ -68,9 +68,7 @@
                 await Promise.all(promises);
             }
 
-            goto(
-                `${base}/console/project-${$page.params.project}/functions/function-${response.$id}`
-            );
+            goto(`${base}/project-${$page.params.project}/functions/function-${response.$id}`);
             addNotification({
                 message: `${response.name} has been created`,
                 type: 'success'

src/lib/wizards/functions/steps/details.svelte

@@ -5,7 +5,7 @@
     import { WizardStep } from '$lib/layout';
     import { onMount } from 'svelte';
     import { createFunction } from '../store';
-    import { runtimesList } from '$routes/console/project-[project]/functions/store';
+    import { runtimesList } from '$routes/(console)/project-[project]/functions/store';
 
     let showCustomId = false;
 

src/lib/wizards/functions/steps/functionConfiguration.svelte

@@ -7,7 +7,7 @@
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { choices, createFunction, installation, repository } from '../store';
-    import { runtimesList } from '$routes/console/project-[project]/functions/store';
+    import { runtimesList } from '$routes/(console)/project-[project]/functions/store';
 
     let showCustomId = false;
 

src/lib/wizards/functions/steps/gitConfiguration.svelte

@@ -4,7 +4,7 @@
     import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
-    import { sortBranches } from '$routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte';
+    import { sortBranches } from '$routes/(console)/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte';
     import { choices, installation, repository } from '../store';
 
     $choices.rootDir ??= '';

src/lib/wizards/functions/steps/templateConfiguration.svelte

@@ -3,7 +3,7 @@
     import { Pill } from '$lib/elements';
     import { FormList, InputSelect, InputText } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
-    import { runtimesList } from '$routes/console/project-[project]/functions/store';
+    import { runtimesList } from '$routes/(console)/project-[project]/functions/store';
     import { template, templateConfig } from '../store';
 
     let showCustomId = false;

src/routes/(auth)/git/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
     import { Container } from '$lib/layout';
-    import { loading } from '../store';
+    import { loading } from '../../store';
 
     loading.set(false);
 </script>

src/routes/(auth)/invite/+page.svelte

@@ -27,7 +27,7 @@
                 type: 'success',
                 message: 'Successfully logged in.'
             });
-            await goto(`${base}/console/organization-${teamId}`);
+            await goto(`${base}/organization-${teamId}`);
             trackEvent(Submit.MembershipUpdateStatus);
         } catch (error) {
             addNotification({

src/routes/(auth)/login/+page.svelte

@@ -44,10 +44,10 @@
                 if (redirect) {
                     await goto(`${base}${redirect}${$page.url.search}`);
                 } else {
-                    await goto(`${base}/console${$page.url.search ?? ''}`);
+                    await goto(`${base}${$page.url.search ?? ''}`);
                 }
             } else {
-                await goto(`${base}/console`);
+                await goto(base);
             }
         } catch (error) {
             disabled = false;
@@ -68,7 +68,7 @@
             if (redirect) {
                 url = `${base}${redirect}${$page.url.search}`;
             } else {
-                url = `${base}/console${$page.url.search ?? ''}`;
+                url = `${base}${$page.url.search ?? ''}`;
             }
         }
         sdk.forConsole.account.createOAuth2Session(

src/routes/(auth)/mfa/+page.svelte

@@ -41,7 +41,7 @@
 
     async function back() {
         await sdk.forConsole.account.deleteSession('current');
-        await goto(`${base}/`);
+        await goto(base);
     }
 
     async function verify() {
@@ -59,10 +59,10 @@
                 if (redirect) {
                     await goto(`${base}${redirect}${$page.url.search}`);
                 } else {
-                    await goto(`${base}/console${$page.url.search ?? ''}`);
+                    await goto(`${base}${$page.url.search ?? ''}`);
                 }
             } else {
-                await goto(`${base}/console`);
+                await goto(base);
             }
         } catch (error) {
             disabled = false;

src/routes/(auth)/register/+page.svelte

@@ -43,10 +43,10 @@
                 if (redirect) {
                     await goto(`${base}${redirect}${$page.url.search}`);
                 } else {
-                    await goto(`${base}/console${$page.url.search ?? ''}`);
+                    await goto(`${base}${$page.url.search ?? ''}`);
                 }
             } else {
-                await goto(`${base}/console`);
+                await goto(base);
             }
             trackEvent(Submit.AccountCreate);
         } catch (error) {

src/routes/(auth)/register/invite/[slug]/+page.svelte

@@ -77,7 +77,7 @@
                 const newPrefs = { ...prefs, code };
                 await sdk.forConsole.account.updatePrefs(newPrefs);
                 await invalidate(Dependencies.ACCOUNT);
-                await goto(`${base}/console`);
+                await goto(base);
                 trackEvent('submit_account_create', { code: code });
             }
         } catch (error) {

src/routes/(console)/(migration)/wizard.svelte

@@ -10,6 +10,7 @@
     import Step1 from './step1.svelte';
     import Step2 from './step2.svelte';
     import { requestedMigration } from '$routes/store';
+    import { base } from '$app/paths';
 
     const onExit = () => {
         formData.reset();
@@ -30,7 +31,7 @@
         await invalidateAll();
         wizard.hide();
 
-        goto(`/console/project-${$selectedProject}/settings/migrations`);
+        goto(`${base}/project-${$selectedProject}/settings/migrations`);
     };
 
     onDestroy(onExit);

src/routes/(console)/+error.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -9,6 +10,6 @@
     <div class="u-flex-vertical u-gap-16">
         <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
         <Heading size="4" tag="h4" trimmed={false}>{$page.error.message}</Heading>
-        <Button href="/console">Back to the console</Button>
+        <Button href={`${base}/console`}>Back to the console</Button>
     </div>
 </Container>

src/routes/(console)/+layout.svelte

@@ -30,18 +30,19 @@
     import { orgSearcher, projectsSearcher } from '$lib/commandCenter/searchers';
     import { addSubPanel } from '$lib/commandCenter/subPanels';
     import { addNotification } from '$lib/stores/notifications';
-    import { openMigrationWizard } from './(migration-wizard)';
+    import { openMigrationWizard } from './(migration)';
     import { project } from './project-[project]/store';
     import { feedback } from '$lib/stores/feedback';
     import { VARS, hasStripePublicKey, isCloud } from '$lib/system';
     import { loadStripe } from '@stripe/stripe-js';
     import { stripe } from '$lib/stores/stripe';
-    import MobileSupportModal from './wizard/support/mobileSupportModal.svelte';
-    import { showSupportModal } from './wizard/support/store';
+    import MobileSupportModal from './(wizard)/support/mobileSupportModal.svelte';
+    import { showSupportModal } from './(wizard)/support/store';
 
-    import UsageRates from './wizard/cloudOrganization/usageRates.svelte';
+    import UsageRates from './(wizard)/cloudOrganization/usageRates.svelte';
     import { activeHeaderAlert, consoleVariables } from './store';
     import { headerAlert } from '$lib/stores/headerAlert';
+    import { base } from '$app/paths';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -60,12 +61,12 @@
         {
             label: 'Go to Projects',
             callback: () => {
-                goto('/console');
+                goto(`${base}/console`);
             },
             keys: ['g', 'p'],
             group: 'navigation',
             disabled:
-                $page.url.pathname.includes('/console/organization-') &&
+                $page.url.pathname.includes(`${base}/organization-`) &&
                 !$page.url.pathname.endsWith('/members') &&
                 !$page.url.pathname.endsWith('/settings'),
             rank: -1
@@ -148,7 +149,7 @@
                 ({
                     label: kebabToSentenceCase(heading),
                     async callback() {
-                        await goto(`/console/project-${$project.$id}/auth/security#${heading}`);
+                        await goto(`${base}/project-${$project.$id}/auth/security#${heading}`);
                         scrollBy({ top: -100 });
                     },
                     group: 'security',
@@ -161,7 +162,7 @@
 
             keys: isOnSettingsLayout ? ['g', 'o'] : undefined,
             callback: () => {
-                goto(`/console/project-${$project.$id}/settings`);
+                goto(`${base}/project-${$project.$id}/settings`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.endsWith('settings'),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
@@ -172,7 +173,7 @@
 
             keys: isOnSettingsLayout ? ['g', 'd'] : undefined,
             callback: () => {
-                goto(`/console/project-${$project.$id}/settings/domains`);
+                goto(`${base}/project-${$project.$id}/settings/domains`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.includes('domains'),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
@@ -182,7 +183,7 @@
             label: 'Go to webhooks',
             keys: isOnSettingsLayout ? ['g', 'w'] : undefined,
             callback: () => {
-                goto(`/console/project-${$project.$id}/settings/webhooks`);
+                goto(`${base}/project-${$project.$id}/settings/webhooks`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.includes('webhooks'),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
@@ -193,7 +194,7 @@
             label: 'Go to migrations',
             keys: isOnSettingsLayout ? ['g', 'm'] : undefined,
             callback: () => {
-                goto(`/console/project-${$project.$id}/settings/migrations`);
+                goto(`${base}/project-${$project.$id}/settings/migrations`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.includes('migrations'),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
@@ -204,7 +205,7 @@
             label: 'Go to SMTP settings',
             keys: isOnSettingsLayout ? ['g', 's'] : undefined,
             callback: () => {
-                goto(`/console/project-${$project.$id}/settings/smtp`);
+                goto(`${base}/project-${$project.$id}/settings/smtp`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.includes('smtp'),
             group: isOnSettingsLayout ? 'navigation' : 'settings',
@@ -294,9 +295,9 @@
     bind:isOpen
     showSideNavigation={$page.url.pathname !== '/console' &&
         !$page?.params.organization &&
-        !$page.url.pathname.includes('/console/account') &&
-        !$page.url.pathname.includes('/console/card') &&
-        !$page.url.pathname.includes('/console/onboarding')}>
+        !$page.url.pathname.includes(`${base}/account`) &&
+        !$page.url.pathname.includes(`${base}/card`) &&
+        !$page.url.pathname.includes(`${base}/onboarding`)}>
     <Header slot="header" />
     <SideNavigation slot="side" bind:isOpen />
     <slot />

src/routes/(console)/account/breadcrumbs.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { Breadcrumbs } from '$lib/layout';
     import { user } from '$lib/stores/user';
 
     $: breadcrumbs = [
         {
-            href: `/console/account`,
+            href: `${base}/account`,
             title: $user?.name
         }
     ];