diff --git a/apps/api/src/jobs/deployApplication.ts b/apps/api/src/jobs/deployApplication.ts index 9782067d1..ff87ebe7c 100644 --- a/apps/api/src/jobs/deployApplication.ts +++ b/apps/api/src/jobs/deployApplication.ts @@ -152,6 +152,13 @@ import * as buildpacks from '../lib/buildPacks'; .createHash('sha256') .update( JSON.stringify({ + pythonWSGI, + pythonModule, + pythonVariable, + deploymentType, + denoOptions, + baseImage, + baseBuildImage, buildPack, port, exposePort, @@ -291,6 +298,7 @@ import * as buildpacks from '../lib/buildPacks'; } }; }); + console.log({port}) const composeFile = { version: '3.8', services: { diff --git a/apps/api/src/lib/buildPacks/common.ts b/apps/api/src/lib/buildPacks/common.ts index 62aa271c1..6684664d6 100644 --- a/apps/api/src/lib/buildPacks/common.ts +++ b/apps/api/src/lib/buildPacks/common.ts @@ -252,6 +252,20 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st label: 'python:3.7-slim-bullseye' } ]; + const herokuVersions = [ + { + value: 'heroku/builder:22', + label: 'heroku/builder:22' + }, + { + value: 'heroku/buildpacks:20', + label: 'heroku/buildpacks:20' + }, + { + value: 'heroku/builder-classic:22', + label: 'heroku/builder-classic:22' + }, + ] let payload: any = { baseImage: null, baseBuildImage: null, @@ -299,6 +313,11 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st payload.baseBuildImage = 'node:18'; payload.baseBuildImages = nodeVersions; } + if (buildPack === 'heroku') { + payload.baseImage = 'heroku/buildpacks:20'; + payload.baseImages = herokuVersions; + + } return payload; } diff --git a/apps/ui/src/lib/common.ts b/apps/ui/src/lib/common.ts index 08b863d57..3834422e5 100644 --- a/apps/ui/src/lib/common.ts +++ b/apps/ui/src/lib/common.ts @@ -229,7 +229,7 @@ export const staticDeployments = [ 'astro', 'eleventy' ]; -export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel']; +export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel', 'heroku']; export function generateRemoteEngine(destination: any) { diff --git a/apps/ui/src/lib/components/Toast.svelte b/apps/ui/src/lib/components/Toast.svelte index 282bc159f..b0586a51f 100644 --- a/apps/ui/src/lib/components/Toast.svelte +++ b/apps/ui/src/lib/components/Toast.svelte @@ -5,16 +5,17 @@
dispatch('click')} on:mouseover={() => dispatch('pause')} on:focus={() => dispatch('pause')} on:mouseout={() => dispatch('resume')} on:blur={() => dispatch('resume')} - class="alert shadow-lg text-white rounded" + class="alert shadow-lg text-white rounded hover:scale-105 transition-all duration-100 cursor-pointer" class:bg-coollabs={type === 'success'} class:alert-error={type === 'error'} class:alert-info={type === 'info'} > - + {/if}
diff --git a/apps/ui/src/lib/components/Toasts.svelte b/apps/ui/src/lib/components/Toasts.svelte index 2e53c6287..1c7c8cbc0 100644 --- a/apps/ui/src/lib/components/Toasts.svelte +++ b/apps/ui/src/lib/components/Toasts.svelte @@ -2,7 +2,7 @@ import { fade } from 'svelte/transition'; import Toast from './Toast.svelte'; - import { pauseToast, resumeToast, toasts } from '$lib/store'; + import { dismissToast, pauseToast, resumeToast, toasts } from '$lib/store'; {#if $toasts} @@ -12,7 +12,8 @@ resumeToast(toast.id)} - on:pause={() => pauseToast(toast.id)}>{@html toast.message} pauseToast(toast.id)} + on:click={() => dismissToast(toast.id)}>{@html toast.message} {/each} diff --git a/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte b/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte index 379b775ce..0980063c6 100644 --- a/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte +++ b/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte @@ -38,4 +38,6 @@ {:else if application.buildPack?.toLowerCase() === 'laravel'} +{:else if application.buildPack?.toLowerCase() === 'heroku'} + {/if} diff --git a/apps/ui/src/lib/components/svg/applications/Heroku.svelte b/apps/ui/src/lib/components/svg/applications/Heroku.svelte new file mode 100644 index 000000000..25a221ee2 --- /dev/null +++ b/apps/ui/src/lib/components/svg/applications/Heroku.svelte @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/ui/src/lib/components/svg/applications/index.ts b/apps/ui/src/lib/components/svg/applications/index.ts index 12b712f4c..ee2236357 100644 --- a/apps/ui/src/lib/components/svg/applications/index.ts +++ b/apps/ui/src/lib/components/svg/applications/index.ts @@ -16,4 +16,4 @@ export { default as Astro } from './Astro.svelte'; export { default as Eleventy } from './Eleventy.svelte'; export { default as Deno } from './Deno.svelte'; export { default as Laravel } from './Laravel.svelte'; - +export { default as Heroku } from './Heroku.svelte'; diff --git a/apps/ui/src/lib/templates.ts b/apps/ui/src/lib/templates.ts index ecd669e8e..c4ec05ad6 100644 --- a/apps/ui/src/lib/templates.ts +++ b/apps/ui/src/lib/templates.ts @@ -170,6 +170,16 @@ export function findBuildPack(pack: string, packageManager = 'npm') { port: 80 }; } + if (pack === 'heroku') { + return { + ...metaData, + installCommand: null, + buildCommand: null, + startCommand: null, + publishDirectory: null, + port: 5000 + }; + } return { name: 'node', fancyName: 'Node.js', @@ -187,118 +197,137 @@ export const buildPacks = [ name: 'node', fancyName: 'Node.js', hoverColor: 'hover:bg-green-700', - color: 'bg-green-700' + color: 'bg-green-700', + isCoolifyBuildPack: true, }, { name: 'static', fancyName: 'Static', hoverColor: 'hover:bg-orange-700', - color: 'bg-orange-700' + color: 'bg-orange-700', + isCoolifyBuildPack: true, }, { name: 'php', fancyName: 'PHP', hoverColor: 'hover:bg-indigo-700', - color: 'bg-indigo-700' + color: 'bg-indigo-700', + isCoolifyBuildPack: true, }, { name: 'laravel', fancyName: 'Laravel', hoverColor: 'hover:bg-indigo-700', - color: 'bg-indigo-700' + color: 'bg-indigo-700', + isCoolifyBuildPack: true, }, { name: 'docker', fancyName: 'Docker', hoverColor: 'hover:bg-sky-700', - color: 'bg-sky-700' + color: 'bg-sky-700', + isCoolifyBuildPack: true, }, { name: 'svelte', fancyName: 'Svelte', hoverColor: 'hover:bg-orange-700', - color: 'bg-orange-700' + color: 'bg-orange-700', + isCoolifyBuildPack: true, }, { name: 'vuejs', fancyName: 'VueJS', hoverColor: 'hover:bg-green-700', - color: 'bg-green-700' + color: 'bg-green-700', + isCoolifyBuildPack: true, }, { name: 'nuxtjs', fancyName: 'NuxtJS', hoverColor: 'hover:bg-green-700', - color: 'bg-green-700' + color: 'bg-green-700', + isCoolifyBuildPack: true, }, { name: 'gatsby', fancyName: 'Gatsby', hoverColor: 'hover:bg-blue-700', - color: 'bg-blue-700' + color: 'bg-blue-700', + isCoolifyBuildPack: true, }, { name: 'astro', fancyName: 'Astro', hoverColor: 'hover:bg-pink-700', - color: 'bg-pink-700' + color: 'bg-pink-700', + isCoolifyBuildPack: true, }, { name: 'eleventy', fancyName: 'Eleventy', hoverColor: 'hover:bg-red-700', - color: 'bg-red-700' + color: 'bg-red-700', + isCoolifyBuildPack: true, }, { name: 'react', fancyName: 'React', hoverColor: 'hover:bg-blue-700', - color: 'bg-blue-700' + color: 'bg-blue-700', + isCoolifyBuildPack: true, }, { name: 'preact', fancyName: 'Preact', hoverColor: 'hover:bg-blue-700', - color: 'bg-blue-700' + color: 'bg-blue-700', + isCoolifyBuildPack: true, }, { name: 'nextjs', fancyName: 'NextJS', hoverColor: 'hover:bg-blue-700', - color: 'bg-blue-700' + color: 'bg-blue-700', + isCoolifyBuildPack: true, }, { name: 'nestjs', fancyName: 'NestJS', hoverColor: 'hover:bg-red-700', - color: 'bg-red-700' + color: 'bg-red-700', + isCoolifyBuildPack: true, }, { name: 'rust', fancyName: 'Rust', hoverColor: 'hover:bg-pink-700', - color: 'bg-pink-700' + color: 'bg-pink-700', + isCoolifyBuildPack: true, }, { name: 'python', fancyName: 'Python', hoverColor: 'hover:bg-green-700', - color: 'bg-green-700' + color: 'bg-green-700', + isCoolifyBuildPack: true, }, { name: 'deno', fancyName: 'Deno', hoverColor: 'hover:bg-green-700', - color: 'bg-green-700' + color: 'bg-green-700', + isCoolifyBuildPack: true, }, - // { - // name: 'heroku', - // fancyName: 'Heroku Buildpack', - // hoverColor: 'hover:bg-indigo-700', - // color: 'bg-indigo-700' - // } + { + name: 'heroku', + fancyName: 'Heroku', + hoverColor: 'hover:bg-purple-700', + color: 'bg-purple-700', + isHerokuBuildPack: true, + } ]; export const scanningTemplates = { '@sveltejs/kit': { diff --git a/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte b/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte index 7330bbbd0..e187d95bd 100644 --- a/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte +++ b/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte @@ -30,7 +30,6 @@ import { page } from '$app/stores'; import { get } from '$lib/api'; import { appSession } from '$lib/store'; - import { browser } from '$app/env'; import { t } from '$lib/translations'; import { buildPacks, findBuildPack, scanningTemplates } from '$lib/templates'; import { errorNotification } from '$lib/common'; @@ -263,11 +262,27 @@ {:else} -
- {#each buildPacks as buildPack} + + +
+
Coolify Buildpacks
+
+ {#each buildPacks.filter(bp => bp.isCoolifyBuildPack === true) as buildPack} +
+ +
+ {/each} +
+
+ +
+
Heroku
+
+ {#each buildPacks.filter(bp => bp.isHerokuBuildPack === true) as buildPack}
{/each}
+
{/if} diff --git a/apps/ui/src/routes/applications/[id]/index.svelte b/apps/ui/src/routes/applications/[id]/index.svelte index 550260274..fa9a94375 100644 --- a/apps/ui/src/routes/applications/[id]/index.svelte +++ b/apps/ui/src/routes/applications/[id]/index.svelte @@ -332,53 +332,56 @@ - + {#if isDisabled} + + {:else} + + {/if}
- + {#if isDisabled} + + {:else} + + {/if}
+ {#if isDisabled} + + {:else} + {/if}
{/if} - {#if application.buildPack !== 'laravel'} + {#if application.buildPack !== 'laravel' && application.buildPack !== 'heroku'}