handleSubmit()}>

General

{#if $appSession.isAdmin} {/if}

Name

{#if !isSimpleDockerfile}

Git Source {#if isDisabled || application.settings?.isPublicRepository} {:else} {/if}

Git commit

Commits

Repository {#if isDisabled || application.settings?.isPublicRepository} {:else} {/if}

{/if}

Docker Registry {#if isDisabled} {:else} {/if}

{#if application.dockerRegistry?.id && application.gitSourceId}

Push Image to Registry

{/if} {#if !isSimpleDockerfile}

BuildPack {#if isDisabled} {:else} {/if}

{/if}

Destination

{#if application.buildPack !== 'compose'}

changeSettings('isBot')} title="Is your application a bot?" description="You can deploy applications without domains or make them to listen on the Exposed Port.

Useful to host Twitch bots, regular jobs, or anything that does not require an incoming HTTP connection." disabled={isDisabled} />

{/if} {#if !isBot && application.buildPack !== 'compose'}

URL (fqdn) https, the application will be accessible only over https.
SSL certificate will be generated automatically.

If you specify www, the application will be redirected (302) from non-www and vice versa.

To modify the domain, you must first stop the application.

You must set your DNS to point to the server IP in advance."} />

{#if forceSave}

{#if isNonWWWDomainOK} {:else} {/if} {#if dualCerts} {#if isWWWDomainOK} {:else} {/if} {/if}

{/if}

!isDisabled && changeSettings('dualCerts')} />

{#if isHttps && application.buildPack !== 'compose'}

changeSettings('isCustomSSL')} />

{/if}

changeSettings('isHttp2')} />

{/if}

{#if isSimpleDockerfile}

Configuration

Dockerfile

</div>
					</div>
					<div class="grid grid-cols-2 items-center">
						<label for="port"
							>Port
							<Explainer
								explanation={'The port your application listens inside the docker container.'}
							/></label
						>
						<input
							class="w-full"
							disabled={isDisabled}
							readonly={!$appSession.isAdmin}
							name="port"
							id="port"
							bind:value={application.port}
							placeholder="Default: 3000"
						/>
					</div>
				</div>
			{:else if application.buildPack !== 'compose'}
				<div class="title font-bold pb-3 pt-10 border-b border-coolgray-500 mb-6">
					Configuration
				</div>
				<div class="grid grid-flow-row gap-2 px-4 pr-5">
					{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
						<div class="grid grid-cols-2 items-center">
							<label for="baseBuildImage">
								Base Build Image
								<Explainer
									explanation={application.buildPack === 'laravel'
										? 'For building frontend assets with webpack.'
										: 'Image that will be used during the build process.'}
								/>
							</label>
							<div class="custom-select-wrapper">
								<Select
									{isDisabled}
									containerClasses={isDisabled && containerClass()}
									id="baseBuildImages"
									showIndicator={!isDisabled}
									items={application.baseBuildImages}
									on:select={selectBaseBuildImage}
									value={application.baseBuildImage}
									isClearable={false}
								/>
							</div>
						</div>
					{/if}
					{#if application.buildPack !== 'docker'}
						<div class="grid grid-cols-2 items-center">
							<label for="baseImage">
								Base Image
								<Explainer explanation={'Image that will be used for the deployment.'} /></label
							>
							<div class="custom-select-wrapper">
								<Select
									{isDisabled}
									containerClasses={isDisabled && containerClass()}
									id="baseImages"
									showIndicator={!isDisabled}
									items={application.baseImages}
									on:select={selectBaseImage}
									value={application.baseImage}
									isClearable={false}
								/>
							</div>
						</div>
					{/if}
					{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
						<div class="grid grid-cols-2 items-center pb-8">
							<label for="deploymentType"
								>Deployment Type
								<Explainer
									explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."}
								/></label
							>
							<div class="custom-select-wrapper">
								<Select
									{isDisabled}
									containerClasses={isDisabled && containerClass()}
									id="deploymentTypes"
									showIndicator={!isDisabled}
									items={['static', 'node']}
									on:select={selectDeploymentType}
									value={application.deploymentType}
									isClearable={false}
								/>
							</div>
						</div>
					{/if}
					{#if $features.beta}
						{#if !application.settings?.isBot && !application.settings?.isPublicRepository}
							<div class="grid grid-cols-2 items-center">
								<Setting
									id="isDBBranching"
									isCenter={false}
									bind:setting={isDBBranching}
									on:click={() => changeSettings('isDBBranching')}
									title="Enable DB Branching"
									description="Enable DB Branching"
								/>
							</div>
							{#if isDBBranching}
								<button
									on:click|stopPropagation|preventDefault={() =>
										goto(`/applications/${id}/configuration/database`)}
									class="btn btn-sm">Configure Connected Database</button
								>
								{#if application.connectedDatabase}
									<div class="grid grid-cols-2 items-center">
										<label for="baseImage"
											>Base Database
											<Explainer
												explanation={'The name of the database that will be used as base when branching.'}
											/></label
										>
										<input
											name="baseDatabaseBranch"
											required
											id="baseDatabaseBranch"
											bind:value={baseDatabaseBranch}
										/>
									</div>
									<div class="text-center bg-green-600 rounded">
										Connected to {application.connectedDatabase?.databaseId}
									</div>
								{/if}
							{/if}
						{/if}
					{/if}

{#if application.buildPack === 'python'}
						<div class="grid grid-cols-2 items-center">
							<label for="pythonModule">WSGI / ASGI</label>
							<div class="custom-select-wrapper">
								<Select
									id="wsgi"
									items={wsgis}
									on:select={selectWSGI}
									value={application.pythonWSGI}
								/>
							</div>
						</div>

<div class="grid grid-cols-2 items-center">
							<label for="pythonModule">Module</label>
							<input
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="pythonModule"
								id="pythonModule"
								required
								class="w-full"
								bind:value={application.pythonModule}
								placeholder={application.pythonWSGI?.toLowerCase() !== 'none' ? 'main' : 'main.py'}
							/>
						</div>
						{#if application.pythonWSGI?.toLowerCase() === 'gunicorn'}
							<div class="grid grid-cols-2 items-center">
								<label for="pythonVariable">Variable</label>
								<input
									disabled={isDisabled}
									readonly={!$appSession.isAdmin}
									name="pythonVariable"
									id="pythonVariable"
									required
									class="w-full"
									bind:value={application.pythonVariable}
									placeholder="default: app"
								/>
							</div>
						{/if}
						{#if application.pythonWSGI?.toLowerCase() === 'uvicorn'}
							<div class="grid grid-cols-2 items-center">
								<label for="pythonVariable">Variable</label>
								<input
									disabled={isDisabled}
									readonly={!$appSession.isAdmin}
									name="pythonVariable"
									id="pythonVariable"
									required
									class="w-full"
									bind:value={application.pythonVariable}
									placeholder="default: app"
								/>
							</div>
						{/if}
					{/if}
					{#if !staticDeployments.includes(application.buildPack)}
						<div class="grid grid-cols-2 items-center pt-4">
							<label for="port">
								Port
								<Explainer
									explanation={'The port your application listens inside the docker container.'}
								/></label
							>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="port"
								id="port"
								bind:value={application.port}
								placeholder="Default: 'python' ? '8000' : '3000'"
							/>
						</div>
					{/if}
					<div class="grid grid-cols-2 items-center pb-4">
						<label for="exposePort"
							>Exposed Port <Explainer
								explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
							/></label
						>
						<input
							class="w-full"
							disabled={isDisabled}
							readonly={!$appSession.isAdmin}
							name="exposePort"
							id="exposePort"
							bind:value={application.exposePort}
							placeholder="12345"
						/>
					</div>
					{#if !notNodeDeployments.includes(application.buildPack)}
						<div class="grid grid-cols-2 items-center">
							<label for="installCommand">Install Command</label>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="installCommand"
								id="installCommand"
								bind:value={application.installCommand}
								placeholder="Default yarn install"
							/>
						</div>
						<div class="grid grid-cols-2 items-center">
							<label for="buildCommand">Build Command</label>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="buildCommand"
								id="buildCommand"
								bind:value={application.buildCommand}
								placeholder="Default yarn build"
							/>
						</div>
						<div class="grid grid-cols-2 items-center pb-8">
							<label for="startCommand">Start Command</label>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="startCommand"
								id="startCommand"
								bind:value={application.startCommand}
								placeholder="Default yarn start"
							/>
						</div>
					{/if}
					{#if application.buildPack === 'deno'}
						<div class="grid grid-cols-2 items-center">
							<label for="denoMainFile">Main File</label>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="denoMainFile"
								id="denoMainFile"
								bind:value={application.denoMainFile}
								placeholder="default: main.ts"
							/>
						</div>
						<div class="grid grid-cols-2 items-center">
							<label for="denoOptions"
								>Arguments <Explainer
									explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."}
								/></label
							>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="denoOptions"
								id="denoOptions"
								bind:value={application.denoOptions}
								placeholder="eg: --allow-net --allow-hrtime --config path/to/file.json"
							/>
						</div>
					{/if}
					{#if application.buildPack !== 'laravel'}
						<div class="grid grid-cols-2 items-center">
							<div class="flex-col">
								<label for="baseDirectory"
									>Base Directory
									<Explainer
										explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."}
									/></label
								>
							</div>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="baseDirectory"
								id="baseDirectory"
								bind:value={application.baseDirectory}
								placeholder="Default /"
							/>
						</div>
					{/if}
					{#if application.buildPack === 'docker'}
						<div class="grid grid-cols-2 items-center pb-4">
							<label for="dockerFileLocation" class=""
								>Dockerfile Location <Explainer
									explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"}
								/></label
							>
							<div class="form-control w-full">
								<input
									class="w-full input"
									disabled={isDisabled}
									readonly={!$appSession.isAdmin}
									name="dockerFileLocation"
									id="dockerFileLocation"
									bind:value={application.dockerFileLocation}
									placeholder="default: /Dockerfile"
								/>
								{#if application.baseDirectory}
									
									<label class="label">
										<span class="label-text-alt text-xs"
											>Path: {application.baseDirectory.replace(
												/^\/$/,
												''
											)}{application.dockerFileLocation}</span
										>
									</label>
								{/if}
							</div>
						</div>
					{/if}
					{#if !notNodeDeployments.includes(application.buildPack)}
						<div class="grid grid-cols-2 items-center">
							<div class="flex-col">
								<label for="publishDirectory"
									>Publish Directory
									<Explainer
										explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."}
									/></label
								>
							</div>

<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="publishDirectory"
								id="publishDirectory"
								required={application.deploymentType === 'static'}
								bind:value={application.publishDirectory}
								placeholder=" Default /"
							/>
						</div>
					{/if}
				</div>
			{:else}
				<div class="title font-bold pb-3 pt-10 border-b border-coolgray-500 mb-6">
					Stack <Beta />
					{#if $appSession.isAdmin}
						<button
							class="btn btn-sm btn-primary"
							class:loading={loading.reloadCompose}
							disabled={loading.reloadCompose}
							on:click|preventDefault={reloadCompose}>Reload Docker Compose File</button
						>
					{/if}
				</div>
				<div class="grid grid-flow-row gap-2">
					<div class="grid grid-cols-2 items-center px-8 pb-4">
						<label for="dockerComposeFileLocation"
							>Docker Compose File Location
							<Explainer
								explanation="You can specify a custom docker compose file location. <br> Should be absolute path, like <span class='text-settings font-bold'>/data/docker-compose.yml</span> or <span class='text-settings font-bold'>/docker-compose.yml.</span>"
							/>
						</label>
						<div>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="dockerComposeFileLocation"
								id="dockerComposeFileLocation"
								bind:value={application.dockerComposeFileLocation}
								placeholder="eg: /docker-compose.yml"
							/>
						</div>
					</div>
					{#each dockerComposeServices as service}
						<div
							class="grid items-center bg-coolgray-100 rounded border border-coolgray-300 p-2 px-4"
						>
							<div class="text-xl font-bold uppercase">
								{service.name}
								<span
									class="badge rounded text-white"
									class:text-red-500={statues[service.name] === 'Exited' ||
										statues[service.name] === 'Stopped'}
									class:text-yellow-400={statues[service.name] === 'Restarting'}
									class:text-green-500={statues[service.name] === 'Running'}
									>{statues[service.name] || 'Loading...'}</span
								>
							</div>
							<div class="text-xs">{application.id}-{service.name}</div>
						</div>

<div class="grid grid-cols-2 items-center px-8">
							<label for="fqdn"
								>URL(fqdn)
								<Explainer
									explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
								/>
							</label>
							<div>
								<input
									class="w-full"
									disabled={isDisabled}
									readonly={!$appSession.isAdmin}
									name="fqdn"
									id="fqdn"
									bind:value={dockerComposeConfiguration[service.name].fqdn}
									pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
									placeholder="eg: https://coollabs.io"
								/>
							</div>
						</div>
						<div class="grid grid-cols-2 items-center px-8">
							<label for="destinationdns"
								>Internal DNS on the deployed Destination
								<Explainer
									explanation={'You can use these DNS names to access the application from other resources in your Destination.'}
								/>
							</label>
							<input
								for="destinationdns"
								class="w-full"
								disabled
								readonly
								value={`${application.id}-${service.name}`}
							/>
						</div>
						<div class="grid grid-cols-2 items-center px-8">
							<label for="stackdns"
								>Internal DNS in the current stack
								<Explainer
									explanation={'You can use these DNS names to access the application from this stack.'}
								/>
							</label>
							<input for="stackdns" class="w-full" disabled readonly value={service.name} />
						</div>
						<div class="grid grid-cols-2 items-center px-8 pb-4">
							<label for="port"
								>Port
								<Explainer
									explanation={'The port your application listens inside the docker container.'}
								/></label
							>
							<input
								class="w-full"
								disabled={isDisabled}
								readonly={!$appSession.isAdmin}
								name="port"
								id="port"
								required={!!dockerComposeConfiguration[service.name]?.fqdn}
								bind:value={dockerComposeConfiguration[service.name].port}
							/>
						</div>
					{/each}
				</div>
			{/if}
		</div>
	</form>
</div>