feat: migrate to container

.gitignore

@@ -10,6 +10,8 @@ node_modules
 !.env.example
 test-results/
 playwright-report/
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
 
 .DS_STORE
 .cache

Dockerfile

@@ -0,0 +1,32 @@
+FROM node:20-alpine as build
+
+WORKDIR /app
+
+ADD ./build.js /app/build.js
+ADD ./tsconfig.json /app/tsconfig.json
+ADD ./svelte.config.js /app/svelte.config.js
+ADD ./vite.config.ts /app/vite.config.ts
+ADD ./package.json /app/package.json
+ADD ./package-lock.json /app/package-lock.json
+ADD ./src /app/src
+ADD ./static /app/static
+
+ARG VITE_CONSOLE_MODE
+ARG VITE_APPWRITE_ENDPOINT
+ARG VITE_APPWRITE_GROWTH_ENDPOINT
+ARG VITE_STRIPE_PUBLIC_KEY
+
+ENV VITE_APPWRITE_ENDPOINT=$VITE_APPWRITE_ENDPOINT
+ENV VITE_APPWRITE_GROWTH_ENDPOINT=$VITE_APPWRITE_GROWTH_ENDPOINT
+ENV VITE_CONSOLE_MODE=$VITE_CONSOLE_MODE
+ENV VITE_STRIPE_PUBLIC_KEY=$VITE_STRIPE_PUBLIC_KEY
+
+RUN npm ci
+RUN npm run build
+
+FROM nginx:1.25-alpine
+
+EXPOSE 3000
+
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/build /usr/share/nginx/html/console

compose.yml

@@ -0,0 +1,16 @@
+services:
+    console:
+        build:
+            context: .
+            args:
+                VITE_CONSOLE_MODE: ${VITE_CONSOLE_MODE}
+                VITE_APPWRITE_ENDPOINT: ${VITE_APPWRITE_ENDPOINT}
+                VITE_APPWRITE_GROWTH_ENDPOINT: ${VITE_APPWRITE_GROWTH_ENDPOINT}
+                VITE_STRIPE_PUBLIC_KEY: ${VITE_STRIPE_PUBLIC_KEY}
+        environment:
+            - VITE_CONSOLE_MODE
+            - VITE_APPWRITE_ENDPOINT
+            - VITE_APPWRITE_GROWTH_ENDPOINT
+            - VITE_STRIPE_PUBLIC_KEY
+        ports:
+            - '3000:3000'

docker/nginx.conf

@@ -0,0 +1,16 @@
+server {
+    listen 3000;
+    listen [::]:3000;
+    server_name localhost;
+
+    location /console {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri /console/index.html;
+    }
+
+    location / {
+        absolute_redirect off;
+        return 301 /console;
+    }
+}

playwright.config.ts

@@ -4,6 +4,9 @@ const config: PlaywrightTestConfig = {
     timeout: 120000,
     reportSlowTests: null,
     reporter: [['html', { open: 'never' }]],
+    use: {
+        baseURL: 'http://localhost:4173/console'
+    },
     webServer: {
         timeout: 120000,
         env: {

src/app.html

@@ -4,42 +4,42 @@
         <meta charset="utf-8" />
         <meta name="description" content="" />
 
-        <link rel="icon" type="image/svg+xml" href="/logos/appwrite-icon.svg" />
+        <link rel="icon" type="image/svg+xml" href="/console/logos/appwrite-icon.svg" />
         <link rel="mask-icon" type="image/png" href="/logos/appwrite-icon.png" />
 
         <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,8 +127,8 @@
             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}} -->
 

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

@@ -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/missingPaymentMethod.svelte

@@ -1,10 +1,11 @@
 <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 { hideBillingHeaderRoutes } from '$lib/stores/billing';
-    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 && !hideBillingHeaderRoutes.includes($page.url.pathname)}
@@ -16,9 +17,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/newDevUpgradePro.svelte

@@ -5,7 +5,7 @@
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
-    import { activeHeaderAlert } from '$routes/console/store';
+    import { activeHeaderAlert } from '$routes/(console)/store';
     import GradientBanner from '../gradientBanner.svelte';
 
     let show = true;
