Merge pull request #3157 from appwrite/fix/sites-hide-start-command

Keep the start command field, drop the adapter reads behind it

Author: HarshMN2345

bun.lock

@@ -51,7 +51,7 @@
         "flatted": "^3.4.2",
         "ignore": "^6.0.2",
         "json5": "^2.2.3",
-        "nanoid": "^5.1.16",
+        "nanoid": "^3.3.18",
         "nanotar": "^0.3.0",
         "pretty-bytes": "^6.1.1",
         "remarkable": "^2.0.1",
@@ -113,6 +113,7 @@
         "picomatch": "^4.0.4",
         "cookie": "^0.7.0",
         "ws": "^8.21.0",
-        "postcss": "^8.5.18"
+        "postcss": "^8.5.18",
+        "nanoid": "^3.3.18"
     }
 }

package.json

@@ -17,6 +17,7 @@
     export let isLoading = false;
     export let installCommand = '';
     export let buildCommand = '';
+    export let startCommand = '';
     export let outputDirectory = '';
 
     let frameworkId = selectedFramework.key;
@@ -27,6 +28,7 @@
         installCommand = adapterData?.installCommand ?? '';
         buildCommand = adapterData?.buildCommand ?? '';
         outputDirectory = adapterData?.outputDirectory ?? '';
+        startCommand = '';
         lastAdapterDefaultsKey = adapterDefaultsKey;
     }
 </script>
@@ -83,6 +85,15 @@
                                 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="Enter start command" />
+                            </Layout.Stack>
+                        {/if}
                         <Layout.Stack gap="s" direction="row" alignItems="flex-end">
                             <InputText
                                 id="outputDirectory"

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

@@ -45,6 +45,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);
@@ -80,6 +81,11 @@
         }))
     );
 
