fix: Expose ports for services

src/routes/applications/[id]/index.svelte

@@ -527,7 +527,8 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
 					<input
-						readonly={!$session.isAdmin}
+						readonly={!$session.isAdmin && !isRunning}
+						disabled={!$session.isAdmin || isRunning}
 						name="exposePort"
 						id="exposePort"
 						bind:value={application.exposePort}

src/routes/services/[id]/_Services/_Services.svelte

@@ -27,7 +27,6 @@
 	let loading = false;
 	let loadingVerification = false;
 	let dualCerts = service.dualCerts;
-	let showExposePort = service.exposePort !== null;
 
 	async function handleSubmit() {
 		loading = true;
@@ -161,32 +160,21 @@
 					on:click={() => !isRunning && changeSettings('dualCerts')}
 				/>
 			</div>
-			<div class="grid grid-cols-2 items-center">
+			<div class="grid grid-cols-2 items-center  px-10">
-				<Setting
+				<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
-					isCenter={false}
+				<input
-					bind:setting={showExposePort}
+					readonly={!$session.isAdmin && !isRunning}
-					on:click={() => {
+					disabled={!$session.isAdmin || isRunning}
-						showExposePort = !showExposePort;
+					name="exposePort"
-						service.exposePort = undefined;
+					id="exposePort"
-					}}
+					bind:value={service.exposePort}
-					title={$t('application.expose_a_port')}
+					placeholder="12345"
-					description="Expose a port to the host system"
+				/>
+				<Explainer
+					text={'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.'}
 				/>
 			</div>
 
-			{#if showExposePort}
-				<div class="grid grid-cols-2 items-center">
-					<label for="exposePort" class="text-base font-bold text-stone-100">Expose Port</label>
-					<input
-						readonly={!$session.isAdmin}
-						name="exposePort"
-						id="exposePort"
-						bind:value={service.exposePort}
-						placeholder="12345"
-					/>
-				</div>
-			{/if}
-
 			{#if service.type === 'plausibleanalytics'}
 				<PlausibleAnalytics bind:service {isRunning} {readOnly} />
 			{:else if service.type === 'minio'}

src/routes/services/[id]/fider/start.json.ts

@@ -13,6 +13,7 @@ import { ErrorHandler, getServiceImage } from '$lib/database';
 import { makeLabelForServices } from '$lib/buildPacks/common';
 import type { ComposeFile } from '$lib/types/composeFile';
 import type { Service, DestinationDocker, Prisma } from '@prisma/client';
+import { getServiceMainPort } from '$lib/components/common';
 
 export const post: RequestHandler = async (event) => {
 	const { teamId, status, body } = await getUserDetails(event);
@@ -30,6 +31,7 @@ export const post: RequestHandler = async (event) => {
 			destinationDockerId,
 			destinationDocker,
 			serviceSecret,
+			exposePort,
 			fider: {
 				postgresqlUser,
 				postgresqlPassword,
@@ -48,6 +50,7 @@ export const post: RequestHandler = async (event) => {
 		} = service;
 		const network = destinationDockerId && destinationDocker.network;
 		const host = getEngine(destinationDocker.engine);
+		const port = getServiceMainPort('fider');
 
 		const { workdir } = await createDirectories({ repository: type, buildId: id });
 		const image = getServiceImage(type);
@@ -97,6 +100,7 @@ export const post: RequestHandler = async (event) => {
 					volumes: [],
 					restart: 'always',
 					labels: makeLabelForServices('fider'),
+					...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
 					deploy: {
 						restart_policy: {
 							condition: 'on-failure',

src/routes/services/[id]/hasura/start.json.ts

@@ -7,6 +7,7 @@ import { ErrorHandler, getServiceImage } from '$lib/database';
 import { makeLabelForServices } from '$lib/buildPacks/common';
 import type { ComposeFile } from '$lib/types/composeFile';
 import type { Service, DestinationDocker, Prisma } from '@prisma/client';
+import { getServiceMainPort } from '$lib/components/common';
 
 export const post: RequestHandler = async (event) => {
 	const { teamId, status, body } = await getUserDetails(event);
@@ -23,10 +24,12 @@ export const post: RequestHandler = async (event) => {
 			destinationDockerId,
 			destinationDocker,
 			serviceSecret,
+			exposePort,
 			hasura: { postgresqlUser, postgresqlPassword, postgresqlDatabase }
 		} = service;
 		const network = destinationDockerId && destinationDocker.network;
 		const host = getEngine(destinationDocker.engine);
+		const port = getServiceMainPort('hasura');
 
 		const { workdir } = await createDirectories({ repository: type, buildId: id });
 		const image = getServiceImage(type);
@@ -65,6 +68,7 @@ export const post: RequestHandler = async (event) => {
 					volumes: [],
 					restart: 'always',
 					labels: makeLabelForServices('hasura'),
+					...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
 					deploy: {
 						restart_policy: {
 							condition: 'on-failure',

src/routes/services/[id]/minio/start.json.ts

@@ -65,7 +65,7 @@ export const post: RequestHandler = async (event) => {
 					networks: [network],
 					volumes: [config.volume],
 					restart: 'always',
-					...(exposePort && { ports: [`${port}:${port}`] }),
+					...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
 					labels: makeLabelForServices('minio'),
 					deploy: {
 						restart_policy: {

src/routes/services/[id]/n8n/start.json.ts

@@ -48,6 +48,7 @@ export const post: RequestHandler = async (event) => {
 					environment: config.environmentVariables,
 					restart: 'always',
 					labels: makeLabelForServices('n8n'),
+					...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
 					deploy: {
 						restart_policy: {
 							condition: 'on-failure',

src/routes/services/[id]/plausibleanalytics/start.json.ts

@@ -135,7 +135,7 @@ COPY ./init-db.sh /docker-entrypoint-initdb.d/init-db.sh`;
 					networks: [network],
 					environment: config.plausibleAnalytics.environmentVariables,
 					restart: 'always',
-					...(exposePort && { ports: [`${port}:${exposePort}`] }),
+					...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
 					depends_on: [`${id}-postgresql`, `${id}-clickhouse`],
 					labels: makeLabelForServices('plausibleAnalytics'),
 					deploy: {
@@ -195,6 +195,7 @@ COPY ./init-db.sh /docker-entrypoint-initdb.d/init-db.sh`;
 			}
 		};
 		const composeFileDestination = `${workdir}/docker-compose.yaml`;
+		console.log(JSON.stringify(composeFile, null, 2));
 		await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
 		await asyncExecShell(`DOCKER_HOST=${host} docker compose -f ${composeFileDestination} pull`);
 		await asyncExecShell(

src/routes/services/[id]/umami/start.json.ts

@@ -159,7 +159,7 @@ export const post: RequestHandler = async (event) => {
 					networks: [network],
 					volumes: [],
 					restart: 'always',
-					...(exposePort ? { ports: [`${port}:${port}`] } : {}),
+					...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
 					labels: makeLabelForServices('umami'),
 					deploy: {
 						restart_policy: {

src/routes/services/[id]/vscodeserver/start.json.ts

@@ -78,7 +78,7 @@ export const post: RequestHandler = async (event) => {
 					networks: [network],
 					volumes: [config.volume, ...volumes],
 					restart: 'always',
-					...(exposePort ? { ports: [`${port}:${exposePort}`] } : {}),
+					...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
 					labels: makeLabelForServices('vscodeServer'),
 					deploy: {
 						restart_policy: {

src/routes/services/[id]/wordpress/start.json.ts

@@ -79,7 +79,7 @@ export const post: RequestHandler = async (event) => {
 					volumes: [config.wordpress.volume],
 					networks: [network],
 					restart: 'always',
-					...(exposePort ? { ports: [`${port}:${port}`] } : {}),
+					...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
 					depends_on: [`${id}-mysql`],
 					labels: makeLabelForServices('wordpress'),
 					deploy: {