feat:add SSR start command support for sites

src/lib/stores/sites.ts

@@ -1,3 +1,9 @@
+import type { Models } from '@appwrite.io/console';
+
+export type FrameworkAdapterWithStartCommand = Models.FrameworkAdapter & {
+    startCommand?: string;
+};
+
 export function getFrameworkIcon(framework: string) {
     switch (true) {
         case framework.toLocaleLowerCase().includes('sveltekit'):

src/lib/stores/uploader.ts

@@ -166,12 +166,14 @@ const createUploader = () => {
             code,
             buildCommand,
             installCommand,
+            startCommand,
             outputDirectory
         }: {
             siteId: string;
             code: File;
             buildCommand?: string;
             installCommand?: string;
+            startCommand?: string;
             outputDirectory?: string;
         }) => {
             const newDeployment: UploaderFile = {
@@ -188,23 +190,25 @@ const createUploader = () => {
                 n.files.unshift(newDeployment);
                 return n;
             });
-            const uploadedFile = await temporarySites(
-                page.params.region,
-                page.params.project
-            ).createDeployment({
+            const deploymentPayload = {
                 siteId,
                 code,
                 activate: true,
                 buildCommand,
                 installCommand,
+                startCommand,
                 outputDirectory,
                 onProgress: (progress) => {
                     newDeployment.$id = progress.$id;
                     newDeployment.progress = progress.progress;
                     newDeployment.status = progress.progress === 100 ? 'success' : 'pending';
                     updateFile(progress.$id, newDeployment);
                 }
-            });
+            };
+            const uploadedFile = await temporarySites(
+                page.params.region,
+                page.params.project
+            ).createDeployment(deploymentPayload);
             newDeployment.$id = uploadedFile.$id;
             newDeployment.progress = 100;
             newDeployment.status = 'success';

src/routes/(console)/project-[region]-[project]/settings/updateProtocols.svelte

@@ -155,7 +155,9 @@
                         disabled={shouldDisableDisableAllButton}>Disable all</Button>
                 </Layout.Stack>
             </div>
-            <Divider />
+            <div class="protocol-toolbar-divider">
+                <Divider />
+            </div>
             <div class="protocol-list-content">
                 <Layout.Stack gap="xs">
                     {#each $protocols.list as protocol, index}
@@ -207,7 +209,12 @@
 
 <style>
     .protocols-list {
+        width: 100%;
+    }
+
+    .protocol-list-content {
         max-width: 36rem;
+        padding-top: var(--space-6);
     }
 
     .protocol-toolbar {
@@ -220,10 +227,6 @@
         width: 100%;
     }
 
-    .protocol-list-content {
-        padding-top: var(--space-6);
-    }
-
     .protocol-control {
         display: flex;
         align-items: center;

src/routes/(console)/project-[region]-[project]/sites/create-site/configuration.svelte

@@ -3,33 +3,37 @@
     import { Fieldset, Layout, Accordion } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
     import { iconPath } from '$lib/stores/app';
-    import { getFrameworkIcon } from '$lib/stores/sites';
+    import { getFrameworkIcon, type FrameworkAdapterWithStartCommand } from '$lib/stores/sites';
     import { EnvironmentVariables } from '$lib/components/variables';
 
     export let frameworks: Models.Framework[];
     export let selectedFramework: Models.Framework;
     $: frameworkData = frameworks.find((framework) => framework.key === selectedFramework?.key);
-    $: adapterData =
-        frameworkData?.adapters.find((adapter) => adapter.key === 'ssr') ??
-        frameworkData?.adapters.find((adapter) => adapter.key === 'static');
+    $: adapterData = (frameworkData?.adapters.find((adapter) => adapter.key === 'ssr') ??
+        frameworkData?.adapters.find(
+            (adapter) => adapter.key === 'static'
+        )) as FrameworkAdapterWithStartCommand;
 
     export let variables: Partial<Models.Variable>[] = [];
     export let isLoading = false;
     export let installCommand = '';
     export let buildCommand = '';
+    export let startCommand = '';
     export let outputDirectory = '';
 
     let frameworkId = selectedFramework.key;
 
-    $: if (!installCommand || !buildCommand || !outputDirectory) {
+    $: if (!installCommand || !buildCommand || !startCommand || !outputDirectory) {
         installCommand ||= adapterData?.installCommand;
         buildCommand ||= adapterData?.buildCommand;
+        startCommand ||= adapterData?.startCommand;
         outputDirectory ||= adapterData?.outputDirectory;
     }
 
     $: if (frameworkData) {
         installCommand = adapterData?.installCommand;
         buildCommand = adapterData?.buildCommand;
+        startCommand = adapterData?.startCommand;
         outputDirectory = adapterData?.outputDirectory;
     }
 </script>
@@ -65,7 +69,8 @@
                             <Button
                                 secondary
                                 size="s"
-                                disabled={adapterData?.installCommand === installCommand}
+                                disabled={(adapterData?.installCommand ?? '') ===
+                                    (installCommand ?? '')}
                                 on:click={() => (installCommand = adapterData?.installCommand)}>
                                 Reset
                             </Button>
@@ -79,11 +84,30 @@
                             <Button
                                 secondary
                                 size="s"
-                                disabled={adapterData?.buildCommand === buildCommand}
+                                disabled={(adapterData?.buildCommand ?? '') ===
+                                    (buildCommand ?? '')}
                                 on:click={() => (buildCommand = adapterData?.buildCommand)}>
                                 Reset
                             </Button>
                         </Layout.Stack>
+                        {#if adapterData?.key === 'ssr'}
+                            <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                                <InputText
+                                    id="startCommand"
+                                    label="Start command"
+                                    bind:value={startCommand}
+                                    placeholder={adapterData?.startCommand ||
+                                        'Enter start command'} />
+                                <Button
+                                    secondary
+                                    size="s"
+                                    disabled={(adapterData?.startCommand ?? '') ===
+                                        (startCommand ?? '')}
+                                    on:click={() => (startCommand = adapterData?.startCommand)}>
+                                    Reset
+                                </Button>
+                            </Layout.Stack>
+                        {/if}
                         <Layout.Stack gap="s" direction="row" alignItems="flex-end">
                             <InputText
                                 id="outputDirectory"

src/routes/(console)/project-[region]-[project]/sites/create-site/deploy/+page.svelte

@@ -27,6 +27,7 @@
     import { writable } from 'svelte/store';
     import { getLatestTag } from '$lib/helpers/github';
     import Link from '$lib/elements/link.svelte';
+    import type { FrameworkAdapterWithStartCommand } from '$lib/stores/sites';
 
     let {
         data
@@ -45,6 +46,7 @@
     let domain = $state('');
     let rootDir = $state(data.repository?.rootDirectory || '');
     let buildCommand = $state('');
+    let startCommand = $state('');
     let installCommand = $state('');
     let outputDirectory = $state('');
     let domainIsValid = $state(false);
@@ -87,6 +89,7 @@
                 const adapter = fw.adapters[0];
                 installCommand = adapter.installCommand || '';
                 buildCommand = adapter.buildCommand || '';
+                startCommand = (adapter as FrameworkAdapterWithStartCommand).startCommand || '';
                 outputDirectory = adapter.outputDirectory || '';
             }
         }
@@ -103,10 +106,11 @@
         // Build configuration - use from URL params or defaults
         installCommand = page.url.searchParams.get('install') || '';
         buildCommand = page.url.searchParams.get('build') || '';
+        startCommand = page.url.searchParams.get('start') || '';
         outputDirectory = page.url.searchParams.get('output') || '';
 
         // Check if custom commands were provided via URL
-        hasCustomCommands = !!(installCommand || buildCommand || outputDirectory);
+        hasCustomCommands = !!(installCommand || buildCommand || startCommand || outputDirectory);
 
         // If no custom commands, auto-fill from framework defaults
         if (!hasCustomCommands && data.frameworks) {
@@ -115,6 +119,7 @@
                 const adapter = fw.adapters[0];
                 installCommand = adapter.installCommand || '';
                 buildCommand = adapter.buildCommand || '';
+                startCommand = (adapter as FrameworkAdapterWithStartCommand).startCommand || '';
                 outputDirectory = adapter.outputDirectory || '';
             }
         }
@@ -145,6 +150,7 @@
                 buildRuntime: selectedFramework.buildRuntime,
                 installCommand: installCommand || undefined,
                 buildCommand: buildCommand || undefined,
+                startCommand: startCommand || undefined,
                 outputDirectory: outputDirectory || undefined,
                 adapter: framework === Framework.Other ? Adapter.Static : undefined,
                 providerSilentMode: false
@@ -272,6 +278,10 @@
                         label="Build command"
                         placeholder={buildCommand || 'npm run build'}
                         bind:value={buildCommand} />
+                    <Input.Text
+                        label="Start command"
+                        placeholder={startCommand || 'npm run start'}
+                        bind:value={startCommand} />
                     <Input.Text
                         label="Output directory"
                         placeholder={outputDirectory || 'dist'}

src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte

@@ -56,6 +56,7 @@
                 timeout: data.site.timeout,
                 installCommand: data.site.installCommand,
                 buildCommand: data.site.buildCommand,
+                startCommand: data.site.startCommand,
                 outputDirectory: data.site.outputDirectory,
                 buildRuntime: data.site.buildRuntime as BuildRuntime,
                 adapter: data.site.adapter as Adapter,

src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte

@@ -22,6 +22,7 @@
     import { currentPlan } from '$lib/stores/organization';
     import Domain from '../domain.svelte';
     import { uploader } from '$lib/stores/uploader';
+    import type { FrameworkAdapterWithStartCommand } from '$lib/stores/sites';
 
     export let data;
     let showExitModal = false;
@@ -36,9 +37,10 @@
     let framework: Models.Framework =
         data.frameworks.frameworks?.find((f) => f.key === 'other') ??
         data.frameworks.frameworks?.[0];
-    let adapter = framework?.adapters[0];
+    let adapter = framework?.adapters[0] as FrameworkAdapterWithStartCommand;
     let installCommand = adapter?.installCommand;
     let buildCommand = adapter?.buildCommand;
+    let startCommand = adapter?.startCommand;
     let outputDirectory = adapter?.outputDirectory;
     let variables: Partial<Models.Variable>[] = [];
     let files: FileList;
@@ -73,6 +75,7 @@
                 buildRuntime,
                 installCommand: installCommand || undefined,
                 buildCommand: buildCommand || undefined,
+                startCommand: startCommand || undefined,
                 outputDirectory: outputDirectory || undefined
             });
 
@@ -98,6 +101,7 @@
                 code: files[0],
                 buildCommand: buildCommand || undefined,
                 installCommand: installCommand || undefined,
+                startCommand: startCommand || undefined,
                 outputDirectory: outputDirectory || undefined
             });
 