@@ -29,7 +29,7 @@
                 secondary
                 fullWidthMobile
                 class="u-line-height-1"
-                href={`${base}/console/apply-credit?code=appw50&org=${$organization.$id}`}
+                href={`${base}/apply-credit?code=appw50&org=${$organization.$id}`}
                 on:click={() => {
                     trackEvent('click_credits_redeem', {
                         from: 'button',

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';
@@ -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/projectsAtRisk.svelte

@@ -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/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

@@ -2,8 +2,8 @@
     import { Button } from '$lib/elements/forms';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
-    import SupportWizard from '../../routes/console/supportWizard.svelte';
-    import { showSupportModal } from '../../routes/console/wizard/support/store';
+    import SupportWizard from '$routes/(console)/supportWizard.svelte';
+    import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { isCloud } from '$lib/system';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';

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/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

@@ -55,7 +55,7 @@
     function createOrg() {
         showDropdown = false;
         if (isCloud) {
-            goto(`${base}/console/create-organization`);
+            goto(`${base}/create-organization`);
         } else newOrgModal.set(true);
     }
 
@@ -78,10 +78,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}/console`}>
         <img
             src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
             width="120"
@@ -191,7 +188,7 @@
                                         : 'hover'}>
                                     {#each $organizationList.teams as org}
                                         <DropListLink
-                                            href={`${base}/console/organization-${org.$id}`}
+                                            href={`${base}/organization-${org.$id}`}
                                             on:click={() => {
                                                 showDropdown = false;
                                             }}>{org.name}</DropListLink>
@@ -205,7 +202,7 @@
                                     New organization
                                 </DropListItem>
                                 <DropListLink
-                                    href={`${base}/console/account`}
+                                    href={`${base}/account`}
                                     on:click={() => (showDropdown = false)}>
                                     Your account
                                 </DropListLink>

src/lib/layout/navigation.svelte

@@ -10,13 +10,13 @@
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
-    import Create from '$routes/console/feedbackWizard.svelte';
-    import { showSupportModal } from '$routes/console/wizard/support/store';
+    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

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { Avatar, AvatarInitials, Card, Heading } from '$lib/components';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
@@ -7,7 +8,6 @@
     import type { Coupon } from '$lib/sdk/billing';
     import { app } from '$lib/stores/app';
     import { campaigns, type CampaignData } from '$lib/stores/campaigns';
-    import { user } from '$lib/stores/user';
 
     export const imgLight = LoginLight;
     export const imgDark = LoginDark;
@@ -53,7 +53,7 @@
             class="logo u-flex u-gap-16"
             class:is-not-mobile={variation === 'default'}
             class:logo-variation={variation !== 'default'}>
-            <a href={user ? '/console' : '/'}>
+            <a href={base}>
                 {#if $app.themeInUse === 'dark'}
                     <img
                         src={AppwriteLogoDark}
@@ -195,7 +195,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={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/billing.ts

@@ -20,7 +20,7 @@ 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';
@@ -259,13 +259,13 @@ export async function checkForUsageLimit(org: Organization) {
                 {
                     name: 'View usage',
                     method: () => {
-                        goto(`${base}/console/organization-${org.$id}/usage`);
+                        goto(`${base}/organization-${org.$id}/usage`);
                     }
                 },
                 {
                     name: 'Upgrade plan',
                     method: () => {
-                        goto(`${base}/console/organization-${org.$id}/change-plan`);
+                        goto(`${base}/organization-${org.$id}/change-plan`);
                         trackEvent('click_organization_upgrade', {
                             from: 'button',
                             source: 'limit_reached_notification'
@@ -323,7 +323,7 @@ export async function paymentExpired(org: Organization) {
                 {
                     name: 'Update payment details',
                     method: () => {
-                        goto(`${base}/console/account/payments`);
+                        goto(`${base}/account/payments`);
                     }
                 }
             ]
@@ -337,7 +337,7 @@ export async function paymentExpired(org: Organization) {
                 {
                     name: 'Update payment details',
                     method: () => {
-                        goto(`${base}/console/account/payments`);
+                        goto(`${base}/account/payments`);
                     }
                 }
             ]
@@ -417,7 +417,7 @@ export async function checkForNewDevUpgradePro(org: Organization) {
 }
 export const upgradeURL = derived(
     page,
-    ($page) => `${base}/console/organization-${$page.data?.organization?.$id}/change-plan`
+    ($page) => `${base}/organization-${$page.data?.organization?.$id}/change-plan`
 );
 
 export const hideBillingHeaderRoutes = ['/console/create-organization', '/console/account'];

src/lib/stores/oauth-providers.ts

@@ -1,13 +1,13 @@
 import type { SvelteComponent } from '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';
+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 = {
     name: 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;
@@ -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);
 

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

@@ -31,7 +31,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';
@@ -40,7 +40,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;
@@ -252,7 +252,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

@@ -39,9 +39,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

@@ -69,9 +69,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 '$routes/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,11 +44,11 @@
             await invalidate(Dependencies.ACCOUNT);
             if (data?.couponData?.code) {
                 trackEvent(Submit.AccountCreate, { campaign_name: data?.couponData?.code });
-                await goto(`${base}/console/apply-credit?code=${data?.couponData?.code}`);
+                await goto(`${base}/apply-credit?code=${data?.couponData?.code}`);
                 return;
             }
             if (data?.campaign) {
-                await goto(`${base}/console/apply-credit?campaign=${data.campaign}`);
+                await goto(`${base}/apply-credit?campaign=${data.campaign}`);
                 return;
             }
             if ($page.url.searchParams) {
@@ -57,10 +57,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;
@@ -81,7 +81,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

@@ -19,7 +19,7 @@
 
     async function back() {
         await sdk.forConsole.account.deleteSession('current');
-        await goto(`${base}/`);
+        await goto(base);
     }
 
     async function submit() {
@@ -32,10 +32,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) {
             addNotification({

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

@@ -40,11 +40,11 @@
             await invalidate(Dependencies.ACCOUNT);
             trackEvent(Submit.AccountCreate, { campaign_name: data?.couponData?.code });
             if (data?.couponData?.code) {
-                await goto(`${base}/console/apply-credit?code=${data?.couponData?.code}`);
+                await goto(`${base}/apply-credit?code=${data?.couponData?.code}`);
                 return;
             }
             if (data?.campaign) {
-                await goto(`${base}/console/apply-credit?campaign=${data.campaign}`);
+                await goto(`${base}/apply-credit?campaign=${data.campaign}`);
                 return;
             }
             if ($page.url.searchParams) {
@@ -53,10 +53,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)/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}>Back to the console</Button>
     </div>
 </Container>

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

@@ -41,6 +41,7 @@
     import { activeHeaderAlert, consoleVariables } from './store';
     import { headerAlert } from '$lib/stores/headerAlert';
     import { UsageRates } from '$lib/components/billing';
+    import { base } from '$app/paths';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -59,7 +60,7 @@
         {
             label: 'Go to Projects',
             callback: () => {
-                goto('/console');
+                goto(base);
             },
             keys: ['g', 'p'],
             group: 'navigation',
@@ -147,7 +148,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 });
                     },
                     disabled: !$project?.$id,
@@ -161,7 +162,7 @@
 
             keys: isOnSettingsLayout ? ['g', 'o'] : undefined,
             callback: () => {
-                goto(`/console/project-${$project.$id}/settings`);
+                goto(`${base}/project-${$project.$id}/settings`);
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && $page.url.pathname.endsWith('settings')),
@@ -173,7 +174,7 @@
 
             keys: isOnSettingsLayout ? ['g', 'd'] : undefined,
             callback: () => {
-                goto(`/console/project-${$project.$id}/settings/domains`);
+                goto(`${base}/project-${$project.$id}/settings/domains`);
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && $page.url.pathname.includes('domains')),
@@ -184,7 +185,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:
                 !$project?.$id || (isOnSettingsLayout && $page.url.pathname.includes('webhooks')),
@@ -196,7 +197,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:
                 !$project?.$id || (isOnSettingsLayout && $page.url.pathname.includes('migrations')),
@@ -208,8 +209,7 @@
             label: 'Go to SMTP settings',
             keys: isOnSettingsLayout ? ['g', 's'] : undefined,
             callback: () => {
-                console.log('withing callback of go to smtp');
-                goto(`/console/project-${$project.$id}/settings/smtp`);
+                goto(`${base}/project-${$project.$id}/settings/smtp`);
             },
             disabled: !$project?.$id || (isOnSettingsLayout && $page.url.pathname.includes('smtp')),
             group: isOnSettingsLayout ? 'navigation' : 'settings',

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
         }
     ];

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

@@ -11,7 +11,7 @@
     import { user } from '$lib/stores/user';
     import { isCloud } from '$lib/system';
 
-    const path = `/console/account`;
+    const path = `${base}/account`;
 
     $: permanentTabs = [
         {

src/routes/(console)/account/organizations/+page.svelte

@@ -39,7 +39,7 @@
 
     function createOrg() {
         if (isCloud) {
-            goto(`${base}/console/create-organization`);
+            goto(`${base}/create-organization`);
         } else addOrganization = true;
     }
 </script>
@@ -62,7 +62,7 @@
             on:click={createOrg}>
             {#each data.organizations.teams as organization}
                 {@const avatarList = getMemberships(organization.$id)}
-                <GridItem1 href={`${base}/console/organization-${organization.$id}`}>
+                <GridItem1 href={`${base}/organization-${organization.$id}`}>
                     <svelte:fragment slot="eyebrow">
                         {organization?.total ? organization?.total : 'No'} members
                     </svelte:fragment>

src/routes/(console)/account/payments/billingAddress.svelte

@@ -83,11 +83,11 @@
                                             trigger: 'click',
                                             content: `
                                     <div class="u-flex u-flex-vertical u-gap-8">
-                                        <p class="text">This billing address is linked to the following organizations:</p>                                                         
+                                        <p class="text">This billing address is linked to the following organizations:</p>
                                         ${linkedOrgs
                                             .map(
                                                 (org) =>
-                                                    `<a href="${base}/console/organization-${org.$id}/billing" class="link">${org.name}</a>`
+                                                    `<a href="${base}/organization-${org.$id}/billing" class="link">${org.name}</a>`
                                             )
                                             .join('')}
                                                 </div>`

src/routes/(console)/account/payments/deleteAddressModal.svelte

@@ -57,8 +57,7 @@
         <ul>
             {#each linkedOrgs as org}
                 <li class="text">
-                    <a class="link" href={`${base}/console/organization-${org.$id}/billing`}
-                        >{org.name}</a>
+                    <a class="link" href={`${base}/organization-${org.$id}/billing`}>{org.name}</a>
                 </li>
             {/each}
         </ul>

src/routes/(console)/account/payments/deletePaymentModal.svelte

@@ -56,8 +56,7 @@
         <ul>
             {#each linkedOrgs as org}
                 <li class="text">
-                    <a class="link" href={`${base}/console/organization-${org.$id}/billing`}
-                        >{org.name}</a>
+                    <a class="link" href={`${base}/organization-${org.$id}/billing`}>{org.name}</a>
                 </li>
             {/each}
         </ul>

src/routes/(console)/account/payments/paymentMethods.svelte

@@ -75,11 +75,11 @@
                                                     trigger: 'click',
                                                     content: `
                                                         <div class="u-flex u-flex-vertical u-gap-8">
-                                                            <p class="text">This payment method is linked to the following organizations:</p>                                                         
+                                                            <p class="text">This payment method is linked to the following organizations:</p>
                                                             ${linkedOrgs
                                                                 .map(
                                                                     (org) =>
-                                                                        `<a href="${base}/console/organization-${org.$id}/billing" class="link">${org.name}</a>`
+                                                                        `<a href="${base}/organization-${org.$id}/billing" class="link">${org.name}</a>`
                                                                 )
                                                                 .join('')}
                                                         </div>`