feat: Ability to change deployment type for nuxtjs

apps/api/src/lib/buildPacks/common.ts

@@ -17,7 +17,7 @@ const nodeBased = [
 	'nextjs'
 ];
 
-export function setDefaultBaseImage(buildPack: string | null, deploymentType: string | null) {
+export function setDefaultBaseImage(buildPack: string | null, deploymentType: string | null = null) {
 	const nodeVersions = [
 		{
 			value: 'node:lts',

apps/api/src/lib/buildPacks/nextjs.ts

@@ -69,7 +69,6 @@ export default async function (data) {
 			await createDockerfile(data, baseImage);
 			await buildImage(data);
 		}
-
 	} catch (error) {
 		throw error;
 	}

apps/api/src/lib/buildPacks/nuxtjs.ts

@@ -1,9 +1,13 @@
 import { promises as fs } from 'fs';
-import { buildImage, checkPnpm } from './common';
+import { buildCacheImageWithNode, buildImage, checkPnpm } from './common';
 
 const createDockerfile = async (data, image): Promise<void> => {
 	const {
+		applicationId,
+		buildId,
+		tag,
 		workdir,
+		publishDirectory,
 		port,
 		installCommand,
 		buildCommand,
@@ -11,7 +15,8 @@ const createDockerfile = async (data, image): Promise<void> => {
 		baseDirectory,
 		secrets,
 		pullmergeRequestId,
-		buildId
+		deploymentType,
+		baseImage
 	} = data;
 	const Dockerfile: Array<string> = [];
 	const isPnpm = checkPnpm(installCommand, buildCommand, startCommand);
@@ -36,21 +41,34 @@ const createDockerfile = async (data, image): Promise<void> => {
 	if (isPnpm) {
 		Dockerfile.push('RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@7');
 	}
-	Dockerfile.push(`COPY .${baseDirectory || ''} ./`);
-	Dockerfile.push(`RUN ${installCommand}`);
-	if (buildCommand) {
+	if (deploymentType === 'node') {
+		Dockerfile.push(`COPY .${baseDirectory || ''} ./`);
+		Dockerfile.push(`RUN ${installCommand}`);
 		Dockerfile.push(`RUN ${buildCommand}`);
+		Dockerfile.push(`EXPOSE ${port}`);
+		Dockerfile.push(`CMD ${startCommand}`);
+	} else if (deploymentType === 'static') {
+		if (baseImage.includes('nginx')) {
+			Dockerfile.push(`COPY /nginx.conf /etc/nginx/nginx.conf`);
+		}
+		Dockerfile.push(`COPY --from=${applicationId}:${tag}-cache /app/${publishDirectory} ./`);
+		Dockerfile.push(`EXPOSE 80`);
 	}
-	Dockerfile.push(`EXPOSE ${port}`);
-	Dockerfile.push(`CMD ${startCommand}`);
+
 	await fs.writeFile(`${workdir}/Dockerfile`, Dockerfile.join('\n'));
 };
 
 export default async function (data) {
 	try {
-		const { baseImage, baseBuildImage } = data;
-		await createDockerfile(data, baseImage);
-		await buildImage(data);
+		const { baseImage, baseBuildImage, deploymentType, buildCommand } = data;
+		if (deploymentType === 'node') {
+			await createDockerfile(data, baseImage);
+			await buildImage(data);
+		} else if (deploymentType === 'static') {
+			if (buildCommand) await buildCacheImageWithNode(data, baseBuildImage);
+			await createDockerfile(data, baseImage);
+			await buildImage(data);
+		}
 	} catch (error) {
 		throw error;
 	}

apps/api/src/routes/api/v1/applications/handlers.ts

@@ -48,6 +48,15 @@ export async function getImages(request: FastifyRequest) {
                 port = '3000'
             }
         }
+        if (buildPack === 'nuxtjs') {
+            if (deploymentType === 'static') {
+                publishDirectory = 'dist'
+                port = '80'
+            } else {
+                publishDirectory = ''
+                port = '3000'
+            }
+        }
 
 
         return { baseImage, baseBuildImage, baseBuildImages, baseImages, publishDirectory, port }

apps/ui/src/lib/templates.ts

@@ -95,7 +95,8 @@ export function findBuildPack(pack: string, packageManager = 'npm') {
 			...metaData,
 			...defaultBuildAndDeploy(packageManager),
 			publishDirectory: null,
-			port: 3000
+			port: 3000,
+			deploymentType: 'node'
 		};
 	}
 	if (pack === 'preact') {

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

@@ -466,7 +466,7 @@
 					<Explainer text={$t('application.base_image_explainer')} />
 				</div>
 			{/if}
-			{#if application.buildPack !== 'docker' && application.buildPack === 'nextjs'}
+			{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
 				<div class="grid grid-cols-2 items-center pb-8">
 					<label for="deploymentType" class="text-base font-bold text-stone-100"
 						>Deployment Type</label
@@ -484,7 +484,7 @@
 						/>
 					</div>
 					<Explainer
-						text="How to build your application. Static is for static websites, node is for server-side applications."
+						text="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."
 					/>
 				</div>
 			{/if}