@@ -243,6 +247,7 @@
             <Configuration
                 bind:installCommand
                 bind:buildCommand
+                bind:startCommand
                 bind:outputDirectory
                 bind:selectedFramework={framework}
                 bind:variables

src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte

@@ -28,6 +28,7 @@
     import Domain from '../../domain.svelte';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
     import { normalizeDetectedVariables, mergeVariables } from '$lib/helpers/variables';
+    import type { FrameworkAdapterWithStartCommand } from '$lib/stores/sites';
 
     export let data;
     let showExitModal = false;
@@ -38,11 +39,12 @@
     let name = '';
     let id = ID.unique();
     let framework: Models.Framework = data.frameworks.frameworks.find((f) => f.key === 'other');
-    let adapter = framework?.adapters[0];
+    let adapter = framework?.adapters[0] as FrameworkAdapterWithStartCommand;
     let branch: string;
     let rootDir = './';
     let installCommand = adapter?.installCommand;
     let buildCommand = adapter?.buildCommand;
+    let startCommand = adapter?.startCommand;
     let outputDirectory = adapter?.outputDirectory;
     let variables: Partial<Models.Variable>[] = [];
     let silentMode = false;
@@ -81,9 +83,10 @@
             if (!framework) {
                 framework = data.frameworks.frameworks.find((f) => f.key === 'other');
             }
