Delete yarn.lock

- Basic PHP support.
- Cosmetic things here and there.
- Fix publish directory option.

README.md

@@ -14,15 +14,11 @@ https://andrasbacsai.com/farewell-netlify-and-heroku-after-3-days-of-coding
 
 
 # FAQ
-Q: What does Buildpack means?
+Q: What is a buildpack?
 
-A: It defines your application's final form. Static means that it will be hosted as a static site in the end. (see next question below 👇)
+A: It defines your application's final form. 
-
+`Static` means that it will be hosted as a static site.
----
+`NodeJs` means that it will be started as a node application.
-
-Q: How can I build a static site, like Next.js, Sapper (prerendered), etc ?
-
-A: Use `static` builder and set your `Build command`.
 
 # Screenshots
 

api/libs/applications/cleanup/index.js

@@ -1,9 +1,10 @@
 const { docker } = require('../../docker')
-const { execShellAsync, delay } = require('../../common')
+const { execShellAsync } = require('../../common')
 const Deployment = require('../../../models/Deployment')
 
 async function purgeOldThings () {
   try {
+    // TODO: Tweak this, because it deletes coolify-base, so the upgrade will be slow
     await docker.engine.pruneImages()
     await docker.engine.pruneContainers()
   } catch (error) {

api/libs/applications/configuration.js

@@ -1,8 +1,9 @@
 const { uniqueNamesGenerator, adjectives, colors, animals } = require('unique-names-generator')
 const cuid = require('cuid')
-const { execShellAsync } = require('../common')
 const crypto = require('crypto')
 
+const { execShellAsync } = require('../common')
+
 function getUniq () {
   return uniqueNamesGenerator({ dictionaries: [adjectives, animals, colors], length: 2 })
 }
@@ -15,6 +16,24 @@ function setDefaultConfiguration (configuration) {
     const shaBase = JSON.stringify({ repository: configuration.repository })
     const sha256 = crypto.createHash('sha256').update(shaBase).digest('hex')
 
+    const baseServiceConfiguration = {
+      replicas: 1,
+      restart_policy: {
+        condition: 'any',
+        max_attempts: 3
+      },
+      update_config: {
+        parallelism: 1,
+        delay: '10s',
+        order: 'start-first'
+      },
+      rollback_config: {
+        parallelism: 1,
+        delay: '10s',
+        order: 'start-first'
+      }
+    }
+
     configuration.build.container.name = sha256.slice(0, 15)
 
     configuration.general.nickname = nickname
@@ -22,7 +41,15 @@ function setDefaultConfiguration (configuration) {
     configuration.general.workdir = `/tmp/${deployId}`
 
     if (!configuration.publish.path) configuration.publish.path = '/'
-    if (!configuration.publish.port) configuration.publish.port = configuration.build.pack === 'static' ? 80 : 3000
+    if (!configuration.publish.port) {
+      if (configuration.build.pack === 'php') {
+        configuration.publish.port = 80
+      } else if (configuration.build.pack === 'static') {
+        configuration.publish.port = 80
+      } else if (configuration.build.pack === 'nodejs') {
+        configuration.publish.port = 3000
+      }
+    }
 
     if (configuration.build.pack === 'static') {
       if (!configuration.build.command.installation) configuration.build.command.installation = 'yarn install'
@@ -34,6 +61,9 @@ function setDefaultConfiguration (configuration) {
       if (!configuration.build.directory) configuration.build.directory = '/'
     }
 
+    configuration.build.container.baseSHA = crypto.createHash('sha256').update(JSON.stringify(baseServiceConfiguration)).digest('hex')
+    configuration.baseServiceConfiguration = baseServiceConfiguration
+
     return configuration
   } catch (error) {
     throw { error, type: 'server' }

api/libs/applications/deploy/deploy.js

@@ -1,9 +1,9 @@
 const yaml = require('js-yaml')
+const fs = require('fs').promises
 const { execShellAsync } = require('../../common')
 const { docker } = require('../../docker')
 const { saveAppLog } = require('../../logging')
 const { deleteSameDeployments } = require('../cleanup')
-const fs = require('fs').promises
 
 module.exports = async function (configuration, configChanged, imageChanged) {
   try {
@@ -12,6 +12,11 @@ module.exports = async function (configuration, configChanged, imageChanged) {
       generateEnvs[secret.name] = secret.value
     }
     const containerName = configuration.build.container.name
+
+    // Only save SHA256 of it in the configuration label
+    const baseServiceConfiguration = configuration.baseServiceConfiguration
+    delete configuration.baseServiceConfiguration
+
     const stack = {
       version: '3.8',
       services: {
@@ -20,23 +25,7 @@ module.exports = async function (configuration, configChanged, imageChanged) {
           networks: [`${docker.network}`],
           environment: generateEnvs,
           deploy: {
-            replicas: 1,
+            ...baseServiceConfiguration,
-            restart_policy: {
-              condition: 'on-failure',
-              delay: '5s',
-              max_attempts: 1,
-              window: '120s'
-            },
-            update_config: {
-              parallelism: 1,
-              delay: '10s',
-              order: 'start-first'
-            },
-            rollback_config: {
-              parallelism: 1,
-              delay: '10s',
-              order: 'start-first'
-            },
             labels: [
               'managedBy=coolify',
               'type=application',
@@ -71,18 +60,15 @@ module.exports = async function (configuration, configChanged, imageChanged) {
         }
       }
     }
+    console.log(stack)
     await saveAppLog('### Publishing.', configuration)
     await fs.writeFile(`${configuration.general.workdir}/stack.yml`, yaml.dump(stack))
-    if (configChanged) {
+    // TODO: Compare stack.yml with the currently running one to upgrade if something changes, like restart_policy
-      // console.log('configuration changed')
+    if (imageChanged) {
-      await execShellAsync(
-        `cat ${configuration.general.workdir}/stack.yml | docker stack deploy --prune -c - ${containerName}`
-      )
-    } else if (imageChanged) {
       // console.log('image changed')
       await execShellAsync(`docker service update --image ${configuration.build.container.name}:${configuration.build.container.tag} ${configuration.build.container.name}_${configuration.build.container.name}`)
     } else {
-      // console.log('new deployment or force deployment')
+      // console.log('new deployment or force deployment or config changed')
       await deleteSameDeployments(configuration)
       await execShellAsync(
         `cat ${configuration.general.workdir}/stack.yml | docker stack deploy --prune -c - ${containerName}`
@@ -91,6 +77,7 @@ module.exports = async function (configuration, configChanged, imageChanged) {
 
     await saveAppLog('### Published done!', configuration)
   } catch (error) {
+    console.log(error)
     await saveAppLog(`Error occured during deployment: ${error.message}`, configuration)
     throw { error, type: 'server' }
   }

api/packs/index.js

@@ -1,4 +1,5 @@
 const static = require('./static')
 const nodejs = require('./nodejs')
+const php = require('./php')
 
-module.exports = { static, nodejs }
+module.exports = { static, nodejs, php }

api/packs/nodejs/index.js

@@ -10,9 +10,13 @@ module.exports = async function (configuration) {
       WORKDIR /usr/src/app
       `
   if (configuration.build.command.build) {
-    dockerFile += `COPY --from=${configuration.build.container.name}:${configuration.build.container.tag} /usr/src/app/${configuration.build.directory} /usr/src/app`
+    dockerFile += `COPY --from=${configuration.build.container.name}:${configuration.build.container.tag} /usr/src/app/${configuration.publish.directory} /usr/src/app`
   } else {
-    dockerFile += 'COPY . ./'
+    if (configuration.publish.directory) {
+      dockerFile += `COPY .${configuration.publish.directory} ./`
+    } else {
+      dockerFile += 'COPY ./'
+    }
   }
   if (configuration.build.command.installation) {
     dockerFile += `

api/packs/php/index.js

@@ -0,0 +1,24 @@
+const fs = require('fs').promises
+const { streamEvents, docker } = require('../../libs/docker')
+
+module.exports = async function (configuration) {
+  let dockerFile = `# production stage
+    FROM php:apache
+    `
+  if (configuration.publish.directory) {
+    dockerFile += `COPY ${configuration.publish.directory} /var/www/html`
+  } else {
+    dockerFile += 'COPY . /var/www/html'
+  }
+
+  dockerFile += `
+      EXPOSE 80
+      CMD ["apache2-foreground"]`
+  await fs.writeFile(`${configuration.general.workdir}/Dockerfile`, dockerFile)
+
+  const stream = await docker.engine.buildImage(
+    { src: ['.'], context: configuration.general.workdir },
+    { t: `${configuration.build.container.name}:${configuration.build.container.tag}` }
+  )
+  await streamEvents(stream, configuration)
+}

api/packs/static/index.js

@@ -10,10 +10,14 @@ module.exports = async function (configuration) {
     COPY nginx.conf /etc/nginx/nginx.conf
     `
   if (configuration.build.command.build) {
-    dockerFile += `COPY --from=${configuration.build.container.name}:${configuration.build.container.tag} /usr/src/app/${configuration.build.directory} /usr/share/nginx/html`
+    dockerFile += `COPY --from=${configuration.build.container.name}:${configuration.build.container.tag} /usr/src/app/${configuration.publish.directory} /usr/share/nginx/html`
+  } else {
+    if (configuration.publish.directory) {
+      dockerFile += `COPY .${configuration.publish.directory} /usr/share/nginx/html`
     } else {
       dockerFile += 'COPY . /usr/share/nginx/html'
     }
+  }
 
   dockerFile += `
       EXPOSE 80

api/routes/v1/application/deploy/index.js

@@ -60,6 +60,10 @@ module.exports = async function (fastify) {
           foundDomain = true
         }
         if (running.repository.id === configuration.repository.id && running.repository.branch === configuration.repository.branch) {
+          // Base service configuration changed
+          if (!running.build.container.baseSHA || running.build.container.baseSHA !== configuration.build.container.baseSHA) {
+            configChanged = true
+          }
           const state = await execShellAsync(`docker stack ps ${running.build.container.name} --format '{{ json . }}'`)
           const isError = state.split('\n').filter(n => n).map(s => JSON.parse(s)).filter(n => n.DesiredState !== 'Running')
           if (isError.length > 0) forceUpdate = true

api/routes/v1/dashboard/index.js

@@ -4,6 +4,7 @@ const ServerLog = require('../../../models/Logs/Server')
 
 module.exports = async function (fastify) {
   fastify.get('/', async (request, reply) => {
+    try {
       const latestDeployments = await Deployment.aggregate([
         {
           $sort: { createdAt: -1 }
@@ -51,5 +52,10 @@ module.exports = async function (fastify) {
           deployed: databases
         }
       }
+    } catch (error) {
+      if (error.code === 'ENOENT' && error.errno === -2) {
+        throw new Error(`Docker service unavailable at ${error.address}.`)
+      }
+    }
   })
 }

api/server.js

@@ -31,7 +31,7 @@ if (process.env.NODE_ENV === 'production') {
 
 fastify.register(require('./app'), { prefix: '/api/v1' })
 fastify.setErrorHandler(async (error, request, reply) => {
-  console.log(error)
+  console.log({ error })
   if (error.statusCode) {
     reply.status(error.statusCode).send({ message: error.message } || { message: 'Something is NOT okay. Are you okay?' })
   } else {

install.sh

@@ -1,43 +1,82 @@
 #!/bin/bash
+echo '
+##############################
+#### Pulling Git Updates #####
+##############################'
 GIT_SSH_COMMAND="ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no" git pull
-echo "#### Building base image."
+
-docker build -t coolify-base -f install/Dockerfile-base .
 if [ $? -ne 0 ]; then
-    echo '#### Ooops something not okay!'
+    echo '
+####################################
+#### Ooops something not okay! #####
+####################################'
     exit 1
 fi
 
-echo "#### Checking configuration."
+echo '
+##############################
+#### Building Base Image #####
+##############################'
+docker build --label coolify-reserve=true -t coolify-base -f install/Dockerfile-base .
+
+if [ $? -ne 0 ]; then
+    echo '
+####################################
+#### Ooops something not okay! #####
+####################################'
+    exit 1
+fi
+
+echo '
+##################################
+#### Checking configuration. #####
+##################################'
 docker run --rm -w /usr/src/app coolify-base node install/install.js --check
 if [ $? -ne 0 ]; then
-    echo '#### Missing configuration.'
+   echo '
+##################################
+#### Missing configuration ! #####
+##################################'
     exit 1
 fi
 
 case "$1" in
     "all")
-        echo "#### Rebuild everything."
+       echo '
+#################################
+#### Rebuilding everything. #####
+#################################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/install.js --type all
     ;;
     "coolify")
-        echo "#### Rebuild coolify."
+       echo '
+##############################
+#### Rebuilding Coolify. #####
+##############################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/install.js --type coolify
     ;;
     "proxy")
-        echo "#### Rebuild proxy."
+       echo '
+############################
+#### Rebuilding Proxy. #####
+############################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/install.js --type proxy
     ;;
     "upgrade-phase-1")
-        echo "#### Rebuild coolify from frontend request phase 1."
+        echo '
+################################
+#### Upgrading Coolify P1. #####
+################################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/install.js --type upgrade
     ;;
     "upgrade-phase-2")
-        echo "#### Rebuild coolify from frontend request phase 2."
+        echo '
+################################
+#### Upgrading Coolify P2. #####
+################################'
         docker run --rm -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify:/data/coolify -u root -w /usr/src/app coolify-base node install/update.js --type upgrade
     ;;
-
     *)
-        echo "Use 'all' to build & deploy proxy+coolify, 'coolify' to build & deploy only coolify, 'proxy' to build & deploy only proxy."
         exit 1
      ;;
 esac

install/install.js

@@ -35,7 +35,9 @@ if (program.check) {
   } else if (program.type === 'proxy') {
     shell.exec('docker service rm coollabs-coolify_proxy')
   }
-  if (program.type !== 'upgrade') shell.exec('set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify', { silent: !program.debug, shell: '/bin/bash' })
+  if (program.type !== 'upgrade') {
+    shell.exec('set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify', { silent: !program.debug, shell: '/bin/bash' })
+  }
 }
 
 function checkConfig () {

install/update.js

@@ -15,6 +15,7 @@ if (user !== 'root') {
   console.error(`Please run as root! Current user: ${user}`)
   process.exit(1)
 }
+
 if (program.type === 'upgrade') {
   shell.exec('docker service rm coollabs-coolify_coolify')
   shell.exec('set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify', { silent: !program.debug, shell: '/bin/bash' })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "coolify",
   "description": "An open-source, hassle-free, self-hostable Heroku & Netlify alternative.",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license": "AGPL-3.0",
   "scripts": {
     "lint": "standard",
@@ -20,6 +20,7 @@
     "@zerodevx/svelte-toast": "^0.1.4",
     "axios": "^0.21.0",
     "commander": "^6.2.1",
+    "compare-versions": "^3.6.0",
     "cuid": "^2.1.8",
     "dayjs": "^1.10.4",
     "deepmerge": "^4.2.2",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ dependencies:
   '@zerodevx/svelte-toast': 0.1.4
   axios: 0.21.1
   commander: 6.2.1
+  compare-versions: 3.6.0
   cuid: 2.1.8
   dayjs: 1.10.4
   deepmerge: 4.2.2
@@ -1188,6 +1189,10 @@ packages:
     dev: true
     resolution:
       integrity: sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+  /compare-versions/3.6.0:
+    dev: false
+    resolution:
+      integrity: sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==
   /concat-map/0.0.1:
     resolution:
       integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
@@ -6749,6 +6754,7 @@ specifiers:
   '@zerodevx/svelte-toast': ^0.1.4
   axios: ^0.21.0
   commander: ^6.2.1
+  compare-versions: ^3.6.0
   cuid: ^2.1.8
   dayjs: ^1.10.4
   deepmerge: ^4.2.2

src/components/Application/Configuration/ActiveTab/BuildStep.svelte

@@ -2,9 +2,10 @@
   import { application } from "@store";
 </script>
 
-<div class="grid grid-cols-1 space-y-2 max-w-2xl md:mx-auto mx-6 text-center">
+<div class="grid grid-cols-1 max-w-2xl md:mx-auto mx-6 text-center">
   <label for="buildCommand">Build Command</label>
   <input
+    class="mb-6"
     id="buildCommand"
     bind:value="{$application.build.command.build}"
     placeholder="eg: yarn build"
@@ -12,11 +13,17 @@
 
   <label for="installCommand">Install Command</label>
   <input
+    class="mb-6"
     id="installCommand"
     bind:value="{$application.build.command.installation}"
     placeholder="eg: yarn install"
   />
 
   <label for="baseDir">Base Directory</label>
-  <input id="baseDir" bind:value="{$application.build.directory}" placeholder="/" />
+  <input
+    id="baseDir"
+    class="mb-6"
+    bind:value="{$application.build.directory}"
+    placeholder="/"
+  />
 </div>

src/components/Application/Configuration/ActiveTab/General.svelte

@@ -4,103 +4,53 @@
 
 <div>
   <div
-      class="grid grid-cols-1 text-sm space-y-2 max-w-2xl md:mx-auto mx-6 pb-6 auto-cols-max"
+    class="grid grid-cols-1 text-sm max-w-2xl md:mx-auto mx-6 pb-6 auto-cols-max "
   >
     <label for="buildPack">Build Pack</label>
     <select id="buildPack" bind:value="{$application.build.pack}">
-        <option selected class="font-medium">static</option>
+      <option selected class="font-bold">static</option>
-        <option class="font-medium">nodejs</option>
+      <option class="font-bold">nodejs</option>
+      <option class="font-bold">php</option>
     </select>
   </div>
   <div
-      class="grid grid-cols-2 space-y-2 max-w-2xl md:mx-auto mx-6 justify-center items-center"
+    class="grid grid-cols-1 max-w-2xl md:mx-auto mx-6 justify-center items-center"
   >
-      <label for="Domain">Domain</label>
+    <div class="grid grid-flow-col gap-2 items-center pb-6">
+      <div class="grid grid-flow-row">
+        <label for="Domain" class="">Domain</label>
         <input
-        class:placeholder-red-500="{$application.publish.domain == null || $application.publish.domain == ''}"
+          class:placeholder-red-500="{$application.publish.domain == null ||
-        class:border-red-500="{$application.publish.domain == null || $application.publish.domain == ''}"
+            $application.publish.domain == ''}"
+          class:border-red-500="{$application.publish.domain == null ||
+            $application.publish.domain == ''}"
           id="Domain"
           bind:value="{$application.publish.domain}"
           placeholder="eg: coollabs.io (without www)"
         />
-      <label for="Path">Path Prefix</label>
+      </div>
+      <div class="grid grid-flow-row">
+        <label for="Path">Path</label>
         <input
           id="Path"
           bind:value="{$application.publish.path}"
           placeholder="/"
         />
+      </div>
+    </div>
     <label for="publishDir">Publish Directory</label>
     <input
       id="publishDir"
       bind:value="{$application.publish.directory}"
       placeholder="/"
     />
-      {#if $application.build.pack !== "static"}
+    {#if $application.build.pack === "nodejs"}
-        <label for="Port">Port</label>
+      <label for="Port" class="pt-6">Port</label>
       <input
         id="Port"
         bind:value="{$application.publish.port}"
-          placeholder="{$application.build.pack === 'static'
+        placeholder="{$application.build.pack === 'static' ? '80' : '3000'}"
-            ? '80'
-            : '3000'}"
       />
     {/if}
-      <!-- {#if config.buildPack === "static"}
-        <div class="text-base font-bold text-white pt-2">
-          Preview Deploys
-        </div>
-        <button
-          type="button"
-          on:click="{() =>
-            (config.previewDeploy = !config.previewDeploy)}"
-          aria-pressed="false"
-          class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
-          class:bg-green-600="{config.previewDeploy}"
-          class:bg-coolgray-300="{!config.previewDeploy}"
-        >
-          <span class="sr-only">Use setting</span>
-          <span
-            class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-            class:translate-x-5="{config.previewDeploy}"
-            class:translate-x-0="{!config.previewDeploy}"
-          >
-            <span
-              class="ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-              class:opacity-0="{config.previewDeploy}"
-              class:opacity-100="{!config.previewDeploy}"
-              aria-hidden="true"
-            >
-              <svg
-                class="bg-white h-3 w-3 text-red-600"
-                fill="none"
-                viewBox="0 0 12 12"
-              >
-                <path
-                  d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"></path>
-              </svg>
-            </span>
-            <span
-              class="ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-              aria-hidden="true"
-              class:opacity-100="{config.previewDeploy}"
-              class:opacity-0="{!config.previewDeploy}"
-            >
-              <svg
-                class="bg-white h-3 w-3 text-green-600"
-                fill="currentColor"
-                viewBox="0 0 12 12"
-              >
-                <path
-                  d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-                ></path>
-              </svg>
-            </span>
-          </span>
-        </button>
-      {/if} -->
   </div>
 </div>

src/components/Application/Configuration/ActiveTab/Secrets.svelte

@@ -21,23 +21,26 @@
         ];
         secret = {
           name: null,
-        value: null
+          value: null,
-      }
+        };
       } else {
         foundSecret = found;
       }
     }
-
   }
 
   async function removeSecret(name) {
-    $application.publish.secrets = [...$application.publish.secrets.filter(s => s.name !== name)]
+    foundSecret = null
-   
+    $application.publish.secrets = [
+      ...$application.publish.secrets.filter(s => s.name !== name),
+    ];
   }
 </script>
 
-<div class="space-y-2 max-w-2xl md:mx-auto mx-6 text-center">
+<div class="max-w-2xl md:mx-auto mx-6 text-center">
-  <div class="text-left text-base font-bold tracking-tight text-warmGray-400">New Secret</div>
+  <div class="text-left text-base font-bold tracking-tight text-warmGray-400">
+    New Secret
+  </div>
   <div class="grid md:grid-flow-col grid-flow-row gap-2">
     <input id="secretName" bind:value="{secret.name}" placeholder="Name" />
     <input id="secretValue" bind:value="{secret.value}" placeholder="Value" />
@@ -47,18 +50,19 @@
     >
   </div>
   {#if $application.publish.secrets.length > 0}
+    <div class="py-4">
       {#each $application.publish.secrets as s}
         <div class="grid md:grid-flow-col grid-flow-row gap-2">
           <input
             id="{s.name}"
             value="{s.name}"
             disabled
-          class="bg-transparent border-transparent"
+            class="border-2 bg-transparent border-transparent"
             class:border-red-600="{foundSecret && foundSecret.name === s.name}"
           />
           <input
             id="{s.createdAt}"
-          value="ENCRYPTED"
+            value="SAVED"
             disabled
             class="bg-transparent border-transparent"
           />
@@ -68,5 +72,6 @@
           >
         </div>
       {/each}
+    </div>
   {/if}
 </div>

src/components/Application/Configuration/Branches.svelte

@@ -17,7 +17,7 @@
     <select id="branch" bind:value="{$application.repository.branch}">
       <option disabled selected>Select a branch</option>
       {#each branches as branch}
-        <option value="{branch.name}" class="font-medium">{branch.name}</option>
+        <option value="{branch.name}" class="font-bold">{branch.name}</option>
       {/each}
     </select>
   </div>

src/components/Application/Configuration/Repositories.svelte

@@ -23,7 +23,7 @@
       >
         <option selected disabled>Select a repository</option>
         {#each repositories as repo}
-          <option value="{repo.id}" class="font-medium">
+          <option value="{repo.id}" class="font-bold">
             {repo.owner.login}
             /
             {repo.name}

src/pages/_layout.svelte

@@ -19,8 +19,9 @@
     initConf,
   } from "@store";
   import { toast } from "@zerodevx/svelte-toast";
-  import packageJson from "../../package.json";
   import { onMount } from "svelte";
+  import compareVersions from 'compare-versions';
+  import packageJson from "../../package.json";
 
   let upgradeAvailable = false;
   let upgradeDisabled = false;
@@ -73,18 +74,14 @@
     }
   }
   async function checkUpgrade() {
+    const branch = process.env.NODE_ENV === 'production' && window.location.hostname !== 'test.andrasbacsai.dev' ? 'main' : 'next'
     latest = await window
       .fetch(
-        "https://raw.githubusercontent.com/coollabsio/coolify/main/package.json",
+        `https://raw.githubusercontent.com/coollabsio/coolify/${branch}/package.json`,
         { cache: "no-cache" },
       )
       .then(r => r.json());
-    if (
+      return compareVersions(latest.version,packageJson.version) === 1 ? true : false
-      latest.version.split(".").join("") >
-      packageJson.version.split(".").join("")
-    ) {
-      return true;
-    }
   }
 </script>
 
@@ -214,24 +211,24 @@
         <div
           class="cursor-pointer text-xs font-bold text-warmGray-400 py-2 hover:bg-warmGray-700 w-full text-center"
         >
-          v{packageJson.version}
+          {packageJson.version}
         </div>
       </div>
     </nav>
   {/if}
   {#if upgradeAvailable}
     <footer
-      class="absolute top-0 right-0 p-2 w-auto rounded-tl text-white "
+      class="absolute bottom-0 right-0 p-4 px-6 w-auto rounded-tl text-white "
     >
       <div class="flex items-center">
         <div></div>
         <div class="flex-1"></div>
           {#if !upgradeDisabled}
             <button
-              class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 font-bold text-xs rounded px-2 py-2"
+              class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-xs font-bold rounded px-2 py-2"
               disabled="{upgradeDisabled}"
               on:click="{upgrade}"
-              >New version available. <br>Click here to upgrade!</button
+              >New version available, <br>click here to upgrade!</button
             >
           {:else if upgradeDone}
             <button

src/pages/application/_layout.svelte

@@ -49,6 +49,7 @@
 
   async function deploy() {
     try {
+      $application.build.pack =  $application.build.pack.replace('.','').toLowerCase()
       toast.push("Checking inputs.");
       await $fetch(`/api/v1/application/check`, {
         body: $application,

src/pages/dashboard/applications.svelte

@@ -98,6 +98,10 @@
                       d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z"
                     ></path>
                   </svg>
+                  {:else if application.Spec.Labels.configuration.build.pack === "php"}
+                  <svg viewBox="0 0 128 128" class="text-white w-14 h-14 absolute top-0 left-0 -m-6">
+                    <path fill="#6181B6" d="M64 33.039c-33.74 0-61.094 13.862-61.094 30.961s27.354 30.961 61.094 30.961 61.094-13.862 61.094-30.961-27.354-30.961-61.094-30.961zm-15.897 36.993c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34h14.04c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515-.759 1.357-1.75 2.624-2.972 3.748zm21.311 2.968l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528l-3.031 15.241h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zM38.934 54h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458s-2.772-1.721-5.546-1.721z"></path>
+                    </svg>
                 {/if}
                 <div
                   class="text-xs font-bold text-center w-full text-warmGray-300  group-hover:text-white"

src/store.js

@@ -125,7 +125,8 @@ export const application = writable({
     },
     container: {
       name: null,
-      tag: null
+      tag: null,
+      baseSHA: null
     }
   },
   publish: {