+    const primaryAdapter = $derived.by(
+        () => data.frameworks.frameworks.find((f) => f.key === framework)?.adapters?.[0]
+    );
+    const shouldShowStartCommand = $derived(primaryAdapter?.key === Adapter.Ssr);
+
     $effect(() => {
         if (framework && data.frameworks && !hasCustomCommands) {
             const fw = data.frameworks.frameworks.find((f) => f.key === framework);
@@ -103,10 +109,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) {
@@ -145,6 +152,7 @@
                 buildRuntime: selectedFramework.buildRuntime,
                 installCommand: installCommand || undefined,
                 buildCommand: buildCommand || undefined,
+                startCommand: shouldShowStartCommand ? startCommand || undefined : undefined,
                 outputDirectory: outputDirectory || undefined,
                 adapter: framework === Framework.Other ? Adapter.Static : undefined,
                 providerSilentMode: false
@@ -253,7 +261,8 @@
                         label="Framework"
                         placeholder="Select framework"
                         bind:value={framework}
-                        options={frameworkSelectOptions} />
+                        options={frameworkSelectOptions}
+                        on:change={() => (startCommand = '')} />
                 </Layout.Stack>
             </Fieldset>
 
@@ -273,6 +282,12 @@
                         label="Build command"
                         placeholder={buildCommand || 'npm run build'}
                         bind:value={buildCommand} />
+                    {#if shouldShowStartCommand}
+                        <Input.Text
+                            label="Start command"
+                            placeholder={startCommand || 'npm run start'}
+                            bind:value={startCommand} />
+                    {/if}
                     <Input.Text
                         label="Output directory"
                         placeholder={outputDirectory || 'dist'}

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

@@ -43,6 +43,7 @@
     let adapter = framework?.adapters[0];
     let installCommand = adapter?.installCommand;
     let buildCommand = adapter?.buildCommand;
+    let startCommand = '';
     let outputDirectory = adapter?.outputDirectory;
     let variables: Partial<Models.Variable>[] = [];
     let files: FileList;
@@ -77,6 +78,7 @@
                 buildRuntime,
                 installCommand: installCommand || undefined,
                 buildCommand: buildCommand || undefined,
+                startCommand: startCommand || undefined,
                 outputDirectory: outputDirectory || undefined
             });
 
@@ -251,6 +253,7 @@
             <Configuration
                 bind:installCommand
                 bind:buildCommand
+                bind:startCommand
                 bind:outputDirectory
                 bind:selectedFramework={framework}
                 bind:variables

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

@@ -43,6 +43,7 @@
     let rootDir = './';
     let installCommand = adapter?.installCommand;
     let buildCommand = adapter?.buildCommand;
+    let startCommand = '';
     let outputDirectory = adapter?.outputDirectory;
     let variables: Partial<Models.Variable>[] = [];
     let silentMode = false;
@@ -121,6 +122,7 @@
                 buildRuntime,
                 installCommand: installCommand || undefined,
                 buildCommand: buildCommand || undefined,
+                startCommand: startCommand || undefined,
                 outputDirectory: outputDirectory || undefined,
                 installationId: data.installation.$id,
                 providerRepositoryId: data.repository.id,
@@ -219,6 +221,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

@@ -7,15 +7,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console';
-    import {
-        Accordion,
-        Card,
-        Fieldset,
-        Icon,
-        InlineCode,
-        Layout,
-        Tooltip
-    } from '@appwrite.io/pink-svelte';
+    import { Card, Fieldset, Icon, InlineCode, Layout, Tooltip } from '@appwrite.io/pink-svelte';
     import { iconPath } from '$lib/stores/app';
     import { Link } from '$lib/elements';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
@@ -89,10 +81,10 @@
                 selectedFramework.adapters[0];
             installCommand = data.installCommand;
             buildCommand = data.buildCommand;
+            startCommand = '';
             outputDirectory = data.outputDirectory;
             adapter = data.key as Adapter;
             fallback = data.fallbackFile;
-            startCommand = '';
         } else if (hasFrameworkSelectionChanged) {
             const data =
                 selectedFramework.adapters.find((a) => a.key === adapter) ??
@@ -105,13 +97,13 @@
             buildCommand = isOriginalAdapter
                 ? (site?.buildCommand ?? frameworkAdapterData.buildCommand)
                 : data.buildCommand;
+            startCommand = isOriginalAdapter ? (site?.startCommand ?? '') : '';
             outputDirectory = isOriginalAdapter
                 ? (site?.outputDirectory ?? frameworkAdapterData.outputDirectory)
                 : data.outputDirectory;
             fallback = isOriginalAdapter
                 ? (site?.fallbackFile ?? data.fallbackFile)
                 : data.fallbackFile;
-            startCommand = isOriginalAdapter ? (site?.startCommand ?? '') : '';
         }
 
         lastFrameworkAdapterKey = `${selectedFramework.key}:${adapter ?? ''}`;
@@ -335,6 +327,15 @@
                                 Reset
                             </Button>
                         </Layout.Stack>
+                        {#if adapter === Adapter.Ssr}
+                            <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                                <InputText
+                                    id="startCommand"
+                                    label="Start command"
+                                    bind:value={startCommand}
+                                    placeholder="Enter start command" />
+                            </Layout.Stack>
+                        {/if}
                         <Layout.Stack gap="s" direction="row" alignItems="flex-end">
                             <InputText
                                 id="outputDirectory"
@@ -366,19 +367,6 @@
                                 </Tooltip>
                             </InputText>
                         {/if}
-                        {#if adapter === Adapter.Ssr}
-                            <Accordion title="Advanced">
-                                <Layout.Stack gap="l">
-                                    Command used to start your SSR server after a successful deploy.
-                                    Leave it empty to use the framework default.
-                                    <InputText
-                                        id="startCommand"
-                                        label="Start command"
-                                        bind:value={startCommand}
-                                        placeholder="Enter start command" />
-                                </Layout.Stack>
-                            </Accordion>
-                        {/if}
                     </Layout.Stack>
                 </Fieldset>
             </Layout.Stack>