-            adapter = framework?.adapters[0];
+            adapter = framework?.adapters[0] as FrameworkAdapterWithStartCommand;
             installCommand = adapter?.installCommand;
             buildCommand = adapter?.buildCommand;
+            startCommand = adapter?.startCommand;
             outputDirectory = adapter?.outputDirectory;
             const detectedVariables = normalizeDetectedVariables(response?.variables);
             if (detectedVariables.length) {
@@ -121,6 +124,7 @@
                 buildRuntime,
                 installCommand,
                 buildCommand,
+                startCommand,
                 outputDirectory,
                 installationId: data.installation.$id,
                 providerRepositoryId: data.repository.id,
@@ -218,6 +222,7 @@
                 <Configuration
                     bind:installCommand
                     bind:buildCommand
+                    bind:startCommand
                     bind:outputDirectory
                     bind:selectedFramework={framework}
                     bind:variables

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte

@@ -68,6 +68,7 @@
             timeout: data.site.timeout,
             installCommand: data.site.installCommand,
             buildCommand: data.site.buildCommand,
+            startCommand: data.site.startCommand,
             outputDirectory: data.site.outputDirectory,
             buildRuntime: data.site.buildRuntime as BuildRuntime,
             adapter: data.site.adapter as Adapter,

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte

@@ -90,6 +90,7 @@
                     timeout: site.timeout || undefined,
                     installCommand: site.installCommand || undefined,
                     buildCommand: site.buildCommand || undefined,
+                    startCommand: site.startCommand || undefined,
                     outputDirectory: site.outputDirectory || undefined,
                     buildRuntime: (site?.buildRuntime as BuildRuntime) || undefined,
                     adapter: (site.adapter as Adapter) || undefined,

src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte

@@ -139,6 +139,7 @@
                 timeout: data.site.timeout,
                 installCommand: data.site.installCommand,
                 buildCommand: data.site.buildCommand,
+                startCommand: data.site.startCommand,
                 outputDirectory: data.site.outputDirectory,
                 buildRuntime: data.site.buildRuntime as BuildRuntime,
                 adapter: data.site.adapter as Adapter,

src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/disconnectRepo.svelte

@@ -27,6 +27,7 @@
                 timeout: site.timeout || undefined,
                 installCommand: site.installCommand || undefined,
                 buildCommand: site.buildCommand || undefined,
+                startCommand: site.startCommand || undefined,
                 outputDirectory: site.outputDirectory || undefined,
                 buildRuntime: (site?.buildRuntime as BuildRuntime) || undefined,
                 adapter: (site?.adapter as Adapter) || undefined,