fix: exposedPorts

src/lib/buildPacks/gatsby.ts

@@ -2,7 +2,7 @@ import { buildCacheImageWithNode, buildImage } from '$lib/docker';
 import { promises as fs } from 'fs';
 
 const createDockerfile = async (data, imageforBuild): Promise<void> => {
-	const { applicationId, tag, workdir, publishDirectory, baseImage, buildId } = data;
+	const { applicationId, tag, workdir, publishDirectory, baseImage, buildId, port } = data;
 	const Dockerfile: Array<string> = [];
 
 	Dockerfile.push(`FROM ${imageforBuild}`);
@@ -12,7 +12,7 @@ const createDockerfile = async (data, imageforBuild): Promise<void> => {
 	if (baseImage.includes('nginx')) {
 		Dockerfile.push(`COPY /nginx.conf /etc/nginx/nginx.conf`);
 	}
-	Dockerfile.push(`EXPOSE 80`);
+	Dockerfile.push(`EXPOSE ${port}`);
 	await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
 };
 

src/lib/buildPacks/laravel.ts

@@ -2,7 +2,7 @@ import { buildCacheImageForLaravel, buildImage } from '$lib/docker';
 import { promises as fs } from 'fs';
 
 const createDockerfile = async (data, image): Promise<void> => {
-	const { workdir, applicationId, tag, buildId } = data;
+	const { workdir, applicationId, tag, buildId, port } = data;
 	const Dockerfile: Array<string> = [];
 
 	Dockerfile.push(`FROM ${image}`);
@@ -24,7 +24,7 @@ const createDockerfile = async (data, image): Promise<void> => {
 		`COPY --chown=application:application --from=${applicationId}:${tag}-cache /app/mix-manifest.json /app/public/mix-manifest.json`
 	);
 	Dockerfile.push(`COPY --chown=application:application . ./`);
-	Dockerfile.push(`EXPOSE 80`);
+	Dockerfile.push(`EXPOSE ${port}`);
 	await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
 };
 

src/lib/buildPacks/php.ts

@@ -2,7 +2,7 @@ import { buildImage } from '$lib/docker';
 import { promises as fs } from 'fs';
 
 const createDockerfile = async (data, image, htaccessFound): Promise<void> => {
-	const { workdir, baseDirectory, buildId } = data;
+	const { workdir, baseDirectory, buildId, port } = data;
 	const Dockerfile: Array<string> = [];
 	let composerFound = false;
 	try {
@@ -22,7 +22,7 @@ const createDockerfile = async (data, image, htaccessFound): Promise<void> => {
 	}
 
 	Dockerfile.push(`COPY /entrypoint.sh /opt/docker/provision/entrypoint.d/30-entrypoint.sh`);
-	Dockerfile.push(`EXPOSE 80`);
+	Dockerfile.push(`EXPOSE ${port}`);
 	await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
 };
 

src/lib/buildPacks/react.ts

@@ -2,7 +2,7 @@ import { buildCacheImageWithNode, buildImage } from '$lib/docker';
 import { promises as fs } from 'fs';
 
 const createDockerfile = async (data, image): Promise<void> => {
-	const { applicationId, tag, workdir, publishDirectory, baseImage, buildId } = data;
+	const { applicationId, tag, workdir, publishDirectory, baseImage, buildId, port } = data;
 	const Dockerfile: Array<string> = [];
 
 	Dockerfile.push(`FROM ${image}`);
@@ -12,7 +12,7 @@ const createDockerfile = async (data, image): Promise<void> => {
 	if (baseImage.includes('nginx')) {
 		Dockerfile.push(`COPY /nginx.conf /etc/nginx/nginx.conf`);
 	}
-	Dockerfile.push(`EXPOSE 80`);
+	Dockerfile.push(`EXPOSE ${port}`);
 	await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
 };
 

src/lib/buildPacks/static.ts

@@ -12,7 +12,8 @@ const createDockerfile = async (data, image): Promise<void> => {
 		secrets,
 		pullmergeRequestId,
 		baseImage,
-		buildId
+		buildId,
+		port
 	} = data;
 	const Dockerfile: Array<string> = [];
 
@@ -42,7 +43,7 @@ const createDockerfile = async (data, image): Promise<void> => {
 	if (baseImage.includes('nginx')) {
 		Dockerfile.push(`COPY /nginx.conf /etc/nginx/nginx.conf`);
 	}
-	Dockerfile.push(`EXPOSE 80`);
+	Dockerfile.push(`EXPOSE ${port}`);
 	await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
 };
 

src/lib/buildPacks/svelte.ts

@@ -2,7 +2,7 @@ import { buildCacheImageWithNode, buildImage } from '$lib/docker';
 import { promises as fs } from 'fs';
 
 const createDockerfile = async (data, image): Promise<void> => {
-	const { applicationId, tag, workdir, publishDirectory, baseImage, buildId } = data;
+	const { applicationId, tag, workdir, publishDirectory, baseImage, buildId, port } = data;
 	const Dockerfile: Array<string> = [];
 
 	Dockerfile.push(`FROM ${image}`);
@@ -12,7 +12,7 @@ const createDockerfile = async (data, image): Promise<void> => {
 	if (baseImage.includes('nginx')) {
 		Dockerfile.push(`COPY /nginx.conf /etc/nginx/nginx.conf`);
 	}
-	Dockerfile.push(`EXPOSE 80`);
+	Dockerfile.push(`EXPOSE ${port}`);
 	await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
 };
 

src/lib/buildPacks/vuejs.ts

@@ -2,7 +2,7 @@ import { buildCacheImageWithNode, buildImage } from '$lib/docker';
 import { promises as fs } from 'fs';
 
 const createDockerfile = async (data, image): Promise<void> => {
-	const { applicationId, tag, workdir, publishDirectory, baseImage, buildId } = data;
+	const { applicationId, tag, workdir, publishDirectory, baseImage, buildId, port } = data;
 	const Dockerfile: Array<string> = [];
 
 	Dockerfile.push(`FROM ${image}`);
@@ -12,7 +12,7 @@ const createDockerfile = async (data, image): Promise<void> => {
 	if (baseImage.includes('nginx')) {
 		Dockerfile.push(`COPY /nginx.conf /etc/nginx/nginx.conf`);
 	}
-	Dockerfile.push(`EXPOSE 80`);
+	Dockerfile.push(`EXPOSE ${port}`);
 	await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
 };
 

src/routes/applications/[id]/check.json.ts

@@ -50,10 +50,13 @@ export const post: RequestHandler = async (event) => {
 			exposePort = Number(exposePort);
 
 			if (exposePort < 1024 || exposePort > 65535) {
-				throw { message: `Expose Port needs to be between 1024 and 65535` };
+				throw { message: `Expose Port needs to be between 1024 and 65535.` };
 			}
 
 			const publicPort = await getPort({ port: exposePort });
+			if (publicPort !== exposePort) {
+				throw { message: `Port ${exposePort} is already in use.` };
+			}
 		}
 
 		return {

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

@@ -62,7 +62,6 @@
 	let previews = application.settings.previews;
 	let dualCerts = application.settings.dualCerts;
 	let autodeploy = application.settings.autodeploy;
-	let showExposePort = application.exposePort !== null;
 
 	let wsgis = [
 		{
@@ -455,23 +454,9 @@
 					/>
 				</div>
 			{/if}
-			{#if !staticDeployments.includes(application.buildPack)}
+			{#if application.buildPack !== 'docker'}
 				<div class="grid grid-cols-2 items-center">
-					<Setting
-						isCenter={false}
-						bind:setting={showExposePort}
-						on:click={() => {
-							showExposePort = !showExposePort;
-							application.exposePort = undefined;
-						}}
-						title={$t('application.expose_a_port')}
-						description="Expose a port to the host system"
-					/>
-				</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>
+					<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
 					<input
 						readonly={!$session.isAdmin}
 						name="exposePort"
@@ -479,11 +464,13 @@
 						bind:value={application.exposePort}
 						placeholder="12345"
 					/>
+					<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}
-			{/if}
 			{#if !notNodeDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid grid-cols-2 items-center pt-4">
 					<label for="installCommand" class="text-base font-bold text-stone-100"
 						>{$t('application.install_command')}</label
 					>
@@ -521,7 +508,7 @@
 				</div>
 			{/if}
 			{#if application.buildPack === 'docker'}
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid grid-cols-2 items-center pt-4">
 					<label for="dockerFileLocation" class="text-base font-bold text-stone-100"
 						>Dockerfile Location</label
 					>