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 👇)
-
----
-
-Q: How can I build a static site, like Next.js, Sapper (prerendered), etc ?
-
-A: Use `static` builder and set your `Build command`.
+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.
 
 # Screenshots
 
@@ -78,7 +74,7 @@ Manually:
 - Set `.env` (see `.env.template`)
 - Installation: `bash install.sh all`
 
-## Updating process
+## Manual updating process (You probably never need to do this!)
 ### Update everything (proxy+coolify)
 -  `bash install.sh all`
 

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,
-            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'
-            },
+            ...baseServiceConfiguration,
             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) {
-      // console.log('configuration changed')
-      await execShellAsync(
-        `cat ${configuration.general.workdir}/stack.yml | docker stack deploy --prune -c - ${containerName}`
-      )
-    } else if (imageChanged) {
+    // TODO: Compare stack.yml with the currently running one to upgrade if something changes, like restart_policy
+    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,9 +10,13 @@ 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 {
-    dockerFile += 'COPY . /usr/share/nginx/html'
+    if (configuration.publish.directory) {
+      dockerFile += `COPY .${configuration.publish.directory} /usr/share/nginx/html`
+    } else {
+      dockerFile += 'COPY . /usr/share/nginx/html'
+    }
   }
 
   dockerFile += `

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,51 +4,57 @@ const ServerLog = require('../../../models/Logs/Server')
 
 module.exports = async function (fastify) {
   fastify.get('/', async (request, reply) => {
-    const latestDeployments = await Deployment.aggregate([
-      {
-        $sort: { createdAt: -1 }
-      },
-      {
-        $group:
+    try {
+      const latestDeployments = await Deployment.aggregate([
         {
-          _id: {
-            repoId: '$repoId',
-            branch: '$branch'
-          },
-          createdAt: { $last: '$createdAt' },
-          progress: { $first: '$progress' }
+          $sort: { createdAt: -1 }
+        },
+        {
+          $group:
+          {
+            _id: {
+              repoId: '$repoId',
+              branch: '$branch'
+            },
+            createdAt: { $last: '$createdAt' },
+            progress: { $first: '$progress' }
+          }
         }
-      }
-    ])
+      ])
 
-    const serverLogs = await ServerLog.find()
-    const services = await docker.engine.listServices()
+      const serverLogs = await ServerLog.find()
+      const services = await docker.engine.listServices()
 
-    let applications = services.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application' && r.Spec.Labels.configuration)
-    let databases = services.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'database' && r.Spec.Labels.configuration)
-    applications = applications.map(r => {
-      if (JSON.parse(r.Spec.Labels.configuration)) {
-        const configuration = JSON.parse(r.Spec.Labels.configuration)
-        const status = latestDeployments.find(l => configuration.repository.id === l._id.repoId && configuration.repository.branch === l._id.branch)
-        if (status && status.progress) r.progress = status.progress
+      let applications = services.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application' && r.Spec.Labels.configuration)
+      let databases = services.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'database' && r.Spec.Labels.configuration)
+      applications = applications.map(r => {
+        if (JSON.parse(r.Spec.Labels.configuration)) {
+          const configuration = JSON.parse(r.Spec.Labels.configuration)
+          const status = latestDeployments.find(l => configuration.repository.id === l._id.repoId && configuration.repository.branch === l._id.branch)
+          if (status && status.progress) r.progress = status.progress
+          r.Spec.Labels.configuration = configuration
+          return r
+        }
+        return {}
+      })
+      databases = databases.map(r => {
+        const configuration = r.Spec.Labels.configuration ? JSON.parse(r.Spec.Labels.configuration) : null
         r.Spec.Labels.configuration = configuration
         return r
+      })
+      applications = [...new Map(applications.map(item => [item.Spec.Labels.configuration.publish.domain, item])).values()]
+      return {
+        serverLogs,
+        applications: {
+          deployed: applications
+        },
+        databases: {
+          deployed: databases
+        }
       }
-      return {}
-    })
-    databases = databases.map(r => {
-      const configuration = r.Spec.Labels.configuration ? JSON.parse(r.Spec.Labels.configuration) : null
-      r.Spec.Labels.configuration = configuration
-      return r
-    })
-    applications = [...new Map(applications.map(item => [item.Spec.Labels.configuration.publish.domain, item])).values()]
-    return {
-      serverLogs,
-      applications: {
-        deployed: applications
-      },
-      databases: {
-        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.0",
+  "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

@@ -1,10 +1,11 @@
 <script>
-  import { application} from "@store";
+  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

@@ -3,104 +3,54 @@
 </script>
 
 <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"
-    >
-      <label for="buildPack">Build Pack</label>
-      <select id="buildPack" bind:value="{$application.build.pack}">
-        <option selected class="font-medium">static</option>
-        <option class="font-medium">nodejs</option>
-      </select>
-    </div>
-    <div
-      class="grid grid-cols-2 space-y-2 max-w-2xl md:mx-auto mx-6 justify-center items-center"
-    >
-      <label for="Domain">Domain</label>
-      <input
-        class:placeholder-red-500="{$application.publish.domain == null || $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>
-      <input
-        id="Path"
-        bind:value="{$application.publish.path}"
-        placeholder="/"
-      />
-      <label for="publishDir">Publish Directory</label>
-      <input
-        id="publishDir"
-        bind:value="{$application.publish.directory}"
-        placeholder="/"
-      />
-      {#if $application.build.pack !== "static"}
-        <label for="Port">Port</label>
+  <div
+    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-bold">static</option>
+      <option class="font-bold">nodejs</option>
+      <option class="font-bold">php</option>
+    </select>
+  </div>
+  <div
+    class="grid grid-cols-1 max-w-2xl md:mx-auto mx-6 justify-center items-center"
+  >
+    <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
-          id="Port"
-          bind:value="{$application.publish.port}"
-          placeholder="{$application.build.pack === 'static'
-            ? '80'
-            : '3000'}"
+          class:placeholder-red-500="{$application.publish.domain == null ||
+            $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)"
         />
-      {/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 class="grid grid-flow-row">
+        <label for="Path">Path</label>
+        <input
+          id="Path"
+          bind:value="{$application.publish.path}"
+          placeholder="/"
+        />
+      </div>
     </div>
-  </div>
+    <label for="publishDir">Publish Directory</label>
+    <input
+      id="publishDir"
+      bind:value="{$application.publish.directory}"
+      placeholder="/"
+    />
+    {#if $application.build.pack === "nodejs"}
+      <label for="Port" class="pt-6">Port</label>
+      <input
+        id="Port"
+        bind:value="{$application.publish.port}"
+        placeholder="{$application.build.pack === 'static' ? '80' : '3000'}"
+      />
+    {/if}
+  </div>
+</div>

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

@@ -9,35 +9,38 @@
   async function saveSecret() {
     if (secret.name && secret.value) {
       const found = $application.publish.secrets.find(
-      s => s.name === secret.name,
-    );
-    if (!found) {
-      $application.publish.secrets = [
-        ...$application.publish.secrets,
-        {
-          name: secret.name,
-          value: secret.value,
-        },
-      ];
-      secret = {
-        name: null,
-        value: null
+        s => s.name === secret.name,
+      );
+      if (!found) {
+        $application.publish.secrets = [
+          ...$application.publish.secrets,
+          {
+            name: secret.name,
+            value: secret.value,
+          },
+        ];
+        secret = {
+          name: null,
+          value: null,
+        };
+      } else {
+        foundSecret = found;
       }
-    } 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="text-left text-base font-bold tracking-tight text-warmGray-400">New Secret</div>
+<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="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,26 +50,28 @@
     >
   </div>
   {#if $application.publish.secrets.length > 0}
-    {#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-red-600="{foundSecret && foundSecret.name === s.name}"
-        />
-        <input
-          id="{s.createdAt}"
-          value="ENCRYPTED"
-          disabled
-          class="bg-transparent border-transparent"
-        />
-        <button
-          class="button w-20 bg-red-600 hover:bg-red-500 text-white"
-          on:click="{() => removeSecret(s.name)}">Delete</button
-        >
-      </div>
-    {/each}
+    <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="border-2 bg-transparent border-transparent"
+            class:border-red-600="{foundSecret && foundSecret.name === s.name}"
+          />
+          <input
+            id="{s.createdAt}"
+            value="SAVED"
+            disabled
+            class="bg-transparent border-transparent"
+          />
+          <button
+            class="button w-20 bg-red-600 hover:bg-red-500 text-white"
+            on:click="{() => removeSecret(s.name)}">Delete</button
+          >
+        </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/Configuration.svelte

@@ -11,11 +11,22 @@
 
   let loading = {
     branches: false,
+    github: false,
   };
 
   let branches = [];
   let repositories = [];
 
+  function dashify(str, options) {
+    if (typeof str !== "string") return str
+    return str
+      .trim()
+      .replace(/\W/g, m => (/[À-ž]/.test(m) ? m : "-"))
+      .replace(/^-+|-+$/g, "")
+      .replace(/-{2,}/g, m => (options && options.condense ? "-" : m))
+      .toLowerCase();
+  }
+
   async function loadBranches() {
     loading.branches = true;
     const selectedRepository = repositories.find(
@@ -62,14 +73,15 @@
     } catch (error) {
       return false;
     }
+    loading.github = false;
   }
   function modifyGithubAppConfig() {
     const left = screen.width / 2 - 1020 / 2;
     const top = screen.height / 2 - 618 / 2;
     const newWindow = open(
-      `https://github.com/apps/${
-        import.meta.env.VITE_GITHUB_APP_NAME
-      }/installations/new`,
+      `https://github.com/apps/${dashify(
+        import.meta.env.VITE_GITHUB_APP_NAME,
+      )}/installations/new`,
       "Install App",
       "resizable=1, scrollbars=1, fullscreen=0, height=1000, width=1020,top=" +
         top +
@@ -80,6 +92,7 @@
     const timer = setInterval(async () => {
       if (newWindow.closed) {
         clearInterval(timer);
+        loading.github = true;
         if (!$isActive("/application/new")) {
           try {
             const config = await $fetch(`/api/v1/config`, {
@@ -111,23 +124,27 @@
     {#await loadGithub()}
       <Loading />
     {:then}
-      <div
-        class="text-center space-y-2 max-w-4xl mx-auto px-6"
-        in:fade="{{ duration: 100 }}"
-      >
-        <Repositories
-          bind:repositories
-          on:loadBranches="{loadBranches}"
-          on:modifyGithubAppConfig="{modifyGithubAppConfig}"
-        />
-        {#if $application.repository.organization !== "new"}
-          <Branches loading="{loading.branches}" branches="{branches}" />
-        {/if}
+      {#if loading.github}
+        <Loading />
+      {:else}
+        <div
+          class="text-center space-y-2 max-w-4xl mx-auto px-6"
+          in:fade="{{ duration: 100 }}"
+        >
+          <Repositories
+            bind:repositories
+            on:loadBranches="{loadBranches}"
+            on:modifyGithubAppConfig="{modifyGithubAppConfig}"
+          />
+          {#if $application.repository.organization !== "new"}
+            <Branches loading="{loading.branches}" branches="{branches}" />
+          {/if}
 
-        {#if $application.repository.branch}
-          <Tabs />
-        {/if}
-      </div>
+          {#if $application.repository.branch}
+            <Tabs />
+          {/if}
+        </div>
+      {/if}
     {/await}
   {/if}
 </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}
@@ -38,7 +38,7 @@
     </div>
   {:else}
     <button
-      class="button col-span-1 ml-2 bg-warmGray-800 hover:bg-warmGray-700 text-white"
+      class="button col-span-1 ml-2 bg-warmGray-800 hover:bg-warmGray-700 text-white py-2"
       on:click="{modifyGithubAppConfig}">Add repositories on Github</button
     >
   {/if}

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 (
-      latest.version.split(".").join("") >
-      packageJson.version.split(".").join("")
-    ) {
-      return true;
-    }
+      return compareVersions(latest.version,packageJson.version) === 1 ? true : false
   }
 </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: {