v1.0.17 (#59)

Webhook quickfix.

.dockerignore

@@ -1,3 +1,7 @@
+.DS_Store
 node_modules
-dist
-.routify
+/.svelte
+/build
+/functions
+.pnpm-store
+.pnpm-debug.log

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2019
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: andrasbacsai

.gitignore

@@ -1,10 +1,9 @@
-.vscode
-.idea
-node_modules
-dist
-dist-ssr
-.routify
+/node_modules
+/.svelte
+/.svelte-kit
+/.pnpm-store
+/build
+/functions
 .env
-yarn-error.log
-api/development/console.log
+.DS_Store
 .pnpm-debug.log

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,5 @@
+.svelte/**
+static/**
+build/**
+node_modules/**
+.svelte-kit/**

.prettierrc

@@ -1,14 +1,6 @@
 {
-    "arrowParens": "avoid",
-    "bracketSpacing": true,
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": false,
-    "tabWidth": 2,
-    "trailingComma": "all",
-    "svelteSortOrder" : "styles-scripts-markup",
-    "svelteStrictMode": true,
-    "svelteBracketNewLine": true,
-    "svelteAllowShorthand": true,
-    "plugins": ["prettier-plugin-svelte"]
-  }
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

README.md

@@ -1,97 +1,65 @@
-# About
+# Coolify
 
-https://andrasbacsai.com/farewell-netlify-and-heroku-after-3-days-of-coding
+An open-source, hassle-free, self-hostable Heroku & Netlify alternative.
 
-# Features
-- Deploy your Node.js and static sites just by pushing code to git.
-- Hassle-free installation and upgrade process.
-- One-click MongoDB, MySQL, PostgreSQL, CouchDB deployments!
+## Demo
 
-# Upcoming features
-- Backups & monitoring.
-- User analytics with privacy in mind.
-- And much more (see [Roadmap](https://github.com/coollabsio/coolify/projects/1)).
+[Small video](https://cdn.coollabs.io/assets/coolify/video/coolify.webm)
 
+## Installation
 
-# FAQ
-Q: What does Buildpack means?
+Installation is automated with the following command:
 
-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 👇)
+```bash
+/bin/bash -c "$(curl -fsSL https://get.coollabs.io/coolify/install.sh)"
+```
 
----
+## Features
 
-Q: How can I build a static site, like Next.js, Sapper (prerendered), etc ?
+You can deploy any of the following applications, databases and services easily.
 
-A: Use `static` builder and set your `Build command`.
+(constantly growing lists)
 
-# Screenshots
+### Applications
 
-[Login](https://coollabs.io/coolify/login.jpg)
+With Github integration
 
-[Applications](https://coollabs.io/coolify/applications.jpg)
+- Static sites
+- NodeJS
+- VueJS
+- NuxtJS
+- NextJS
+- React/Preact
+- NextJS
+- Gatsby
+- Svelte
+- PHP
+- Rust
+- or any custom dockerfile
 
-[Databases](https://coollabs.io/coolify/databases.jpg)
+### Databases
 
-[Configuration](https://coollabs.io/coolify/configuration.jpg)
+- MongoDB
+- MySQL
+- PostgreSQL
+- CouchDB
+- Redis
 
-[Settings](https://coollabs.io/coolify/settings.jpg)
+### Services
 
-[Logs](https://coollabs.io/coolify/logs.jpg)
+- [Plausible Analytics](https://plausible.io)
 
-# Getting Started
+## Support
 
-Automatically: `sh <(curl -fsSL https://get.coollabs.io/install.sh) coolify`
-
-Manually:
-### Requirements before installation
-- [Docker](https://docs.docker.com/engine/install/) version 20+  
-- Docker in [swarm mode enabled](https://docs.docker.com/engine/reference/commandline/swarm_init/) (should be set manually before installation)
-- A [MongoDB](https://docs.mongodb.com/manual/installation/) instance.
-  - We have a [simple installation](https://github.com/coollabsio/infrastructure/tree/main/mongo) if you need one
-- A configured DNS entry (see `.env.template`)
-- [Github App](https://docs.github.com/en/developers/apps/creating-a-github-app)
-
-  - GitHub App name: could be anything weird
-  - Homepage URL: https://yourdomain
-
-  Identifying and authorizing users: 
-  - Callback URL: https://yourdomain/api/v1/login/github/app
-  - Request user authorization (OAuth) during installation -> Check!
-
-  Webhook:
-  - Active -> Check!
-  - Webhook URL: https://yourdomain/api/v1/webhooks/deploy
-  - Webhook Secret: it should be super secret
-
-  Repository permissions:
-  - Contents: Read-only
-  - Metadata: Read-only
-  
-  User permissions: 
-  - Email: Read-only
-
-  Subscribe to events: 
-  - Push -> Check!
-
-### Installation
-- Clone this repository: `git clone git@github.com:coollabsio/coolify.git`
-- Set `.env` (see `.env.template`)
-- Installation: `bash install.sh all`
-
-## Manual updating process (You probably never need to do this!)
-### Update everything (proxy+coolify)
--  `bash install.sh all`
-
-### Update coolify only
--  `bash install.sh coolify`
-
-### Update proxy only
--  `bash install.sh proxy`
-
-# Contact
 - Twitter: [@andrasbacsai](https://twitter.com/andrasbacsai)
 - Telegram: [@andrasbacsai](https://t.me/andrasbacsai)
 - Email: [andras@coollabs.io](mailto:andras@coollabs.io)
+- Discord: [Invitation](https://discord.gg/xhBCC7eGKw)
+
+## Roadmap
+
+[See the Roadmap here](https://github.com/coollabsio/coolify/projects/1)
+
+## License
 
-# License
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Please see the [LICENSE](/LICENSE) file in our repository for the full text.

api/app.js

@@ -1,27 +0,0 @@
-module.exports = async function (fastify, opts) {
-  // Private routes
-  fastify.register(async function (server) {
-    if (process.env.NODE_ENV === 'production') server.register(require('./plugins/authentication'))
-    server.register(require('./routes/v1/upgrade'), { prefix: '/upgrade' })
-    server.register(require('./routes/v1/settings'), { prefix: '/settings' })
-    server.register(require('./routes/v1/dashboard'), { prefix: '/dashboard' })
-    server.register(require('./routes/v1/config'), { prefix: '/config' })
-    server.register(require('./routes/v1/application/remove'), { prefix: '/application/remove' })
-    server.register(require('./routes/v1/application/logs'), { prefix: '/application/logs' })
-    server.register(require('./routes/v1/application/check'), { prefix: '/application/check' })
-    server.register(require('./routes/v1/application/deploy'), { prefix: '/application/deploy' })
-    server.register(require('./routes/v1/application/deploy/logs'), { prefix: '/application/deploy/logs' })
-    server.register(require('./routes/v1/databases'), { prefix: '/databases' })
-  })
-  // Public routes
-  fastify.register(require('./routes/v1/verify'), { prefix: '/verify' })
-  fastify.register(require('./routes/v1/login/github'), {
-    prefix: '/login/github'
-  })
-  fastify.register(require('./routes/v1/webhooks/deploy'), {
-    prefix: '/webhooks/deploy'
-  })
-  fastify.register(require('./routes/v1/undead'), {
-    prefix: '/undead'
-  })
-}

api/development/mongodb.js

@@ -1,36 +0,0 @@
-const mongoose = require('mongoose')
-const { MongoMemoryServer } = require('mongodb-memory-server-core')
-
-const mongoServer = new MongoMemoryServer({
-  instance: {
-    port: 27017,
-    dbName: 'coolify',
-    storageEngine: 'wiredTiger'
-  },
-  binary: {
-    version: '4.4.3'
-
-  }
-})
-
-mongoose.Promise = Promise
-mongoServer.getUri().then((mongoUri) => {
-  const mongooseOpts = {
-    useNewUrlParser: true,
-    useUnifiedTopology: true
-  }
-
-  mongoose.connect(mongoUri, mongooseOpts)
-
-  mongoose.connection.on('error', (e) => {
-    if (e.message.code === 'ETIMEDOUT') {
-      console.log(e)
-      mongoose.connect(mongoUri, mongooseOpts)
-    }
-    console.log(e)
-  })
-
-  mongoose.connection.once('open', () => {
-    console.log(`Started in-memory mongodb ${mongoUri}`)
-  })
-})

api/libs/applications/build/container.js

@@ -1,34 +0,0 @@
-const packs = require('../../../packs')
-const { saveAppLog } = require('../../logging')
-const Deployment = require('../../../models/Deployment')
-
-module.exports = async function (configuration) {
-  const { id, organization, name, branch } = configuration.repository
-  const { domain } = configuration.publish
-  const deployId = configuration.general.deployId
-
-  const execute = packs[configuration.build.pack]
-  if (execute) {
-    try {
-      await Deployment.findOneAndUpdate(
-        { repoId: id, branch, deployId, organization, name, domain },
-        { repoId: id, branch, deployId, organization, name, domain, progress: 'inprogress' })
-      await saveAppLog('### Building application.', configuration)
-
-      await execute(configuration)
-
-      await saveAppLog('### Building done.', configuration)
-    } catch (error) {
-      await Deployment.findOneAndUpdate(
-        { repoId: id, branch, deployId, organization, name, domain },
-        { repoId: id, branch, deployId, organization, name, domain, progress: 'failed' })
-      if (error.stack) throw { error: error.stack, type: 'server' }
-      throw { error, type: 'app' }
-    }
-  } else {
-    await Deployment.findOneAndUpdate(
-      { repoId: id, branch, deployId, organization, name, domain },
-      { repoId: id, branch, deployId, organization, name, domain, progress: 'failed' })
-    throw { error: 'No buildpack found.', type: 'app' }
-  }
-}

api/libs/applications/cleanup/index.js

@@ -1,41 +0,0 @@
-const { docker } = require('../../docker')
-const { execShellAsync, delay } = require('../../common')
-const Deployment = require('../../../models/Deployment')
-
-async function purgeOldThings () {
-  try {
-    await docker.engine.pruneImages()
-    await docker.engine.pruneContainers()
-  } catch (error) {
-    throw { error, type: 'server' }
-  }
-}
-
-async function cleanup (configuration) {
-  const { id } = configuration.repository
-  const deployId = configuration.general.deployId
-  try {
-    // Cleanup stucked deployments.
-    const deployments = await Deployment.find({ repoId: id, deployId: { $ne: deployId }, progress: { $in: ['queued', 'inprogress'] } })
-    for (const deployment of deployments) {
-      await Deployment.findByIdAndUpdate(deployment._id, { $set: { progress: 'failed' } })
-    }
-  } catch (error) {
-    throw { error, type: 'server' }
-  }
-}
-
-async function deleteSameDeployments (configuration) {
-  try {
-    await (await docker.engine.listServices()).filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application').map(async s => {
-      const running = JSON.parse(s.Spec.Labels.configuration)
-      if (running.repository.id === configuration.repository.id && running.repository.branch === configuration.repository.branch) {
-        await execShellAsync(`docker stack rm ${s.Spec.Labels['com.docker.stack.namespace']}`)
-      }
-    })
-  } catch (error) {
-    throw { error, type: 'server' }
-  }
-}
-
-module.exports = { cleanup, deleteSameDeployments, purgeOldThings }

api/libs/applications/configuration.js

@@ -1,62 +0,0 @@
-const { uniqueNamesGenerator, adjectives, colors, animals } = require('unique-names-generator')
-const cuid = require('cuid')
-const { execShellAsync } = require('../common')
-const crypto = require('crypto')
-
-function getUniq () {
-  return uniqueNamesGenerator({ dictionaries: [adjectives, animals, colors], length: 2 })
-}
-
-function setDefaultConfiguration (configuration) {
-  try {
-    const nickname = getUniq()
-    const deployId = cuid()
-
-    const shaBase = JSON.stringify({ repository: configuration.repository })
-    const sha256 = crypto.createHash('sha256').update(shaBase).digest('hex')
-
-    configuration.build.container.name = sha256.slice(0, 15)
-
-    configuration.general.nickname = nickname
-    configuration.general.deployId = deployId
-    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.build.pack === 'static') {
-      if (!configuration.build.command.installation) configuration.build.command.installation = 'yarn install'
-      if (!configuration.build.directory) configuration.build.directory = '/'
-    }
-
-    if (configuration.build.pack === 'nodejs') {
-      if (!configuration.build.command.installation) configuration.build.command.installation = 'yarn install'
-      if (!configuration.build.directory) configuration.build.directory = '/'
-    }
-
-    return configuration
-  } catch (error) {
-    throw { error, type: 'server' }
-  }
-}
-
-async function updateServiceLabels (configuration, services) {
-  // In case of any failure during deployment, still update the current configuration.
-  const found = services.find(s => {
-    const config = JSON.parse(s.Spec.Labels.configuration)
-    if (config.repository.id === configuration.repository.id && config.repository.branch === configuration.repository.branch) {
-      return config
-    }
-    return null
-  })
-  if (found) {
-    const { ID } = found
-    try {
-      const Labels = { ...JSON.parse(found.Spec.Labels.configuration), ...configuration }
-      execShellAsync(`docker service update --label-add configuration='${JSON.stringify(Labels)}' --label-add com.docker.stack.image='${configuration.build.container.name}:${configuration.build.container.tag}' ${ID}`)
-    } catch (error) {
-      console.log(error)
-    }
-  }
-}
-module.exports = { setDefaultConfiguration, updateServiceLabels }

api/libs/applications/deploy/copyFiles.js

@@ -1,53 +0,0 @@
-const fs = require('fs').promises
-module.exports = async function (configuration) {
-  try {
-    // TODO: Do it better.
-    await fs.writeFile(`${configuration.general.workdir}/.dockerignore`, 'node_modules')
-    await fs.writeFile(
-      `${configuration.general.workdir}/nginx.conf`,
-      `user  nginx;
-        worker_processes  auto;
-        
-        error_log  /var/log/nginx/error.log warn;
-        pid        /var/run/nginx.pid;
-        
-        events {
-            worker_connections  1024;
-        }
-        
-        http {
-            include       /etc/nginx/mime.types;
-        
-            access_log      off;
-            sendfile        on;
-            #tcp_nopush     on;
-            keepalive_timeout  65;
-
-            server {
-                listen       80;
-                server_name  localhost;
-                
-                location / {
-                    root   /usr/share/nginx/html;
-                    index  index.html;
-                    try_files $uri $uri/index.html $uri/ /index.html =404;
-                }
-        
-                error_page  404              /50x.html;
-        
-                # redirect server error pages to the static page /50x.html
-                #
-                error_page   500 502 503 504  /50x.html;
-                location = /50x.html {
-                    root   /usr/share/nginx/html;
-                }  
-        
-            }
-        
-        }
-        `
-    )
-  } catch (error) {
-    throw { error, type: 'server' }
-  }
-}

api/libs/applications/deploy/deploy.js

@@ -1,97 +0,0 @@
-const yaml = require('js-yaml')
-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 {
-    const generateEnvs = {}
-    for (const secret of configuration.publish.secrets) {
-      generateEnvs[secret.name] = secret.value
-    }
-    const containerName = configuration.build.container.name
-    const stack = {
-      version: '3.8',
-      services: {
-        [containerName]: {
-          image: `${configuration.build.container.name}:${configuration.build.container.tag}`,
-          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'
-            },
-            labels: [
-              'managedBy=coolify',
-              'type=application',
-              'configuration=' + JSON.stringify(configuration),
-              'traefik.enable=true',
-              'traefik.http.services.' +
-              configuration.build.container.name +
-              `.loadbalancer.server.port=${configuration.publish.port}`,
-              'traefik.http.routers.' +
-              configuration.build.container.name +
-              '.entrypoints=websecure',
-              'traefik.http.routers.' +
-              configuration.build.container.name +
-              '.rule=Host(`' +
-              configuration.publish.domain +
-              '`) && PathPrefix(`' +
-              configuration.publish.path +
-              '`)',
-              'traefik.http.routers.' +
-              configuration.build.container.name +
-              '.tls.certresolver=letsencrypt',
-              'traefik.http.routers.' +
-              configuration.build.container.name +
-              '.middlewares=global-compress'
-            ]
-          }
-        }
-      },
-      networks: {
-        [`${docker.network}`]: {
-          external: true
-        }
-      }
-    }
-    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) {
-      // 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')
-      await deleteSameDeployments(configuration)
-      await execShellAsync(
-        `cat ${configuration.general.workdir}/stack.yml | docker stack deploy --prune -c - ${containerName}`
-      )
-    }
-
-    await saveAppLog('### Published done!', configuration)
-  } catch (error) {
-    await saveAppLog(`Error occured during deployment: ${error.message}`, configuration)
-    throw { error, type: 'server' }
-  }
-}

api/libs/applications/github/cloneRepository.js

@@ -1,44 +0,0 @@
-const jwt = require('jsonwebtoken')
-const axios = require('axios')
-const { execShellAsync, cleanupTmp } = require('../../common')
-
-module.exports = async function (configuration) {
-  const { workdir } = configuration.general
-  const { organization, name, branch } = configuration.repository
-  const github = configuration.github
-
-  const githubPrivateKey = process.env.GITHUB_APP_PRIVATE_KEY.replace(/\\n/g, '\n').replace(/"/g, '')
-
-  const payload = {
-    iat: Math.round(new Date().getTime() / 1000),
-    exp: Math.round(new Date().getTime() / 1000 + 60),
-    iss: parseInt(github.app.id)
-  }
-
-  try {
-    const jwtToken = jwt.sign(payload, githubPrivateKey, {
-      algorithm: 'RS256'
-    })
-    const accessToken = await axios({
-      method: 'POST',
-      url: `https://api.github.com/app/installations/${github.installation.id}/access_tokens`,
-      data: {},
-      headers: {
-        Authorization: 'Bearer ' + jwtToken,
-        Accept: 'application/vnd.github.machine-man-preview+json'
-      }
-    })
-    await execShellAsync(
-      `mkdir -p ${workdir} && git clone -q -b ${branch} https://x-access-token:${accessToken.data.token}@github.com/${organization}/${name}.git ${workdir}/`
-    )
-    configuration.build.container.tag = (
-      await execShellAsync(`cd ${configuration.general.workdir}/ && git rev-parse HEAD`)
-    )
-      .replace('\n', '')
-      .slice(0, 7)
-  } catch (error) {
-    cleanupTmp(workdir)
-    if (error.stack) console.log(error.stack)
-    throw { error, type: 'server' }
-  }
-}

api/libs/applications/index.js

@@ -1,44 +0,0 @@
-const dayjs = require('dayjs')
-
-const { saveServerLog } = require('../logging')
-const { cleanupTmp } = require('../common')
-
-const { saveAppLog } = require('../logging')
-const copyFiles = require('./deploy/copyFiles')
-const buildContainer = require('./build/container')
-const deploy = require('./deploy/deploy')
-const Deployment = require('../../models/Deployment')
-const { cleanup, purgeOldThings } = require('./cleanup')
-const { updateServiceLabels } = require('./configuration')
-
-async function queueAndBuild (configuration, services, configChanged, imageChanged) {
-  const { id, organization, name, branch } = configuration.repository
-  const { domain } = configuration.publish
-  const { deployId, nickname, workdir } = configuration.general
-  try {
-    await new Deployment({
-      repoId: id, branch, deployId, domain, organization, name, nickname
-    }).save()
-    await saveAppLog(`${dayjs().format('YYYY-MM-DD HH:mm:ss.SSS')} Queued.`, configuration)
-    await copyFiles(configuration)
-    await buildContainer(configuration)
-    await deploy(configuration, configChanged, imageChanged)
-    await Deployment.findOneAndUpdate(
-      { repoId: id, branch, deployId, organization, name, domain },
-      { repoId: id, branch, deployId, organization, name, domain, progress: 'done' })
-    await updateServiceLabels(configuration, services)
-    cleanupTmp(workdir)
-    await purgeOldThings()
-  } catch (error) {
-    await cleanup(configuration)
-    cleanupTmp(workdir)
-    const { type } = error.error
-    if (type === 'app') {
-      await saveAppLog(error.error, configuration, true)
-    } else {
-      await saveServerLog({ event: error.error, configuration })
-    }
-  }
-}
-
-module.exports = { queueAndBuild }

api/libs/common.js

@@ -1,94 +0,0 @@
-const crypto = require('crypto')
-const shell = require('shelljs')
-const jsonwebtoken = require('jsonwebtoken')
-const { docker } = require('./docker')
-const User = require('../models/User')
-const algorithm = 'aes-256-cbc'
-const key = process.env.SECRETS_ENCRYPTION_KEY
-
-function delay (t) {
-  return new Promise(function (resolve) {
-    setTimeout(function () {
-      resolve('OK')
-    }, t)
-  })
-}
-
-async function verifyUserId (authorization) {
-  const token = authorization.split(' ')[1]
-  const verify = jsonwebtoken.verify(token, process.env.JWT_SIGN_KEY)
-  const found = await User.findOne({ uid: verify.jti })
-  if (found) {
-    return true
-  } else {
-    return false
-  }
-}
-function execShellAsync (cmd, opts = {}) {
-  try {
-    return new Promise(function (resolve, reject) {
-      shell.config.silent = true
-      shell.exec(cmd, opts, function (code, stdout, stderr) {
-        if (code !== 0) return reject(new Error(stderr))
-        return resolve(stdout)
-      })
-    })
-  } catch (error) {
-    return new Error('Oops')
-  }
-}
-function cleanupTmp (dir) {
-  if (dir !== '/') shell.rm('-fr', dir)
-}
-
-async function checkImageAvailable (name) {
-  let cacheAvailable = false
-  try {
-    await docker.engine.getImage(name).get()
-    cacheAvailable = true
-  } catch (e) {
-    // Cache image not found
-  }
-  return cacheAvailable
-}
-
-function encryptData (text) {
-  const iv = crypto.randomBytes(16)
-  const cipher = crypto.createCipheriv(algorithm, Buffer.from(key), iv)
-  let encrypted = cipher.update(text)
-  encrypted = Buffer.concat([encrypted, cipher.final()])
-  return { iv: iv.toString('hex'), encryptedData: encrypted.toString('hex') }
-}
-
-function decryptData (text) {
-  const iv = Buffer.from(text.iv, 'hex')
-  const encryptedText = Buffer.from(text.encryptedData, 'hex')
-  const decipher = crypto.createDecipheriv(algorithm, Buffer.from(key), iv)
-  let decrypted = decipher.update(encryptedText)
-  decrypted = Buffer.concat([decrypted, decipher.final()])
-  return decrypted.toString()
-}
-
-function createToken (payload) {
-  const { uuid } = payload
-  return jsonwebtoken.sign({}, process.env.JWT_SIGN_KEY, {
-    expiresIn: 15778800,
-    algorithm: 'HS256',
-    audience: 'coolify',
-    issuer: 'coolify',
-    jwtid: uuid,
-    subject: `User:${uuid}`,
-    notBefore: -1000
-  })
-}
-
-module.exports = {
-  delay,
-  createToken,
-  execShellAsync,
-  cleanupTmp,
-  checkImageAvailable,
-  encryptData,
-  decryptData,
-  verifyUserId
-}

api/libs/docker.js

@@ -1,31 +0,0 @@
-const Dockerode = require('dockerode')
-const { saveAppLog } = require('./logging')
-
-const docker = {
-  engine: new Dockerode({
-    socketPath: process.env.DOCKER_ENGINE
-  }),
-  network: process.env.DOCKER_NETWORK
-}
-async function streamEvents (stream, configuration) {
-  try {
-    await new Promise((resolve, reject) => {
-      docker.engine.modem.followProgress(stream, onFinished, onProgress)
-      function onFinished (err, res) {
-        if (err) reject(err)
-        resolve(res)
-      }
-      function onProgress (event) {
-        if (event.error) {
-          reject(event.error)
-          return
-        }
-        saveAppLog(event.stream, configuration)
-      }
-    })
-  } catch (error) {
-    throw { error, type: 'app' }
-  }
-}
-
-module.exports = { streamEvents, docker }

api/libs/logging.js

@@ -1,55 +0,0 @@
-const ApplicationLog = require('../models/Logs/Application')
-const ServerLog = require('../models/Logs/Server')
-const dayjs = require('dayjs')
-
-function generateTimestamp () {
-  return `${dayjs().format('YYYY-MM-DD HH:mm:ss.SSS')} `
-}
-
-async function saveAppLog (event, configuration, isError) {
-  try {
-    const deployId = configuration.general.deployId
-    const repoId = configuration.repository.id
-    const branch = configuration.repository.branch
-    if (isError) {
-      // console.log(event, config, isError)
-      let clearedEvent = null
-
-      if (event.error) clearedEvent = '[ERROR] ' + generateTimestamp() + event.error.replace(/(\r\n|\n|\r)/gm, '')
-      else if (event) clearedEvent = '[ERROR] ' + generateTimestamp() + event.replace(/(\r\n|\n|\r)/gm, '')
-
-      try {
-        await new ApplicationLog({ repoId, branch, deployId, event: clearedEvent }).save()
-      } catch (error) {
-        console.log(error)
-      }
-    } else {
-      if (event && event !== '\n') {
-        const clearedEvent = '[INFO] ' + generateTimestamp() + event.replace(/(\r\n|\n|\r)/gm, '')
-        try {
-          await new ApplicationLog({ repoId, branch, deployId, event: clearedEvent }).save()
-        } catch (error) {
-          console.log(error)
-        }
-      }
-    }
-  } catch (error) {
-    console.log(error)
-    return error
-  }
-}
-
-async function saveServerLog ({ event, configuration, type }) {
-  if (configuration) {
-    const deployId = configuration.general.deployId
-    const repoId = configuration.repository.id
-    const branch = configuration.repository.branch
-    await new ApplicationLog({ repoId, branch, deployId, event: `[SERVER ERROR 😖]: ${event}` }).save()
-  }
-  await new ServerLog({ event, type }).save()
-}
-
-module.exports = {
-  saveAppLog,
-  saveServerLog
-}

api/models/Deployment.js

@@ -1,16 +0,0 @@
-const mongoose = require('mongoose')
-const deploymentSchema = mongoose.Schema(
-  {
-    deployId: { type: String, required: true },
-    nickname: { type: String, required: true },
-    repoId: { type: Number, required: true },
-    organization: { type: String, required: true },
-    name: { type: String, required: true },
-    branch: { type: String, required: true },
-    domain: { type: String, required: true },
-    progress: { type: String, require: true, default: 'queued' }
-  },
-  { timestamps: true }
-)
-
-module.exports = mongoose.model('deployment', deploymentSchema)

api/models/Logs/Application.js

@@ -1,10 +0,0 @@
-const mongoose = require('mongoose')
-const logSchema = mongoose.Schema(
-  {
-    deployId: { type: String, required: true },
-    event: { type: String, required: true }
-  },
-  { timestamps: { createdAt: 'createdAt', updatedAt: false } }
-)
-
-module.exports = mongoose.model('logs-application', logSchema)

api/models/Logs/Server.js

@@ -1,13 +0,0 @@
-const mongoose = require('mongoose')
-const { version } = require('../../../package.json')
-const logSchema = mongoose.Schema(
-  {
-    version: { type: String, required: true, default: version },
-    type: { type: String, required: true, enum: ['API', 'UPGRADE-P-1', 'UPGRADE-P-2'], default: 'API' },
-    event: { type: String, required: true },
-    seen: { type: Boolean, required: true, default: false }
-  },
-  { timestamps: { createdAt: 'createdAt', updatedAt: false } }
-)
-
-module.exports = mongoose.model('logs-server', logSchema)

api/models/Settings.js

@@ -1,11 +0,0 @@
-const mongoose = require('mongoose')
-
-const settingsSchema = mongoose.Schema(
-  {
-    applicationName: { type: String, required: true, default: 'coolify' },
-    allowRegistration: { type: Boolean, required: true, default: false }
-  },
-  { timestamps: true }
-)
-
-module.exports = mongoose.model('settings', settingsSchema)

api/models/User.js

@@ -1,12 +0,0 @@
-const mongoose = require('mongoose')
-
-const userSchema = mongoose.Schema(
-  {
-    email: { type: String, required: true },
-    avatar: { type: String },
-    uid: { type: String, required: true }
-  },
-  { timestamps: true }
-)
-
-module.exports = mongoose.model('user', userSchema)

api/packs/helpers.js

@@ -1,28 +0,0 @@
-const fs = require('fs').promises
-const { streamEvents, docker } = require('../libs/docker')
-
-async function buildImage (configuration) {
-  let dockerFile = `
-                # build
-                FROM node:lts
-                WORKDIR /usr/src/app
-                COPY package*.json .
-                `
-  if (configuration.build.command.installation) {
-    dockerFile += `RUN ${configuration.build.command.installation}
-                `
-  }
-  dockerFile += `COPY . .
-            RUN ${configuration.build.command.build}`
-
-  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)
-}
-
-module.exports = {
-  buildImage
-}

api/packs/index.js

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

api/packs/nodejs/index.js

@@ -1,32 +0,0 @@
-const fs = require('fs').promises
-const { buildImage } = require('../helpers')
-const { streamEvents, docker } = require('../../libs/docker')
-
-module.exports = async function (configuration) {
-  if (configuration.build.command.build) await buildImage(configuration)
-
-  let dockerFile = `# production stage
-      FROM node:lts
-      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`
-  } else {
-    dockerFile += 'COPY . ./'
-  }
-  if (configuration.build.command.installation) {
-    dockerFile += `
-      RUN ${configuration.build.command.installation}
-      `
-  }
-  dockerFile += `
-        EXPOSE ${configuration.publish.port}
-        CMD [ "yarn", "start" ]`
-
-  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

@@ -1,28 +0,0 @@
-const fs = require('fs').promises
-const { buildImage } = require('../helpers')
-const { streamEvents, docker } = require('../../libs/docker')
-
-module.exports = async function (configuration) {
-  if (configuration.build.command.build) await buildImage(configuration)
-
-  let dockerFile = `# production stage
-    FROM nginx:stable-alpine
-    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`
-  } else {
-    dockerFile += 'COPY . /usr/share/nginx/html'
-  }
-
-  dockerFile += `
-      EXPOSE 80
-      CMD ["nginx", "-g", "daemon off;"]`
-  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/plugins/authentication.js

@@ -1,21 +0,0 @@
-const fp = require('fastify-plugin')
-const User = require('../models/User')
-module.exports = fp(async function (fastify, options, next) {
-  fastify.register(require('fastify-jwt'), {
-    secret: fastify.config.JWT_SIGN_KEY
-  })
-  fastify.addHook('onRequest', async (request, reply) => {
-    try {
-      const { jti } = await request.jwtVerify()
-      const found = await User.findOne({ uid: jti })
-      if (found) {
-        return true
-      } else {
-        reply.code(401).send('Unauthorized')
-      }
-    } catch (err) {
-      reply.code(401).send('Unauthorized')
-    }
-  })
-  next()
-})

api/routes/v1/application/check.js

@@ -1,35 +0,0 @@
-
-const { verifyUserId } = require('../../../libs/common')
-const { setDefaultConfiguration } = require('../../../libs/applications/configuration')
-const { docker } = require('../../../libs/docker')
-
-module.exports = async function (fastify) {
-  fastify.post('/', async (request, reply) => {
-    if (!await verifyUserId(request.headers.authorization)) {
-      reply.code(500).send({ error: 'Invalid request' })
-      return
-    }
-    const configuration = setDefaultConfiguration(request.body)
-
-    const services = (await docker.engine.listServices()).filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application')
-    let foundDomain = false
-
-    for (const service of services) {
-      const running = JSON.parse(service.Spec.Labels.configuration)
-      if (running) {
-        if (
-          running.publish.domain === configuration.publish.domain &&
-          running.repository.id !== configuration.repository.id
-        ) {
-          foundDomain = true
-        }
-      }
-    }
-    if (fastify.config.DOMAIN === configuration.publish.domain) foundDomain = true
-    if (foundDomain) {
-      reply.code(500).send({ message: 'Domain already in use.' })
-      return
-    }
-    return { message: 'OK' }
-  })
-}

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

@@ -1,117 +0,0 @@
-
-const { verifyUserId, cleanupTmp, execShellAsync } = require('../../../../libs/common')
-const Deployment = require('../../../../models/Deployment')
-const { queueAndBuild } = require('../../../../libs/applications')
-const { setDefaultConfiguration } = require('../../../../libs/applications/configuration')
-const { docker } = require('../../../../libs/docker')
-const cloneRepository = require('../../../../libs/applications/github/cloneRepository')
-
-module.exports = async function (fastify) {
-  // const postSchema = {
-  //     body: {
-  //         type: "object",
-  //         properties: {
-  //             ref: { type: "string" },
-  //             repository: {
-  //                 type: "object",
-  //                 properties: {
-  //                     id: { type: "number" },
-  //                     full_name: { type: "string" },
-  //                 },
-  //                 required: ["id", "full_name"],
-  //             },
-  //             installation: {
-  //                 type: "object",
-  //                 properties: {
-  //                     id: { type: "number" },
-  //                 },
-  //                 required: ["id"],
-  //             },
-  //         },
-  //         required: ["ref", "repository", "installation"],
-  //     },
-  // };
-  fastify.post('/', async (request, reply) => {
-    if (!await verifyUserId(request.headers.authorization)) {
-      reply.code(500).send({ error: 'Invalid request' })
-      return
-    }
-
-    const configuration = setDefaultConfiguration(request.body)
-
-    const services = (await docker.engine.listServices()).filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application')
-
-    await cloneRepository(configuration)
-
-    let foundService = false
-    let foundDomain = false
-    let configChanged = false
-    let imageChanged = false
-
-    let forceUpdate = false
-
-    for (const service of services) {
-      const running = JSON.parse(service.Spec.Labels.configuration)
-      if (running) {
-        if (
-          running.publish.domain === configuration.publish.domain &&
-          running.repository.id !== configuration.repository.id
-        ) {
-          foundDomain = true
-        }
-        if (running.repository.id === configuration.repository.id && running.repository.branch === configuration.repository.branch) {
-          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
-
-          foundService = true
-          const runningWithoutContainer = JSON.parse(JSON.stringify(running))
-          delete runningWithoutContainer.build.container
-
-          const configurationWithoutContainer = JSON.parse(JSON.stringify(configuration))
-          delete configurationWithoutContainer.build.container
-
-          // If only the configuration changed
-          if (JSON.stringify(runningWithoutContainer.build) !== JSON.stringify(configurationWithoutContainer.build) || JSON.stringify(runningWithoutContainer.publish) !== JSON.stringify(configurationWithoutContainer.publish)) configChanged = true
-          // If only the image changed
-          if (running.build.container.tag !== configuration.build.container.tag) imageChanged = true
-          // If build pack changed, forceUpdate the service
-          if (running.build.pack !== configuration.build.pack) forceUpdate = true
-        }
-      }
-    }
-    if (foundDomain) {
-      cleanupTmp(configuration.general.workdir)
-      reply.code(500).send({ message: 'Domain already in use.' })
-      return
-    }
-    if (forceUpdate) {
-      imageChanged = false
-      configChanged = false
-    } else {
-      if (foundService && !imageChanged && !configChanged) {
-        cleanupTmp(configuration.general.workdir)
-        reply.code(500).send({ message: 'Nothing changed, no need to redeploy.' })
-        return
-      }
-    }
-
-    const alreadyQueued = await Deployment.find({
-      repoId: configuration.repository.id,
-      branch: configuration.repository.branch,
-      organization: configuration.repository.organization,
-      name: configuration.repository.name,
-      domain: configuration.publish.domain,
-      progress: { $in: ['queued', 'inprogress'] }
-    })
-
-    if (alreadyQueued.length > 0) {
-      reply.code(200).send({ message: 'Already in the queue.' })
-      return
-    }
-
-    queueAndBuild(configuration, services, configChanged, imageChanged)
-
-    reply.code(201).send({ message: 'Deployment queued.', nickname: configuration.general.nickname, name: configuration.build.container.name })
-  })
-}

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

@@ -1,62 +0,0 @@
-const ApplicationLog = require('../../../../models/Logs/Application')
-const Deployment = require('../../../../models/Deployment')
-const dayjs = require('dayjs')
-const utc = require('dayjs/plugin/utc')
-const relativeTime = require('dayjs/plugin/relativeTime')
-dayjs.extend(utc)
-dayjs.extend(relativeTime)
-
-module.exports = async function (fastify) {
-  const getLogSchema = {
-    querystring: {
-      type: 'object',
-      properties: {
-        repoId: { type: 'string' },
-        branch: { type: 'string' }
-      },
-      required: ['repoId', 'branch']
-    }
-  }
-  fastify.get('/', { schema: getLogSchema }, async (request, reply) => {
-    const { repoId, branch, page } = request.query
-    const onePage = 5
-    const show = Number(page) * onePage || 5
-    const deploy = await Deployment.find({ repoId, branch })
-      .select('-_id -__v -repoId')
-      .sort({ createdAt: 'desc' })
-      .limit(show)
-
-    const finalLogs = deploy.map(d => {
-      const finalLogs = { ...d._doc }
-
-      const updatedAt = dayjs(d.updatedAt).utc()
-
-      finalLogs.took = updatedAt.diff(dayjs(d.createdAt)) / 1000
-      finalLogs.since = updatedAt.fromNow()
-
-      return finalLogs
-    })
-    return finalLogs
-  })
-
-  fastify.get('/:deployId', async (request, reply) => {
-    const { deployId } = request.params
-    try {
-      const logs = await ApplicationLog.find({ deployId })
-        .select('-_id -__v')
-        .sort({ createdAt: 'asc' })
-
-      const deploy = await Deployment.findOne({ deployId })
-        .select('-_id -__v')
-        .sort({ createdAt: 'desc' })
-
-      const finalLogs = {}
-      finalLogs.progress = deploy.progress
-      finalLogs.events = logs.map(log => log.event)
-      finalLogs.human = dayjs(deploy.updatedAt).from(dayjs(deploy.updatedAt))
-      return finalLogs
-    } catch (e) {
-      throw new Error('No logs found')
-    }
-  })
-}

api/routes/v1/application/logs.js

@@ -1,10 +0,0 @@
-const { docker } = require('../../../libs/docker')
-
-module.exports = async function (fastify) {
-  fastify.get('/', async (request, reply) => {
-    const { name } = request.query
-    const service = await docker.engine.getService(`${name}_${name}`)
-    const logs = (await service.logs({ stdout: true, stderr: true, timestamps: true })).toString().split('\n').map(l => l.slice(8)).filter((a) => a)
-    return { logs }
-  })
-}

api/routes/v1/application/remove.js

@@ -1,35 +0,0 @@
-const { docker } = require('../../../libs/docker')
-const { execShellAsync } = require('../../../libs/common')
-const ApplicationLog = require('../../../models/Logs/Application')
-const Deployment = require('../../../models/Deployment')
-
-module.exports = async function (fastify) {
-  fastify.post('/', async (request, reply) => {
-    const { organization, name, branch } = request.body
-    let found = false
-    try {
-      (await docker.engine.listServices()).filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application').map(s => {
-        const running = JSON.parse(s.Spec.Labels.configuration)
-        if (running.repository.organization === organization &&
-          running.repository.name === name &&
-          running.repository.branch === branch) {
-          found = running
-        }
-        return null
-      })
-      if (found) {
-        const deploys = await Deployment.find({ organization, branch, name })
-        for (const deploy of deploys) {
-          await ApplicationLog.deleteMany({ deployId: deploy.deployId })
-          await Deployment.deleteMany({ deployId: deploy.deployId })
-        }
-        await execShellAsync(`docker stack rm ${found.build.container.name}`)
-        reply.code(200).send({ organization, name, branch })
-      } else {
-        reply.code(500).send({ message: 'Nothing to do.' })
-      }
-    } catch (error) {
-      reply.code(500).send({ message: 'Nothing to do.' })
-    }
-  })
-}

api/routes/v1/config.js

@@ -1,103 +0,0 @@
-const { docker } = require('../../libs/docker')
-
-module.exports = async function (fastify) {
-  // const getConfig = {
-  //   querystring: {
-  //     type: 'object',
-  //     properties: {
-  //       repoId: { type: 'number' },
-  //       branch: { type: 'string' }
-  //     },
-  //     required: ['repoId', 'branch']
-  //   }
-  // }
-
-  // const saveConfig = {
-  //   body: {
-  //     type: 'object',
-  //     properties: {
-  //       build: {
-  //         type: 'object',
-  //         properties: {
-  //           baseDir: { type: 'string' },
-  //           installCmd: { type: 'string' },
-  //           buildCmd: { type: 'string' }
-  //         },
-  //         required: ['baseDir', 'installCmd', 'buildCmd']
-  //       },
-  //       publish: {
-  //         type: 'object',
-  //         properties: {
-  //           publishDir: { type: 'string' },
-  //           domain: { type: 'string' },
-  //           pathPrefix: { type: 'string' },
-  //           port: { type: 'number' }
-  //         },
-  //         required: ['publishDir', 'domain', 'pathPrefix', 'port']
-  //       },
-  //       previewDeploy: { type: 'boolean' },
-  //       branch: { type: 'string' },
-  //       repoId: { type: 'number' },
-  //       buildPack: { type: 'string' },
-  //       fullName: { type: 'string' },
-  //       installationId: { type: 'number' }
-  //     },
-  //     required: ['build', 'publish', 'previewDeploy', 'branch', 'repoId', 'buildPack', 'fullName', 'installationId']
-  //   }
-  // }
-
-  // fastify.get("/all", async (request, reply) => {
-  //   return await Config.find().select("-_id -__v");
-  // });
-
-  // fastify.get("/", { schema: getConfig }, async (request, reply) => {
-  //   const { repoId, branch } = request.query;
-  //   return await Config.findOne({ repoId, branch }).select("-_id -__v");
-  // });
-
-  fastify.post('/', async (request, reply) => {
-    const { name, organization, branch } = request.body
-    const services = await docker.engine.listServices()
-    const applications = services.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application')
-
-    const found = applications.find(r => {
-      const configuration = r.Spec.Labels.configuration ? JSON.parse(r.Spec.Labels.configuration) : null
-      if (branch) {
-        if (configuration.repository.name === name && configuration.repository.organization === organization && configuration.repository.branch === branch) {
-          return r
-        }
-      } else {
-        if (configuration.repository.name === name && configuration.repository.organization === organization) {
-          return r
-        }
-      }
-      return null
-    })
-    if (found) {
-      return JSON.parse(found.Spec.Labels.configuration)
-    } else {
-      reply.code(500).send({ message: 'No configuration found.' })
-    }
-  })
-
-  // fastify.delete("/", async (request, reply) => {
-  //   const { repoId, branch } = request.body;
-
-  //   const deploys = await Deployment.find({ repoId, branch })
-  //   const found = deploys.filter(d => d.progress !== 'done' && d.progress !== 'failed')
-  //   if (found.length > 0) {
-  //     throw new Error('Deployment inprogress, cannot delete now.');
-  //   }
-
-  //   const config = await Config.findOneAndDelete({ repoId, branch })
-  //   for (const deploy of deploys) {
-  //     await ApplicationLog.findOneAndRemove({ deployId: deploy.deployId });
-  //   }
-  //   const secrets = await Secret.find({ repoId, branch });
-  //   for (const secret of secrets) {
-  //     await Secret.findByIdAndRemove(secret._id);
-  //   }
-  //   await execShellAsync(`docker stack rm ${config.containerName}`);
-  //   return { message: 'Deleted application and related configurations.' };
-  // });
-}

api/routes/v1/dashboard/index.js

@@ -1,55 +0,0 @@
-const { docker } = require('../../../libs/docker')
-const Deployment = require('../../../models/Deployment')
-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:
-        {
-          _id: {
-            repoId: '$repoId',
-            branch: '$branch'
-          },
-          createdAt: { $last: '$createdAt' },
-          progress: { $first: '$progress' }
-        }
-      }
-    ])
-
-    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
-        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
-      }
-    }
-  })
-}

api/routes/v1/databases/index.js

@@ -1,173 +0,0 @@
-const yaml = require('js-yaml')
-const fs = require('fs').promises
-const cuid = require('cuid')
-const { docker } = require('../../../libs/docker')
-const { execShellAsync } = require('../../../libs/common')
-
-const { uniqueNamesGenerator, adjectives, colors, animals } = require('unique-names-generator')
-const generator = require('generate-password')
-
-function getUniq () {
-  return uniqueNamesGenerator({ dictionaries: [adjectives, animals, colors], length: 2 })
-}
-module.exports = async function (fastify) {
-  fastify.get('/:deployId', async (request, reply) => {
-    const { deployId } = request.params
-    try {
-      const database = (await docker.engine.listServices()).find(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'database' && JSON.parse(r.Spec.Labels.configuration).general.deployId === deployId)
-      if (database) {
-        const jsonEnvs = {}
-        for (const d of database.Spec.TaskTemplate.ContainerSpec.Env) {
-          const s = d.split('=')
-          jsonEnvs[s[0]] = s[1]
-        }
-        const payload = {
-          config: JSON.parse(database.Spec.Labels.configuration),
-          envs: jsonEnvs
-        }
-        reply.code(200).send(payload)
-      } else {
-        throw new Error()
-      }
-    } catch (error) {
-      throw new Error('No database found?')
-    }
-  })
-
-  const postSchema = {
-    body: {
-      type: 'object',
-      properties: {
-        type: { type: 'string', enum: ['mongodb', 'postgresql', 'mysql', 'couchdb'] }
-      },
-      required: ['type']
-    }
-  }
-
-  fastify.post('/deploy', { schema: postSchema }, async (request, reply) => {
-    let { type, defaultDatabaseName } = request.body
-    const passwords = generator.generateMultiple(2, {
-      length: 24,
-      numbers: true,
-      strict: true
-    })
-    const usernames = generator.generateMultiple(2, {
-      length: 10,
-      numbers: true,
-      strict: true
-    })
-    // TODO: Query for existing db with the same name
-    const nickname = getUniq()
-
-    if (!defaultDatabaseName) defaultDatabaseName = nickname
-
-    reply.code(201).send({ message: 'Deploying.' })
-    // TODO: Persistent volume, custom inputs
-    const deployId = cuid()
-    const configuration = {
-      general: {
-        workdir: `/tmp/${deployId}`,
-        deployId,
-        nickname,
-        type
-      },
-      database: {
-        usernames,
-        passwords,
-        defaultDatabaseName
-      },
-      deploy: {
-        name: nickname
-      }
-    }
-    let generateEnvs = {}
-    let image = null
-    let volume = null
-    if (type === 'mongodb') {
-      generateEnvs = {
-        MONGODB_ROOT_PASSWORD: passwords[0],
-        MONGODB_USERNAME: usernames[0],
-        MONGODB_PASSWORD: passwords[1],
-        MONGODB_DATABASE: defaultDatabaseName
-      }
-      image = 'bitnami/mongodb:4.4'
-      volume = `${configuration.general.deployId}-${type}-data:/bitnami/mongodb`
-    } else if (type === 'postgresql') {
-      generateEnvs = {
-        POSTGRESQL_PASSWORD: passwords[0],
-        POSTGRESQL_USERNAME: usernames[0],
-        POSTGRESQL_DATABASE: defaultDatabaseName
-      }
-      image = 'bitnami/postgresql:13.2.0'
-      volume = `${configuration.general.deployId}-${type}-data:/bitnami/postgresql`
-    } else if (type === 'couchdb') {
-      generateEnvs = {
-        COUCHDB_PASSWORD: passwords[0],
-        COUCHDB_USER: usernames[0]
-      }
-      image = 'bitnami/couchdb:3'
-      volume = `${configuration.general.deployId}-${type}-data:/bitnami/couchdb`
-    } else if (type === 'mysql') {
-      generateEnvs = {
-        MYSQL_ROOT_PASSWORD: passwords[0],
-        MYSQL_ROOT_USER: usernames[0],
-        MYSQL_USER: usernames[1],
-        MYSQL_PASSWORD: passwords[1],
-        MYSQL_DATABASE: defaultDatabaseName
-      }
-      image = 'bitnami/mysql:8.0'
-      volume = `${configuration.general.deployId}-${type}-data:/bitnami/mysql/data`
-    }
-
-    const stack = {
-      version: '3.8',
-      services: {
-        [configuration.general.deployId]: {
-          image,
-          networks: [`${docker.network}`],
-          environment: generateEnvs,
-          volumes: [volume],
-          deploy: {
-            replicas: 1,
-            update_config: {
-              parallelism: 0,
-              delay: '10s',
-              order: 'start-first'
-            },
-            rollback_config: {
-              parallelism: 0,
-              delay: '10s',
-              order: 'start-first'
-            },
-            labels: [
-              'managedBy=coolify',
-              'type=database',
-              'configuration=' + JSON.stringify(configuration)
-            ]
-          }
-        }
-      },
-      networks: {
-        [`${docker.network}`]: {
-          external: true
-        }
-      },
-      volumes: {
-        [`${configuration.general.deployId}-${type}-data`]: {
-          external: true
-        }
-      }
-    }
-    await execShellAsync(`mkdir -p ${configuration.general.workdir}`)
-    await fs.writeFile(`${configuration.general.workdir}/stack.yml`, yaml.dump(stack))
-    await execShellAsync(
-            `cat ${configuration.general.workdir}/stack.yml | docker stack deploy -c - ${configuration.general.deployId}`
-    )
-  })
-
-  fastify.delete('/:dbName', async (request, reply) => {
-    const { dbName } = request.params
-    await execShellAsync(`docker stack rm ${dbName}`)
-    reply.code(200).send({})
-  })
-}

api/routes/v1/login/github.js

@@ -1,121 +0,0 @@
-const axios = require('axios')
-const User = require('../../../models/User')
-const Settings = require('../../../models/Settings')
-const cuid = require('cuid')
-const mongoose = require('mongoose')
-const jwt = require('jsonwebtoken')
-module.exports = async function (fastify) {
-  const githubCodeSchema = {
-    schema: {
-      querystring: {
-        type: 'object',
-        properties: {
-          code: { type: 'string' }
-        },
-        required: ['code']
-      }
-    }
-  }
-  fastify.get('/app', { schema: githubCodeSchema }, async (request, reply) => {
-    const { code } = request.query
-    try {
-      const { data } = await axios({
-        method: 'post',
-        url: `https://github.com/login/oauth/access_token?client_id=${fastify.config.VITE_GITHUB_APP_CLIENTID}&client_secret=${fastify.config.GITHUB_APP_CLIENT_SECRET}&code=${code}`,
-        headers: {
-          accept: 'application/json'
-        }
-      })
-
-      const token = data.access_token
-      const githubAxios = axios.create({
-        baseURL: 'https://api.github.com'
-      })
-
-      githubAxios.defaults.headers.common.Accept = 'Application/json'
-      githubAxios.defaults.headers.common.Authorization = `token ${token}`
-
-      try {
-        let uid = cuid()
-        const { avatar_url } = (await githubAxios.get('/user')).data // eslint-disable-line
-        const email = (await githubAxios.get('/user/emails')).data.filter(
-          (e) => e.primary
-        )[0].email
-        const settings = await Settings.findOne({ applicationName: 'coolify' })
-        const registeredUsers = await User.find().countDocuments()
-        const foundUser = await User.findOne({ email })
-        if (foundUser) {
-          await User.findOneAndUpdate(
-            { email },
-            { avatar: avatar_url },
-            { upsert: true, new: true }
-          )
-          uid = foundUser.uid
-        } else {
-          if (registeredUsers === 0) {
-            const newUser = new User({
-              _id: new mongoose.Types.ObjectId(),
-              email,
-              avatar: avatar_url,
-              uid
-            })
-            try {
-              await newUser.save()
-            } catch (e) {
-              console.log(e)
-              reply.code(500).send({ success: false, error: e })
-              return
-            }
-          } else {
-            if (!settings && registeredUsers > 0) {
-              reply.code(500).send('Registration disabled, enable it in settings.')
-            } else {
-              if (!settings.allowRegistration) {
-                reply.code(500).send('You are not allowed here!')
-              } else {
-                const newUser = new User({
-                  _id: new mongoose.Types.ObjectId(),
-                  email,
-                  avatar: avatar_url,
-                  uid
-                })
-                try {
-                  await newUser.save()
-                } catch (e) {
-                  console.log(e)
-                  reply.code(500).send({ success: false, error: e })
-                  return
-                }
-              }
-            }
-          }
-        }
-        const jwtToken = jwt.sign({}, fastify.config.JWT_SIGN_KEY, {
-          expiresIn: 15778800,
-          algorithm: 'HS256',
-          audience: 'coolLabs',
-          issuer: 'coolLabs',
-          jwtid: uid,
-          subject: `User:${uid}`,
-          notBefore: -1000
-        })
-        reply
-          .code(200)
-          .redirect(
-            302,
-            `/api/v1/login/github/success?jwtToken=${jwtToken}&ghToken=${token}`
-          )
-      } catch (e) {
-        console.log(e)
-        reply.code(500).send({ success: false, error: e })
-        return
-      }
-    } catch (error) {
-      console.log(error)
-      reply.code(500).send({ success: false, error: error.message })
-    }
-  })
-  fastify.get('/success', async (request, reply) => {
-    return reply.sendFile('bye.html')
-  })
-}

api/routes/v1/settings/index.js

@@ -1,44 +0,0 @@
-const Settings = require('../../../models/Settings')
-module.exports = async function (fastify) {
-  const applicationName = 'coolify'
-  const postSchema = {
-    body: {
-      type: 'object',
-      properties: {
-        allowRegistration: { type: 'boolean' }
-      },
-      required: ['allowRegistration']
-    }
-  }
-
-  fastify.get('/', async (request, reply) => {
-    try {
-      let settings = await Settings.findOne({ applicationName }).select('-_id -__v')
-      // TODO: Should do better
-      if (!settings) {
-        settings = {
-          applicationName,
-          allowRegistration: false
-        }
-      }
-      return {
-        settings
-      }
-    } catch (error) {
-      throw new Error(error)
-    }
-  })
-
-  fastify.post('/', { schema: postSchema }, async (request, reply) => {
-    try {
-      const settings = await Settings.findOneAndUpdate(
-        { applicationName },
-        { applicationName, ...request.body },
-        { upsert: true, new: true }
-      ).select('-_id -__v')
-      reply.code(201).send({ settings })
-    } catch (error) {
-      throw new Error(error)
-    }
-  })
-}

api/routes/v1/undead.js

@@ -1,5 +0,0 @@
-module.exports = async function (fastify) {
-  fastify.get('/', async (request, reply) => {
-    reply.code(200).send('NO')
-  })
-}

api/routes/v1/upgrade/index.js

@@ -1,12 +0,0 @@
-const { execShellAsync } = require('../../../libs/common')
-const { saveServerLog } = require('../../../libs/logging')
-
-module.exports = async function (fastify) {
-  fastify.get('/', async (request, reply) => {
-    const upgradeP1 = await execShellAsync('bash ./install.sh upgrade-phase-1')
-    await saveServerLog({ event: upgradeP1, type: 'UPGRADE-P-1' })
-    reply.code(200).send('I\'m trying, okay?')
-    const upgradeP2 = await execShellAsync('bash ./install.sh upgrade-phase-2')
-    await saveServerLog({ event: upgradeP2, type: 'UPGRADE-P-2' })
-  })
-}

api/routes/v1/verify.js

@@ -1,16 +0,0 @@
-const User = require('../../models/User')
-const jwt = require('jsonwebtoken')
-
-module.exports = async function (fastify) {
-  fastify.get('/', async (request, reply) => {
-    const { authorization } = request.headers
-    if (!authorization) {
-      reply.code(401).send({})
-      return
-    }
-    const token = authorization.split(' ')[1]
-    const verify = jwt.verify(token, fastify.config.JWT_SIGN_KEY)
-    const found = await User.findOne({ uid: verify.jti })
-    found ? reply.code(200).send({}) : reply.code(401).send({})
-  })
-}

api/routes/v1/webhooks/deploy.js

@@ -1,142 +0,0 @@
-const crypto = require('crypto')
-const { cleanupTmp, execShellAsync } = require('../../../libs/common')
-const Deployment = require('../../../models/Deployment')
-const { queueAndBuild } = require('../../../libs/applications')
-const { setDefaultConfiguration } = require('../../../libs/applications/configuration')
-const { docker } = require('../../../libs/docker')
-const cloneRepository = require('../../../libs/applications/github/cloneRepository')
-
-module.exports = async function (fastify) {
-  // TODO: Add this to fastify plugin
-  const postSchema = {
-    body: {
-      type: 'object',
-      properties: {
-        ref: { type: 'string' },
-        repository: {
-          type: 'object',
-          properties: {
-            id: { type: 'number' },
-            full_name: { type: 'string' }
-          },
-          required: ['id', 'full_name']
-        },
-        installation: {
-          type: 'object',
-          properties: {
-            id: { type: 'number' }
-          },
-          required: ['id']
-        }
-      },
-      required: ['ref', 'repository', 'installation']
-    }
-  }
-  fastify.post('/', { schema: postSchema }, async (request, reply) => {
-    const hmac = crypto.createHmac('sha256', fastify.config.GITHUP_APP_WEBHOOK_SECRET)
-    const digest = Buffer.from('sha256=' + hmac.update(JSON.stringify(request.body)).digest('hex'), 'utf8')
-    const checksum = Buffer.from(request.headers['x-hub-signature-256'], 'utf8')
-    if (checksum.length !== digest.length || !crypto.timingSafeEqual(digest, checksum)) {
-      reply.code(500).send({ error: 'Invalid request' })
-      return
-    }
-
-    if (request.headers['x-github-event'] !== 'push') {
-      reply.code(500).send({ error: 'Not a push event.' })
-      return
-    }
-
-    const services = (await docker.engine.listServices()).filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application')
-
-    let configuration = services.find(r => {
-      if (request.body.ref.startsWith('refs')) {
-        const branch = request.body.ref.split('/')[2]
-        if (
-          JSON.parse(r.Spec.Labels.configuration).repository.id === request.body.repository.id &&
-          JSON.parse(r.Spec.Labels.configuration).repository.branch === branch
-        ) {
-          return r
-        }
-      }
-
-      return null
-    })
-
-    if (!configuration) {
-      reply.code(500).send({ error: 'No configuration found.' })
-      return
-    }
-
-    configuration = setDefaultConfiguration(JSON.parse(configuration.Spec.Labels.configuration))
-
-    await cloneRepository(configuration)
-
-    let foundService = false
-    let foundDomain = false
-    let configChanged = false
-    let imageChanged = false
-
-    let forceUpdate = false
-
-    for (const service of services) {
-      const running = JSON.parse(service.Spec.Labels.configuration)
-      if (running) {
-        if (
-          running.publish.domain === configuration.publish.domain &&
-          running.repository.id !== configuration.repository.id &&
-          running.repository.branch !== configuration.repository.branch
-        ) {
-          foundDomain = true
-        }
-        if (running.repository.id === configuration.repository.id && running.repository.branch === configuration.repository.branch) {
-          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
-          foundService = true
-
-          const runningWithoutContainer = JSON.parse(JSON.stringify(running))
-          delete runningWithoutContainer.build.container
-
-          const configurationWithoutContainer = JSON.parse(JSON.stringify(configuration))
-          delete configurationWithoutContainer.build.container
-
-          if (JSON.stringify(runningWithoutContainer.build) !== JSON.stringify(configurationWithoutContainer.build) || JSON.stringify(runningWithoutContainer.publish) !== JSON.stringify(configurationWithoutContainer.publish)) configChanged = true
-          if (running.build.container.tag !== configuration.build.container.tag) imageChanged = true
-        }
-      }
-    }
-    if (foundDomain) {
-      cleanupTmp(configuration.general.workdir)
-      reply.code(500).send({ message: 'Domain already used.' })
-      return
-    }
-    if (forceUpdate) {
-      imageChanged = false
-      configChanged = false
-    } else {
-      if (foundService && !imageChanged && !configChanged) {
-        cleanupTmp(configuration.general.workdir)
-        reply.code(500).send({ message: 'Nothing changed, no need to redeploy.' })
-        return
-      }
-    }
-
-    const alreadyQueued = await Deployment.find({
-      repoId: configuration.repository.id,
-      branch: configuration.repository.branch,
-      organization: configuration.repository.organization,
-      name: configuration.repository.name,
-      domain: configuration.publish.domain,
-      progress: { $in: ['queued', 'inprogress'] }
-    })
-
-    if (alreadyQueued.length > 0) {
-      reply.code(200).send({ message: 'Already in the queue.' })
-      return
-    }
-
-    queueAndBuild(configuration, services, configChanged, imageChanged)
-
-    reply.code(201).send({ message: 'Deployment queued.' })
-  })
-}

api/schema.js

@@ -1,49 +0,0 @@
-const schema = {
-  type: 'object',
-  required: [
-    'DOMAIN',
-    'EMAIL',
-    'VITE_GITHUB_APP_CLIENTID',
-    'GITHUB_APP_CLIENT_SECRET',
-    'GITHUB_APP_PRIVATE_KEY',
-    'GITHUP_APP_WEBHOOK_SECRET',
-    'JWT_SIGN_KEY',
-    'SECRETS_ENCRYPTION_KEY'
-  ],
-  properties: {
-    DOMAIN: {
-      type: 'string'
-    },
-    EMAIL: {
-      type: 'string'
-    },
-    VITE_GITHUB_APP_CLIENTID: {
-      type: 'string'
-    },
-    GITHUB_APP_CLIENT_SECRET: {
-      type: 'string'
-    },
-    GITHUB_APP_PRIVATE_KEY: {
-      type: 'string'
-    },
-    GITHUP_APP_WEBHOOK_SECRET: {
-      type: 'string'
-    },
-    JWT_SIGN_KEY: {
-      type: 'string'
-    },
-    DOCKER_ENGINE: {
-      type: 'string',
-      default: '/var/run/docker.sock'
-    },
-    DOCKER_NETWORK: {
-      type: 'string',
-      default: 'coollabs'
-    },
-    SECRETS_ENCRYPTION_KEY: {
-      type: 'string'
-    }
-  }
-}
-
-module.exports = { schema }

api/server.js

@@ -1,90 +0,0 @@
-require('dotenv').config()
-const fs = require('fs')
-const util = require('util')
-const { saveServerLog } = require('./libs/logging')
-const Deployment = require('./models/Deployment')
-const fastify = require('fastify')({
-  logger: { level: 'error' }
-})
-const mongoose = require('mongoose')
-const path = require('path')
-const { schema } = require('./schema')
-
-fastify.register(require('fastify-env'), {
-  schema,
-  dotenv: true
-})
-
-if (process.env.NODE_ENV === 'production') {
-  fastify.register(require('fastify-static'), {
-    root: path.join(__dirname, '../dist/')
-  })
-
-  fastify.setNotFoundHandler(function (request, reply) {
-    reply.sendFile('index.html')
-  })
-} else {
-  fastify.register(require('fastify-static'), {
-    root: path.join(__dirname, '../public/')
-  })
-}
-
-fastify.register(require('./app'), { prefix: '/api/v1' })
-fastify.setErrorHandler(async (error, request, reply) => {
-  console.log(error)
-  if (error.statusCode) {
-    reply.status(error.statusCode).send({ message: error.message } || { message: 'Something is NOT okay. Are you okay?' })
-  } else {
-    reply.status(500).send({ message: error.message } || { message: 'Something is NOT okay. Are you okay?' })
-  }
-  await saveServerLog({ event: error })
-})
-
-if (process.env.NODE_ENV === 'production') {
-  mongoose.connect(
-    `mongodb://${process.env.MONGODB_USER}:${process.env.MONGODB_PASSWORD}@${process.env.MONGODB_HOST}:${process.env.MONGODB_PORT}/${process.env.MONGODB_DB}?authSource=${process.env.MONGODB_DB}&readPreference=primary&ssl=false`,
-    { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }
-  )
-} else {
-  mongoose.connect(
-    'mongodb://localhost:27017/coolify?&readPreference=primary&ssl=false',
-    { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }
-  )
-}
-
-mongoose.connection.on(
-  'error',
-  console.error.bind(console, 'connection error:')
-)
-mongoose.connection.once('open', async function () {
-  if (process.env.NODE_ENV === 'production') {
-    fastify.listen(3000, '0.0.0.0')
-    console.log('Coolify API is up and running in production.')
-  } else {
-    const logFile = fs.createWriteStream('api/development/console.log', { flags: 'w' })
-    const logStdout = process.stdout
-
-    console.log = function (d) {
-      logFile.write(`[INFO]: ${util.format(d)}\n`)
-      logStdout.write(util.format(d) + '\n')
-    }
-
-    console.error = function (d) {
-      logFile.write(`[ERROR]: ${util.format(d)}\n`)
-      logStdout.write(util.format(d) + '\n')
-    }
-
-    console.warn = function (d) {
-      logFile.write(`[WARN]: ${util.format(d)}\n`)
-      logStdout.write(util.format(d) + '\n')
-    }
-
-    fastify.listen(3001)
-    console.log('Coolify API is up and running in development.')
-  }
-  // On start cleanup inprogress/queued deployments.
-  const deployments = await Deployment.find({ progress: { $in: ['queued', 'inprogress'] } })
-  for (const deployment of deployments) {
-    await Deployment.findByIdAndUpdate(deployment._id, { $set: { progress: 'failed' } })
-  }
-})

docker-compose-dev.yml

@@ -0,0 +1,84 @@
+version: '3.8'
+
+services:
+  proxy:
+    image: traefik:v2.4
+    hostname: coollabs-proxy
+    ports:
+      - target: 80
+        published: 80
+        protocol: tcp
+        mode: host
+      - target: 443
+        published: 443
+        protocol: tcp
+        mode: host
+      - target: 8080
+        published: 8080
+        protocol: tcp
+        mode: host
+    command:
+      - --api.insecure=true
+      - --api.dashboard=true
+      - --api.debug=true
+      - --log.level=ERROR
+      - --providers.docker=true
+      - --providers.docker.swarmMode=true
+      - --providers.docker.exposedbydefault=false
+      - --providers.docker.network=coollabs
+      - --providers.docker.swarmModeRefreshSeconds=1s
+      - --entrypoints.web.address=:80
+      - --entrypoints.websecure.address=:443
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    networks:
+      - coollabs
+    deploy:
+      update_config:
+        parallelism: 1
+        delay: 10s
+        order: start-first
+      replicas: 1
+      placement:
+        constraints:
+          - node.role == manager
+      labels:
+        - 'traefik.enable=true'
+        - 'traefik.http.routers.api.entrypoints=websecure'
+        - 'traefik.http.routers.api.service=api@internal'
+        - 'traefik.http.routers.api.middlewares=auth'
+        - 'traefik.http.services.traefik.loadbalancer.server.port=80'
+
+        # Global redirect www to non-www
+        - 'traefik.http.routers.www-catchall.rule=hostregexp(`{host:www.(.+)}`)'
+        - 'traefik.http.routers.www-catchall.entrypoints=web'
+        - 'traefik.http.routers.www-catchall.middlewares=redirect-www-to-nonwww'
+        - "traefik.http.middlewares.redirect-www-to-nonwww.redirectregex.regex=^http://(?:www\\.)?(.+)"
+        - 'traefik.http.middlewares.redirect-www-to-nonwww.redirectregex.replacement=http://$${1}'
+  mongodb:
+    image: bitnami/mongodb:4.4
+    hostname: coollabs-mongodb
+    ports:
+      - target: 27017
+        published: 27017
+        protocol: tcp
+        mode: host
+    environment:
+      - MONGODB_DISABLE_SYSTEM_LOG=true
+      - MONGODB_ROOT_PASSWORD=developmentPassword4db
+      - MONGODB_USERNAME=supercooldbuser
+      - MONGODB_PASSWORD=developmentPassword4db
+      - MONGODB_DATABASE=coolify
+    volumes:
+      - coollabs-mongodb-data:/bitnami/mongodb
+    networks:
+      - coollabs
+
+volumes:
+  coollabs-mongodb-data: {}
+
+networks:
+  coollabs:
+    driver: overlay
+    name: coollabs
+    external: true

index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.png" />
-  <link rel="preload" as="image" href="/favicon.png">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>coolify: Heroku & Netlify alternative</title>
-  <link rel="dns-prefetch" href="https://cdn.coollabs.io/" />
-  <link rel="preconnect" href="https://cdn.coollabs.io/" crossorigin="" />
-  <link rel="stylesheet" href="https://cdn.coollabs.io/fonts/montserrat/montserrat.css" />
-</head>
-
-<body>
-  <script type="module" src="/src/index.js"></script>
-</body>
-
-</html>

install.sh

@@ -1,43 +1,88 @@
 #!/bin/bash
+
+preTasks() {
+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."
+       preTasks
+       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."
+       preTasks
+       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."
+       preTasks
+       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."
+        preTasks
+        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
+esac

install/Dockerfile

@@ -1,5 +1,5 @@
 FROM coolify-base
 WORKDIR /usr/src/app
-RUN yarn build
-CMD ["yarn", "start"]
+RUN pnpm build
+CMD ["pnpm", "start"]
 EXPOSE 3000

install/Dockerfile-base

@@ -9,9 +9,10 @@ RUN apt update && apt install -y docker-ce-cli && apt clean all
 FROM node:14 as modules
 COPY --from=binaries /usr/bin/docker /usr/bin/docker
 COPY --from=binaries /usr/bin/envsubst /usr/bin/envsubst
+RUN curl -L https://pnpm.js.org/pnpm.js | node - add --global pnpm
 WORKDIR /usr/src/app
 COPY ./package*.json .
-RUN yarn install
+RUN pnpm install
 
 FROM modules
 WORKDIR /usr/src/app

install/Dockerfile-dev

@@ -0,0 +1,10 @@
+FROM node:latest
+LABEL coolify-preserve=true
+WORKDIR /usr/src/app
+RUN curl -fsSL https://download.docker.com/linux/static/stable/x86_64/docker-20.10.6.tgz | tar -xzvf - docker/docker -C . --strip-components 1
+RUN mv /usr/src/app/docker /usr/bin/docker
+RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.2.0/envsubst-`uname -s`-`uname -m` -o /usr/bin/envsubst
+RUN curl -L https://github.com/stedolan/jq/releases/download/jq-1.6/jq-linux64 -o /usr/bin/jq
+RUN chmod +x /usr/bin/envsubst /usr/bin/jq /usr/bin/docker
+ADD "https://www.random.org/cgi-bin/randbyte?nbytes=10&format=h" skipcache
+RUN curl -f https://get.pnpm.io/v6.js | node - add --global pnpm

install/Dockerfile-new

@@ -0,0 +1,15 @@
+FROM node:lts
+LABEL coolify-preserve=true
+WORKDIR /usr/src/app
+RUN curl -fsSL https://download.docker.com/linux/static/stable/x86_64/docker-20.10.6.tgz | tar -xzvf - docker/docker -C . --strip-components 1
+RUN mv /usr/src/app/docker /usr/bin/docker
+RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.2.0/envsubst-`uname -s`-`uname -m` -o /usr/bin/envsubst
+RUN curl -L https://github.com/stedolan/jq/releases/download/jq-1.6/jq-linux64 -o /usr/bin/jq
+RUN chmod +x /usr/bin/envsubst /usr/bin/jq /usr/bin/docker
+RUN curl -f https://get.pnpm.io/v6.js | node - add --global pnpm
+COPY ./*package.json .
+RUN pnpm install
+COPY . .
+RUN pnpm build
+CMD ["pnpm", "start"]
+EXPOSE 3000

install/README.md

@@ -0,0 +1,10 @@
+Some of the files are here for backwards compatibility.
+
+I will do things after 2 months:
+
+- rm ./install.js and ./update.js
+- rm ../install.sh
+- rm ./Dockerfile-base
+- rm ./obs
+- rm ./check.js "No need to check env file. During installation, it is checked by the installer. If you change it between to upgrades: 🤷‍♂️"
+- Rename Dockerfile-new to Dockerfile

install/coolify-template.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   proxy:
-    image: traefik:v2.3
+    image: traefik:v2.4
     hostname: coollabs-proxy
     ports:
       - target: 80
@@ -22,6 +22,7 @@ services:
       - --providers.docker.swarmMode=true
       - --providers.docker.exposedbydefault=false
       - --providers.docker.network=${DOCKER_NETWORK}
+      - --providers.docker.swarmModeRefreshSeconds=1s
       - --entrypoints.web.address=:80
       - --entrypoints.websecure.address=:443
       - --certificatesresolvers.letsencrypt.acme.httpchallenge=true
@@ -43,27 +44,27 @@ services:
         constraints:
           - node.role == manager
       labels:
-        - "traefik.enable=true"
-        - "traefik.http.routers.api.entrypoints=websecure"
-        - "traefik.http.routers.api.service=api@internal"
-        - "traefik.http.routers.api.middlewares=auth"
-        - "traefik.http.services.traefik.loadbalancer.server.port=80"
-        - "traefik.http.services.traefik.loadbalancer.server.port=443"
+        - 'traefik.enable=true'
+        - 'traefik.http.routers.api.entrypoints=websecure'
+        - 'traefik.http.routers.api.service=api@internal'
+        - 'traefik.http.routers.api.middlewares=auth'
+        - 'traefik.http.services.traefik.loadbalancer.server.port=80'
+        - 'traefik.http.services.traefik.loadbalancer.server.port=443'
 
         # Global redirect www to non-www
-        - "traefik.http.routers.www-catchall.rule=hostregexp(`{host:www.(.+)}`)"
-        - "traefik.http.routers.www-catchall.entrypoints=web"
-        - "traefik.http.routers.www-catchall.middlewares=redirect-www-to-nonwww"
+        - 'traefik.http.routers.www-catchall.rule=hostregexp(`{host:www.(.+)}`)'
+        - 'traefik.http.routers.www-catchall.entrypoints=web'
+        - 'traefik.http.routers.www-catchall.middlewares=redirect-www-to-nonwww'
         - "traefik.http.middlewares.redirect-www-to-nonwww.redirectregex.regex=^http://(?:www\\.)?(.+)"
-        - "traefik.http.middlewares.redirect-www-to-nonwww.redirectregex.replacement=http://$$$${1}"
+        - 'traefik.http.middlewares.redirect-www-to-nonwww.redirectregex.replacement=http://$$$${1}'
 
         # Global redirect http to https
-        - "traefik.http.routers.http-catchall.rule=hostregexp(`{host:.+}`)"
-        - "traefik.http.routers.http-catchall.entrypoints=web"
-        - "traefik.http.routers.http-catchall.middlewares=redirect-to-https"
+        - 'traefik.http.routers.http-catchall.rule=hostregexp(`{host:.+}`)'
+        - 'traefik.http.routers.http-catchall.entrypoints=web'
+        - 'traefik.http.routers.http-catchall.middlewares=redirect-to-https'
 
-        - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
-        - "traefik.http.middlewares.global-compress.compress=true"
+        - 'traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https'
+        - 'traefik.http.middlewares.global-compress.compress=true'
 
   coolify:
     image: coolify
@@ -72,7 +73,7 @@ services:
       - .env
     networks:
       - ${DOCKER_NETWORK}
-    command: "yarn start"
+    command: 'yarn start'
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock:ro
     deploy:
@@ -82,16 +83,15 @@ services:
         order: start-first
       replicas: 1
       labels:
-        - "traefik.enable=true"
-        - "traefik.http.routers.coolify.entrypoints=websecure"
-        - "traefik.http.routers.coolify.tls.certresolver=letsencrypt"
-        - "traefik.http.routers.coolify.rule=Host(`${DOMAIN}`) && PathPrefix(`/`)"
-        - "traefik.http.services.coolify.loadbalancer.server.port=3000"
-        - "traefik.http.routers.coolify.middlewares=global-compress"
-      
+        - 'traefik.enable=true'
+        - 'traefik.http.routers.coolify.entrypoints=websecure'
+        - 'traefik.http.routers.coolify.tls.certresolver=letsencrypt'
+        - 'traefik.http.routers.coolify.rule=Host(`${DOMAIN}`) && PathPrefix(`/`)'
+        - 'traefik.http.services.coolify.loadbalancer.server.port=3000'
+        - 'traefik.http.routers.coolify.middlewares=global-compress'
+
 networks:
   ${DOCKER_NETWORK}:
     driver: overlay
     name: ${DOCKER_NETWORK}
     external: true
-

install/install.js

@@ -1,52 +1,36 @@
-require('dotenv').config()
-const { program } = require('commander')
-const fastify = require('fastify')()
-const { schema } = require('../api/schema')
-const shell = require('shelljs')
-const user = shell.exec('whoami', { silent: true }).stdout.replace('\n', '')
+require('dotenv').config();
+const { program } = require('commander');
+const shell = require('shelljs');
+const user = shell.exec('whoami', { silent: true }).stdout.replace('\n', '');
 
-program.version('0.0.1')
+program.version('0.0.1');
 program
-  .option('-d, --debug', 'Debug outputs.')
-  .option('-c, --check', 'Only checks configuration.')
-  .option('-t, --type <type>', 'Deploy type.')
+	.option('-d, --debug', 'Debug outputs.')
+	.option('-c, --check', 'Only checks configuration.')
+	.option('-t, --type <type>', 'Deploy type.');
 
-program.parse(process.argv)
+program.parse(process.argv);
 
-if (program.check) {
-  checkConfig().then(() => {
-    console.log('Config: OK')
-  }).catch((err) => {
-    console.log('Config: NOT OK')
-    console.error(err)
-    process.exit(1)
-  })
-} else {
-  if (user !== 'root') {
-    console.error(`Please run as root! Current user: ${user}`)
-    process.exit(1)
-  }
-  shell.exec(`docker network create ${process.env.DOCKER_NETWORK} --driver overlay`, { silent: !program.debug })
-  shell.exec('docker build -t coolify -f install/Dockerfile .')
-  if (program.type === 'all') {
-    shell.exec('docker stack rm coollabs-coolify', { silent: !program.debug })
-  } else if (program.type === 'coolify') {
-    shell.exec('docker service rm coollabs-coolify_coolify')
-  } 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' })
+const options = program.opts();
+
+if (user !== 'root') {
+	console.error(`Please run as root! Current user: ${user}`);
+	process.exit(1);
 }
-
-function checkConfig () {
-  return new Promise((resolve, reject) => {
-    fastify.register(require('fastify-env'), {
-      schema,
-      dotenv: true
-    })
-      .ready((err) => {
-        if (err) reject(err)
-        resolve()
-      })
-  })
+shell.exec(`docker network create ${process.env.DOCKER_NETWORK} --driver overlay`, {
+	silent: !options.debug
+});
+shell.exec('docker build -t coolify -f install/Dockerfile .');
+if (options.type === 'all') {
+	shell.exec('docker stack rm coollabs-coolify', { silent: !options.debug });
+} else if (options.type === 'coolify') {
+	shell.exec('docker service rm coollabs-coolify_coolify');
+} else if (options.type === 'proxy') {
+	shell.exec('docker service rm coollabs-coolify_proxy');
+}
+if (options.type !== 'upgrade') {
+	shell.exec(
+		'set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify',
+		{ silent: !options.debug, shell: '/bin/bash' }
+	);
 }

install/update.js

@@ -1,21 +1,24 @@
-require('dotenv').config()
-const { program } = require('commander')
-const shell = require('shelljs')
-const user = shell.exec('whoami', { silent: true }).stdout.replace('\n', '')
-
-program.version('0.0.1')
+require('dotenv').config();
+const { program } = require('commander');
+const shell = require('shelljs');
+const user = shell.exec('whoami', { silent: true }).stdout.replace('\n', '');
+program.version('0.0.1');
 program
-  .option('-d, --debug', 'Debug outputs.')
-  .option('-c, --check', 'Only checks configuration.')
-  .option('-t, --type <type>', 'Deploy type.')
-
-program.parse(process.argv)
+	.option('-d, --debug', 'Debug outputs.')
+	.option('-c, --check', 'Only checks configuration.')
+	.option('-t, --type <type>', 'Deploy type.');
 
+program.parse(process.argv);
+const options = program.opts();
 if (user !== 'root') {
-  console.error(`Please run as root! Current user: ${user}`)
-  process.exit(1)
+	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' })
+
+if (options.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: !options.debug, shell: '/bin/bash' }
+	);
 }

package.json

@@ -1,63 +1,58 @@
 {
-  "name": "coolify",
-  "description": "An open-source, hassle-free, self-hostable Heroku & Netlify alternative.",
-  "version": "1.0.1",
-  "license": "AGPL-3.0",
-  "scripts": {
-    "lint": "standard",
-    "start": "NODE_ENV=production node api/server",
-    "dev": "run-p dev:db dev:routify dev:svite dev:server",
-    "dev:db": "NODE_ENV=development node api/development/mongodb.js",
-    "dev:server": "nodemon -w api api/server",
-    "dev:routify": "routify run",
-    "dev:svite": "svite",
-    "build": "run-s build:routify build:svite",
-    "build:routify": "routify run -b",
-    "build:svite": "svite build"
-  },
-  "dependencies": {
-    "@roxi/routify": "^2.7.3",
-    "@zerodevx/svelte-toast": "^0.1.4",
-    "axios": "^0.21.0",
-    "commander": "^6.2.1",
-    "cuid": "^2.1.8",
-    "dayjs": "^1.10.4",
-    "deepmerge": "^4.2.2",
-    "dockerode": "^3.2.1",
-    "dotenv": "^8.2.0",
-    "fastify": "^3.9.1",
-    "fastify-env": "^2.1.0",
-    "fastify-jwt": "^2.1.3",
-    "fastify-plugin": "^3.0.0",
-    "fastify-static": "^3.3.0",
-    "generate-password": "^1.6.0",
-    "js-yaml": "^4.0.0",
-    "jsonwebtoken": "^8.5.1",
-    "mongoose": "^5.11.4",
-    "shelljs": "^0.8.4",
-    "unique-names-generator": "^4.4.0"
-  },
-  "devDependencies": {
-    "mongodb-memory-server-core": "^6.9.3",
-    "nodemon": "^2.0.6",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.35",
-    "postcss-import": "^12.0.1",
-    "postcss-load-config": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "1.19",
-    "prettier-plugin-svelte": "^2.1.6",
-    "standard": "^16.0.3",
-    "svelte": "^3.29.7",
-    "svelte-hmr": "^0.12.2",
-    "svelte-preprocess": "^4.6.1",
-    "svite": "0.8.1",
-    "tailwindcss": "compat"
-  },
-  "keywords": [
-    "svelte",
-    "routify",
-    "fastify",
-    "tailwind"
-  ]
+	"name": "coolify",
+	"description": "An open-source, hassle-free, self-hostable Heroku & Netlify alternative.",
+	"version": "1.0.17",
+	"license": "AGPL-3.0",
+	"scripts": {
+		"dev:docker:start": "docker-compose -f docker-compose-dev.yml up -d",
+		"dev:docker:stop": "docker-compose -f docker-compose-dev.yml down",
+		"dev": "NODE_ENV=development svelte-kit dev --host 0.0.0.0",
+		"build": "NODE_ENV=production svelte-kit build",
+		"preview": "svelte-kit preview",
+		"start": "node build",
+		"lint": "prettier --check . && eslint --ignore-path .gitignore .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-node": "^1.0.0-next.24",
+		"@sveltejs/kit": "1.0.0-next.113",
+		"@types/dockerode": "^3.2.3",
+		"@typescript-eslint/eslint-plugin": "^4.26.1",
+		"@typescript-eslint/parser": "^4.26.1",
+		"autoprefixer": "^10.2.6",
+		"cssnano": "^5.0.5",
+		"dotenv-extended": "^2.9.0",
+		"eslint": "^7.28.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^3.2.0",
+		"postcss": "^8.3.0",
+		"postcss-load-config": "^3.0.1",
+		"prettier": "~2.3.1",
+		"prettier-plugin-svelte": "^2.3.0",
+		"svelte": "^3.38.2",
+		"svelte-preprocess": "^4.7.3",
+		"tailwindcss": "2.2.0-canary.8",
+		"tslib": "^2.2.0",
+		"typescript": "^4.3.2",
+		"vite": "^2.3.6"
+	},
+	"type": "module",
+	"dependencies": {
+		"@iarna/toml": "^2.2.5",
+		"@zerodevx/svelte-toast": "^0.3.0",
+		"commander": "^7.2.0",
+		"compare-versions": "^3.6.0",
+		"cookie": "^0.4.1",
+		"cuid": "^2.1.8",
+		"dayjs": "^1.10.5",
+		"dockerode": "^3.3.0",
+		"generate-password": "^1.6.0",
+		"js-yaml": "^4.1.0",
+		"jsonwebtoken": "^8.5.1",
+		"mongoose": "^5.12.13",
+		"shelljs": "^0.8.4",
+		"svelte-kit-cookie-session": "^1.0.6",
+		"svelte-select": "^3.17.0",
+		"unique-names-generator": "^4.5.0"
+	}
 }

postcss.config.cjs

@@ -0,0 +1,18 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+
+module.exports = {
+	plugins: [
+		tailwindcss,
+		autoprefixer,
+
+		!dev &&
+			cssnano({
+				preset: 'default'
+			})
+	]
+};

postcss.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('postcss-preset-env')({ stage: 1 })
-  ]
-}

public/bye.html

@@ -1,3 +0,0 @@
-<script>
-    window.close();
-</script>

routify.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  routifyDir: '.routify',
-  dynamicImports: true,
-  extensions: ['svelte']
-}

src/App.svelte

@@ -1,63 +0,0 @@
-<script>
-  import { SvelteToast } from "@zerodevx/svelte-toast";
-  import { Router } from "@roxi/routify";
-  import { routes } from "../.routify/routes";
-  const options = {
-    duration: 2000,
-    dismissable: false
-  };
-</script>
-
-<style lang="postcss">
-  :global(._toastMsg) {
-    @apply text-sm font-bold !important;
-  }
-  :global(._toastItem) {
-    @apply w-full border-l-2 border-green-600 !important;
-  }
-  :global(._toastBtn) {
-    @apply text-xs !important;
-  }
-  :global(._toastBtn:hover) {
-    @apply bg-gray-500 !important;
-  }
-  :global(.icon) {
-    @apply text-white rounded p-2 transition duration-100 !important;
-  }
-  :global(.icon:hover) {
-    @apply bg-warmGray-700 !important;
-  }
-  :global(input) {
-    @apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none !important;
-  }
-  :global(input:hover) {
-    @apply bg-warmGray-700 !important;
-  }
-  :global(textarea) {
-    @apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none resize-none !important;
-  }
-  :global(textarea:hover) {
-    @apply bg-warmGray-700 !important;
-  }
-  :global(select) {
-    @apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none !important;
-  }
-  :global(select:hover) {
-    @apply bg-warmGray-700 !important;
-  }
-  :global(label) {
-    @apply text-left text-base font-bold text-warmGray-400 !important;
-  }
-  :global(button) {
-    @apply outline-none !important;
-  }
-  :global(.button) {
-    @apply rounded text-sm font-bold transition-all duration-100 !important;
-  }
-  :global(.h-271) {
-    min-height: 271px !important;
-  }
-</style>
-
-<SvelteToast options="{options}" />
-<Router routes="{routes}" />

src/app.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Coolify</title>
+		<link rel="dns-prefetch" href="https://cdn.coollabs.io/" />
+		<link rel="preconnect" href="https://cdn.coollabs.io/" crossorigin="" />
+		<link rel="stylesheet" href="https://cdn.coollabs.io/fonts/montserrat/montserrat.css" />
+		<link rel="stylesheet" href="https://cdn.coollabs.io/css/microtip-0.2.2.min.css" />
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>

src/app.postcss

@@ -0,0 +1,149 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+	height: 100%;
+}
+body {
+	background-color: rgb(22, 22, 22);
+	min-height: 100vh;
+	overflow-x: hidden;
+	@apply text-white;
+}
+
+:root {
+	--toastBackground: rgba(41, 37, 36, 0.8);
+	--toastProgressBackground: transparent;
+	--toastFont: 'Inter';
+}
+
+.border-gradient {
+	border-bottom: 2px solid transparent;
+	border-image: linear-gradient(
+		0.25turn,
+		rgba(255, 249, 34),
+		rgba(255, 0, 128),
+		rgba(56, 2, 155, 0)
+	);
+	border-image-slice: 1;
+}
+.border-gradient-full {
+	border: 4px solid transparent;
+	border-image: linear-gradient(
+		0.25turn,
+		rgba(255, 249, 34),
+		rgba(255, 0, 128),
+		rgba(56, 2, 155, 0)
+	);
+	border-image-slice: 1;
+}
+
+[aria-label][role~='tooltip']::after {
+	background: rgba(41, 37, 36, 0.9);
+	color: white;
+	font-family: 'Inter';
+	font-size: 16px;
+	font-weight: 600;
+	white-space: normal;
+}
+
+[role~='tooltip'][data-microtip-position|='bottom']::before {
+	background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2841,%2037,%2036,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E')
+		no-repeat;
+}
+
+[role~='tooltip'][data-microtip-position|='top']::before {
+	background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2841,%2037,%2036,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E')
+		no-repeat;
+}
+[role~='tooltip'][data-microtip-position='right']::before {
+	background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2841,%2037,%2036,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E')
+		no-repeat;
+}
+
+[role~='tooltip'][data-microtip-position='left']::before {
+	background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2841,%2037,%2036,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E')
+		no-repeat;
+}
+
+.main {
+	width: calc(100% - 4rem);
+	margin-left: 4rem;
+}
+._toastMsg {
+	@apply text-sm font-bold !important;
+}
+._toastItem {
+	@apply w-full border-l-2 border-green-600 !important;
+}
+._toastBtn {
+	@apply text-xs !important;
+}
+._toastBtn:hover {
+	@apply bg-gray-500 !important;
+}
+.icon {
+	@apply text-white rounded p-2 transition duration-100;
+}
+.icon:hover {
+	@apply bg-warmGray-700;
+}
+input {
+	@apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none border border-transparent !important;
+}
+input:hover,
+input:focus-visible,
+input:focus {
+	@apply bg-warmGray-700 !important;
+}
+textarea {
+	@apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none resize-none !important;
+}
+textarea:hover {
+	@apply bg-warmGray-700 !important;
+}
+select {
+	@apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none !important;
+}
+select:hover {
+	@apply bg-warmGray-700 !important;
+}
+
+label {
+	@apply text-left text-base font-bold text-warmGray-400 !important;
+}
+button {
+	@apply outline-none !important;
+}
+.button {
+	@apply rounded text-sm font-bold transition-all duration-100 !important;
+}
+
+.button:focus-visible,
+.button:focus {
+	@apply bg-warmGray-700 !important;
+}
+.h-271 {
+	min-height: 271px !important;
+}
+.repository-select-search .listItem .item,
+.repository-select-search .empty {
+	@apply text-sm py-3 font-bold bg-warmGray-800 text-white cursor-pointer border-none hover:bg-warmGray-700 !important;
+}
+
+.repository-select-search .listContainer {
+	@apply bg-transparent !important;
+}
+
+.repository-select-search .clearSelect {
+	@apply text-white cursor-pointer !important;
+}
+
+.repository-select-search .selectedItem {
+	@apply text-white relative cursor-pointer font-bold text-sm flex items-center !important;
+}
+.selectContainer {
+	background: transparent !important;
+	@apply border-0 !important;
+}

src/components/Application/ActiveTab/General.svelte

@@ -0,0 +1,594 @@
+<script>
+	import { VITE_GITHUB_APP_NAME } from '$lib/consts';
+	import { application, isPullRequestPermissionsGranted } from '$store';
+	import { onMount } from 'svelte';
+	import TooltipInfo from '$components/TooltipInfo.svelte';
+	import { request } from '$lib/request';
+	import { page, session } from '$app/stores';
+	import { browser } from '$app/env';
+
+	let domainInput;
+	let loading = {
+		previewDeployment: false
+	};
+	let howToActivate = false;
+	const buildpacks = {
+		static: {
+			port: {
+				active: false,
+				number: 80
+			},
+			build: true,
+			start: false
+		},
+		nodejs: {
+			port: {
+				active: true,
+				number: 3000
+			},
+			build: true,
+			start: true
+		},
+		nestjs: {
+			port: {
+				active: true,
+				number: 3000
+			},
+			build: true,
+			start: true
+		},
+		vuejs: {
+			port: {
+				active: false,
+				number: 80
+			},
+			build: true,
+			start: false
+		},
+		nuxtjs: {
+			port: {
+				active: true,
+				number: 3000
+			},
+			build: true,
+			start: true
+		},
+		react: {
+			port: {
+				active: false,
+				number: 80
+			},
+			build: true,
+			start: false
+		},
+		nextjs: {
+			port: {
+				active: true,
+				number: 3000
+			},
+			build: true,
+			start: true
+		},
+		gatsby: {
+			port: {
+				active: true,
+				number: 3000
+			},
+			build: true,
+			start: false
+		},
+		svelte: {
+			port: {
+				active: false,
+				number: 80
+			},
+			build: true,
+			start: false
+		},
+		php: {
+			port: {
+				active: false,
+				number: 80
+			},
+			build: false,
+			start: false
+		},
+		rust: {
+			port: {
+				active: true,
+				number: 3000
+			},
+			build: false,
+			start: false
+		},
+		docker: {
+			port: {
+				active: true,
+				number: 3000
+			},
+			build: false,
+			start: false
+		},
+		python: {
+			port: {
+				active: true,
+				number: 4000
+			},
+			build: false,
+			start: false,
+			custom: true
+		}
+	};
+	async function setPreviewDeployment() {
+		if ($application.general.isPreviewDeploymentEnabled) {
+			const result = window.confirm(
+				"Are you sure? It will delete all PR deployments - it's NOT reversible!"
+			);
+			if (result) {
+				loading.previewDeployment = true;
+				$application.general.isPreviewDeploymentEnabled =
+					!$application.general.isPreviewDeploymentEnabled;
+				if ($page.path !== '/application/new') {
+					const config = await request(`/api/v1/application/config/previewDeployment`, $session, {
+						body: {
+							name: $application.repository.name,
+							organization: $application.repository.organization,
+							branch: $application.repository.branch,
+							isPreviewDeploymentEnabled: $application.general.isPreviewDeploymentEnabled
+						}
+					});
+				}
+				loading.previewDeployment = false;
+			}
+		} else {
+			loading.previewDeployment = true;
+			$application.general.isPreviewDeploymentEnabled =
+				!$application.general.isPreviewDeploymentEnabled;
+			$application.general.pullRequest = 0;
+			if ($page.path !== '/application/new') {
+				const config = await request(`/api/v1/application/config/previewDeployment`, $session, {
+					body: {
+						name: $application.repository.name,
+						organization: $application.repository.organization,
+						branch: $application.repository.branch,
+						isPreviewDeploymentEnabled: $application.general.isPreviewDeploymentEnabled
+					}
+				});
+			}
+			loading.previewDeployment = false;
+		}
+	}
+	function selectBuildPack(event) {
+		if (event.target.innerText === 'React/Preact') {
+			$application.build.pack = 'react';
+		} else {
+			$application.build.pack = event.target.innerText.replace(/\./g, '').toLowerCase();
+		}
+	}
+	async function openGithub() {
+		if (browser) {
+			const config = await request(`https://api.github.com/apps/${VITE_GITHUB_APP_NAME}`, $session);
+
+			let url = `https://github.com/settings/apps/${VITE_GITHUB_APP_NAME}/permissions`;
+			if (config.owner.type === 'Organization') {
+				url = `https://github.com/organizations/${config.owner.login}/settings/apps/${VITE_GITHUB_APP_NAME}/permissions`;
+			}
+
+			const left = screen.width / 2 - 1020 / 2;
+			const top = screen.height / 2 - 618 / 2;
+			const newWindow = open(
+				url,
+				'Permission Update',
+				'resizable=1, scrollbars=1, fullscreen=1, height=1000, width=1220,top=' +
+					top +
+					', left=' +
+					left +
+					', toolbar=0, menubar=0, status=0'
+			);
+			const timer = setInterval(async () => {
+				if (newWindow?.closed) {
+					clearInterval(timer);
+					location.reload();
+				}
+			}, 100);
+		}
+	}
+	onMount(() => {
+		if (!$application.publish.domain) domainInput.focus();
+	});
+
+</script>
+
+<div>
+	<div class="grid grid-cols-1 text-sm max-w-4xl md:mx-auto mx-6 pb-16 auto-cols-max ">
+		<div class="text-2xl font-bold border-gradient w-40">Build Packs</div>
+		<div class="flex font-bold flex-wrap justify-center pt-10">
+			<div
+				class={$application.build.pack === 'static'
+					? 'buildpack bg-red-500'
+					: 'buildpack hover:border-red-500'}
+				on:click={selectBuildPack}
+			>
+				Static
+			</div>
+			<div
+				class={$application.build.pack === 'nodejs'
+					? 'buildpack bg-emerald-600'
+					: 'buildpack hover:border-emerald-600'}
+				on:click={selectBuildPack}
+			>
+				NodeJS
+			</div>
+			<div
+				class={$application.build.pack === 'vuejs'
+					? 'buildpack bg-green-500'
+					: 'buildpack hover:border-green-500'}
+				on:click={selectBuildPack}
+			>
+				VueJS
+			</div>
+			<div
+				class={$application.build.pack === 'nuxtjs'
+					? 'buildpack bg-green-500'
+					: 'buildpack hover:border-green-500'}
+				on:click={selectBuildPack}
+			>
+				NuxtJS
+			</div>
+			<div
+				class={$application.build.pack === 'react'
+					? 'buildpack bg-gradient-to-r from-blue-500 to-purple-500'
+					: 'buildpack hover:border-blue-500'}
+				on:click={selectBuildPack}
+			>
+				React/Preact
+			</div>
+			<div
+				class={$application.build.pack === 'nextjs'
+					? 'buildpack bg-blue-500'
+					: 'buildpack hover:border-blue-500'}
+				on:click={selectBuildPack}
+			>
+				NextJS
+			</div>
+			<div
+				class={$application.build.pack === 'gatsby'
+					? 'buildpack bg-blue-500'
+					: 'buildpack hover:border-blue-500'}
+				on:click={selectBuildPack}
+			>
+				Gatsby
+			</div>
+			<div
+				class={$application.build.pack === 'svelte'
+					? 'buildpack bg-orange-600'
+					: 'buildpack hover:border-orange-600'}
+				on:click={selectBuildPack}
+			>
+				Svelte
+			</div>
+			<div
+				class={$application.build.pack === 'php'
+					? 'buildpack bg-indigo-500'
+					: 'buildpack hover:border-indigo-500'}
+				on:click={selectBuildPack}
+			>
+				PHP
+			</div>
+			<div
+				class={$application.build.pack === 'rust'
+					? 'buildpack bg-pink-500'
+					: 'buildpack hover:border-pink-500'}
+				on:click={selectBuildPack}
+			>
+				Rust
+			</div>
+			<div
+				class={$application.build.pack === 'nestjs'
+					? 'buildpack bg-red-500'
+					: 'buildpack hover:border-red-500'}
+				on:click={selectBuildPack}
+			>
+				NestJS
+			</div>
+			<div
+				class={$application.build.pack === 'docker'
+					? 'buildpack bg-purple-500'
+					: 'buildpack hover:border-purple-500'}
+				on:click={selectBuildPack}
+			>
+				Docker
+			</div>
+			<div
+				class={$application.build.pack === 'python'
+					? 'buildpack bg-green-500'
+					: 'buildpack hover:border-green-500'}
+				on:click={selectBuildPack}
+			>
+				Python
+			</div>
+		</div>
+	</div>
+	<div class="text-2xl font-bold border-gradient w-52">General settings</div>
+	<div class="grid grid-cols-1 max-w-2xl md:mx-auto mx-6 justify-center items-center pt-10">
+		<div>
+			<ul class="divide-y divide-warmGray-800">
+				<li class="pb-6 flex items-center justify-between">
+					<div class="flex flex-col">
+						<p class="text-base font-bold text-warmGray-100">Preview deployments</p>
+						<p class="text-sm font-medium text-warmGray-400">
+							PR's will be deployed so you could review them easily
+						</p>
+					</div>
+
+					{#if $isPullRequestPermissionsGranted}
+						<div
+							class="relative"
+							class:animate-wiggle={loading.previewDeployment}
+							class:opacity-25={loading.previewDeployment}
+						>
+							<button
+								type="button"
+								disabled={loading.previewDeployment}
+								on:click={setPreviewDeployment}
+								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"
+								class:bg-green-600={$application.general.isPreviewDeploymentEnabled}
+								class:bg-warmGray-700={!$application.general.isPreviewDeploymentEnabled}
+								class:cursor-not-allowed={loading.previewDeployment}
+							>
+								<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 transition ease-in-out duration-200"
+									class:translate-x-5={$application.general.isPreviewDeploymentEnabled}
+									class:translate-x-0={!$application.general.isPreviewDeploymentEnabled}
+								>
+									<span
+										class=" ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+										class:opacity-0={$application.general.isPreviewDeploymentEnabled}
+										class:opacity-100={!$application.general.isPreviewDeploymentEnabled}
+										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"
+											/>
+										</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={$application.general.isPreviewDeploymentEnabled}
+										class:opacity-0={!$application.general.isPreviewDeploymentEnabled}
+									>
+										<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"
+											/>
+										</svg>
+									</span>
+								</span>
+							</button>
+							{#if loading.previewDeployment}
+								<div class="absolute left-0 bottom-0 -mb-4 -ml-2 text-xs font-bold">{$application.general.isPreviewDeploymentEnabled ? 'Enabling...' : 'Disabling...' }</div>
+							{/if}
+						</div>
+					{:else}
+						<div class="relative">
+							{#if !howToActivate}
+								<button
+									class="button py-2 px-2 bg-warmGray-800 hover:bg-warmGray-700 text-white"
+									on:click={() => (howToActivate = !howToActivate)}>How to active this?</button
+								>
+							{:else}
+								<button
+									class="button py-2 px-2 bg-green-600 hover:bg-green-500 text-white"
+									on:click={openGithub}>Open Github</button
+								>
+							{/if}
+							{#if howToActivate}
+								<div class="absolute right-0 w-64 z-10">
+									<div class="bg-warmGray-800 p-4 my-2 rounded text-white">
+										<div
+											class="absolute right-0 top-0 p-2 my-3 mx-1 text-xs font-bold cursor-pointer hover:bg-warmGray-700"
+											on:click={() => (howToActivate = false)}
+										>
+											X
+										</div>
+										<p class="text-sm font-medium text-warmGray-400">
+											You need to add <span class="text-white">two new permissions</span> to your GitHub
+											App:
+										</p>
+										<br />
+										<p class="text-sm font-medium text-warmGray-400">
+											1. In <span class="text-white">Repository permissions</span>, add
+											<span class="text-white">Read-only</span>
+											access to <span class="text-white">Pull requests</span>.
+										</p>
+										<br />
+										<p class="text-sm font-medium text-warmGray-400">
+											2. In <span class="text-white">Subscribe to events</span> section,
+											<span class="text-white"> check Pull request</span> field.
+										</p>
+										<br />
+										<p class="text-sm font-medium text-warmGray-400">
+											3. You <span class="text-white">receive an email</span> where you need to
+											<span class="text-white">accept the new permissions</span>.
+										</p>
+									</div>
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</li>
+			</ul>
+		</div>
+
+		<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
+					bind:this={domainInput}
+					class="border-2"
+					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)"
+				/>
+			</div>
+			<div class="grid grid-flow-row">
+				<label for="Path"
+					>Path <TooltipInfo
+						label={`Path to deploy your application on your domain. eg: /api means it will be deployed to -> https://${
+							$application.publish.domain || '<yourdomain>'
+						}/api`}
+					/></label
+				>
+				<input id="Path" bind:value={$application.publish.path} placeholder="/" />
+			</div>
+		</div>
+		<label for="Port" class:text-warmGray-800={!buildpacks[$application.build.pack].port.active}
+			>Port</label
+		>
+		<input
+			disabled={!buildpacks[$application.build.pack].port.active}
+			id="Port"
+			class:bg-warmGray-900={!buildpacks[$application.build.pack].port.active}
+			class:text-warmGray-900={!buildpacks[$application.build.pack].port.active}
+			class:placeholder-warmGray-800={!buildpacks[$application.build.pack].port.active}
+			class:hover:bg-warmGray-900={!buildpacks[$application.build.pack].port.active}
+			class:cursor-not-allowed={!buildpacks[$application.build.pack].port.active}
+			bind:value={$application.publish.port}
+			placeholder={buildpacks[$application.build.pack].port.number}
+		/>
+		<div class="grid grid-flow-col gap-2 items-center pt-6 pb-12">
+			<div class="grid grid-flow-row">
+				<label for="baseDir"
+					>Base Directory <TooltipInfo
+						label="The directory to use as base for every command (could be useful if you have a monorepo)."
+					/></label
+				>
+				<input id="baseDir" bind:value={$application.build.directory} placeholder="eg: sourcedir" />
+			</div>
+			<div class="grid grid-flow-row">
+				<label for="publishDir"
+					>Publish Directory <TooltipInfo
+						label="The directory to deploy after running the build command.  eg: dist, _site, public."
+					/></label
+				>
+				<input
+					id="publishDir"
+					bind:value={$application.publish.directory}
+					placeholder="eg: dist, _site, public"
+				/>
+			</div>
+		</div>
+	</div>
+	<div class="text-2xl font-bold w-40 border-gradient">Commands</div>
+	<div class=" max-w-2xl md:mx-auto mx-6 justify-center items-center pt-10 pb-32">
+		<div class="grid grid-flow-col gap-2 items-center">
+			<div class="grid grid-flow-row">
+				{#if $application.build.pack === 'python'}
+					<label for="ModulePackageName"
+						>Module/Package Name<TooltipInfo
+							label="The module/package name to start (eg: the entry filename [main], without the py extension. See gunicorn.org for more details)"
+						/>
+					</label>
+
+					<input
+						class="mb-6"
+						id="ModulePackageName"
+						bind:value={$application.build.command.python.module}
+						placeholder="main"
+					/>
+					<label for="ApplicationInstance"
+						>Application Instance<TooltipInfo
+							label="The instance name (the main function name. See gunicorn.org for more details)"
+						/>
+					</label>
+
+					<input
+						class="mb-6"
+						id="ApplicationInstance"
+						bind:value={$application.build.command.python.instance}
+						placeholder="app"
+					/>
+				{:else}
+					<label
+						for="installCommand"
+						class:text-warmGray-800={!buildpacks[$application.build.pack].build}
+						>Install Command <TooltipInfo
+							label="Command to run for installing dependencies. eg: yarn install"
+						/>
+					</label>
+
+					<input
+						class="mb-6"
+						class:bg-warmGray-900={!buildpacks[$application.build.pack].build}
+						class:text-warmGray-900={!buildpacks[$application.build.pack].build}
+						class:placeholder-warmGray-800={!buildpacks[$application.build.pack].build}
+						class:hover:bg-warmGray-900={!buildpacks[$application.build.pack].build}
+						class:cursor-not-allowed={!buildpacks[$application.build.pack].build}
+						id="installCommand"
+						bind:value={$application.build.command.installation}
+						placeholder="eg: yarn install"
+					/>
+					<label
+						for="buildCommand"
+						class:text-warmGray-800={!buildpacks[$application.build.pack].build}
+						>Build Command <TooltipInfo
+							label="Command to run for building your application. If empty, no build phase initiated in the deploy process."
+						/></label
+					>
+					<input
+						class="mb-6"
+						class:bg-warmGray-900={!buildpacks[$application.build.pack].build}
+						class:text-warmGray-900={!buildpacks[$application.build.pack].build}
+						class:placeholder-warmGray-800={!buildpacks[$application.build.pack].build}
+						class:hover:bg-warmGray-900={!buildpacks[$application.build.pack].build}
+						class:cursor-not-allowed={!buildpacks[$application.build.pack].build}
+						id="buildCommand"
+						bind:value={$application.build.command.build}
+						placeholder="eg: yarn build"
+					/>
+					<label
+						for="startCommand"
+						class:text-warmGray-800={!buildpacks[$application.build.pack].start}
+						>Start Command <TooltipInfo
+							label="Command to start the application. eg: yarn start"
+						/></label
+					>
+					<input
+						class="mb-6"
+						class:bg-warmGray-900={!buildpacks[$application.build.pack].start}
+						class:text-warmGray-900={!buildpacks[$application.build.pack].start}
+						class:placeholder-warmGray-800={!buildpacks[$application.build.pack].start}
+						class:hover:bg-warmGray-900={!buildpacks[$application.build.pack].start}
+						class:cursor-not-allowed={!buildpacks[$application.build.pack].start}
+						id="startcommand"
+						bind:value={$application.build.command.start}
+						placeholder="eg: yarn start"
+					/>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.buildpack {
+		@apply px-6 py-2 mx-2 my-2 bg-warmGray-800 w-48 ease-in-out transform hover:scale-105 text-center rounded border-2 border-transparent border-dashed cursor-pointer transition duration-100;
+	}
+
+</style>

src/components/Application/ActiveTab/PullRequests.svelte

@@ -0,0 +1,110 @@
+<script>
+	import { browser } from '$app/env';
+	import { goto } from '$app/navigation';
+	import { onDestroy, onMount } from 'svelte';
+	import { session } from '$app/stores';
+	import { request } from '$lib/request';
+	import { toast } from '@zerodevx/svelte-toast';
+	import { application, prApplication } from '$store';
+	let loadPRDeployments = null;
+	onMount(async () => {
+		await getPRDeployments();
+		loadPRDeployments = setInterval(async () => {
+			await getPRDeployments();
+		}, 1000);
+	});
+	onDestroy(() => {
+		clearInterval(loadPRDeployments);
+	});
+	async function getPRDeployments() {
+		const { configuration } = await request(`/api/v1/application/config`, $session, {
+			body: {
+				name: $application.repository.name,
+				organization: $application.repository.organization,
+				branch: $application.repository.branch
+			}
+		});
+		$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
+	}
+	async function removePR(prConfiguration) {
+		const result = window.confirm("Are you sure? It's NOT reversible!");
+		if (result) {
+			await request(`/api/v1/application/remove`, $session, {
+				body: {
+					organization: prConfiguration.repository.organization,
+					name: prConfiguration.repository.name,
+					branch: prConfiguration.repository.branch,
+					domain: prConfiguration.publish.domain
+				}
+			});
+
+			browser && toast.push('PR deployment removed.');
+			const { configuration } = await request(`/api/v1/application/config`, $session, {
+				body: {
+					name: prConfiguration.repository.name,
+					organization: prConfiguration.repository.organization,
+					branch: prConfiguration.repository.branch
+				}
+			});
+			$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
+		}
+	}
+
+</script>
+
+<div class="text-2xl font-bold border-gradient w-48">Pull Requests</div>
+<div class="text-center pt-4">
+	{#if $prApplication.length > 0}
+		<div class="py-4 ">
+			{#each $prApplication as pr}
+				<div class="flex space-x-4 justify-center items-center">
+					<div class="text-left  font-bold tracking-tight  ">
+						{pr.publish.domain}
+					</div>
+					<a
+						target="_blank"
+						class="icon mx-2 "
+						href={'https://' + pr.publish.domain + pr.publish.path}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+							/>
+						</svg></a
+					>
+					<!-- <div class="flex-1" /> -->
+					<button
+						class="icon hover:text-red-500 hover:bg-warmGray-800"
+						on:click={() => removePR(pr)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+							/>
+						</svg>
+					</button>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<div class="font-bold text-center">No PR deployments found</div>
+	{/if}
+</div>

src/components/Application/ActiveTab/Secrets.svelte

@@ -0,0 +1,80 @@
+<script>
+  import { application } from "$store";
+
+  let secret = {
+    name: null,
+    value: null,
+  };
+  let foundSecret = null;
+  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,
+        };
+      } else {
+        foundSecret = found;
+      }
+    }
+  }
+
+  async function removeSecret(name) {
+    foundSecret = null
+    $application.publish.secrets = [
+      ...$application.publish.secrets.filter(s => s.name !== name),
+    ];
+  }
+</script>
+<div class="text-2xl font-bold border-gradient w-24">Secrets</div>
+<div class="max-w-xl mx-auto text-center pt-4">
+  <div class="text-left text-base font-bold tracking-tight text-warmGray-400">
+    New Secret
+  </div>
+  <div class="flex space-x-4">
+    <input id="secretName" bind:value="{secret.name}" placeholder="Name" class="w-64 border-2 border-transparent" />
+    <input id="secretValue" bind:value="{secret.value}" placeholder="Value" class="w-64 border-2 border-transparent" />
+    <button class="icon hover:text-green-500" on:click="{saveSecret}">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    </button>
+  </div>
+  {#if $application.publish.secrets.length > 0}
+    <div class="py-4">
+      {#each $application.publish.secrets as s}
+        <div class="flex space-x-4">
+          <input
+            id="{s.name}"
+            value="{s.name}"
+            disabled
+            class="border-2 bg-transparent border-transparent w-64"
+            class:border-red-600="{foundSecret && foundSecret.name === s.name}"
+          />
+          <input
+            id="{s.createdAt}"
+            value="SAVED"
+            disabled
+            class="border-2 bg-transparent border-transparent w-64"
+          />
+          <button class="icon hover:text-red-500" on:click="{() => removeSecret(s.name)}">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </button>
+
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

src/components/Application/Branches.svelte

@@ -0,0 +1,46 @@
+<script>
+	import { page } from '$app/stores';
+
+	export let loading, branches;
+	import { application } from '$store';
+	import Select from 'svelte-select';
+
+	const selectedValue = $page.path !== '/application/new' && $application.repository.branch;
+
+	function handleSelect(event) {
+		$application.repository.branch = null;
+		setTimeout(() => {
+			$application.repository.branch = event.detail.value;
+		}, 1);
+	}
+</script>
+
+{#if loading}
+	<div class="grid grid-cols-1">
+		<label for="branch">Branch</label>
+		<div class="repository-select-search col-span-2">
+			<Select
+				containerClasses="w-full border-none bg-transparent"
+				placeholder="Loading branches..."
+				isDisabled
+			/>
+		</div>
+	</div>
+{:else}
+	<div class="grid grid-cols-1">
+		<label for="branch">Branch</label>
+		<div class="repository-select-search col-span-2">
+			<Select
+				containerClasses="w-full border-none bg-transparent"
+				on:select={handleSelect}
+				{selectedValue}
+				isClearable={false}
+				items={branches.map((b) => ({ label: b.name, value: b.name }))}
+				showIndicator={$page.path === '/application/new'}
+				noOptionsMessage="No branches found"
+				placeholder="Select a branch"
+				isDisabled={$page.path !== '/application/new'}
+			/>
+		</div>
+	</div>
+{/if}

src/components/Application/Configuration.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { request } from '$lib/request';
+	import { session } from '$app/stores';
+	import {
+		githubRepositories,
+		application,
+		githubInstallations,
+		prApplication,
+		initConf,
+		isPullRequestPermissionsGranted
+	} from '$store';
+
+	import { fade } from 'svelte/transition';
+	import Loading from '$components/Loading.svelte';
+
+	import { browser } from '$app/env';
+	import Branches from '$components/Application/Branches.svelte';
+	import Tabs from '$components/Application/Tabs.svelte';
+	import Repositories from '$components/Application/Repositories.svelte';
+	import Login from '$components/Application/Login.svelte';
+	let loading = {
+		github: false,
+		branches: false
+	};
+	let branches = [];
+	let relogin = false;
+	let permissions = {};
+	function dashify(str: string, options?: any) {
+		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 getGithubRepos(id, page) {
+		return await request(
+			`https://api.github.com/user/installations/${id}/repositories?per_page=100&page=${page}`,
+			$session
+		);
+	}
+	async function loadGithubRepositories(force) {
+		if ($githubRepositories.length > 0 && !force) {
+			$application.github.installation.id = $githubInstallations.id;
+			$application.github.app.id = $githubInstallations.app_id;
+			const foundRepositoryOnGithub = $githubRepositories.find(
+				(r) =>
+					r.full_name === `${$application.repository.organization}/${$application.repository.name}`
+			);
+
+			if (foundRepositoryOnGithub) {
+				$application.repository.id = foundRepositoryOnGithub.id;
+				$application.repository.organization = foundRepositoryOnGithub.owner.login;
+				$application.repository.name = foundRepositoryOnGithub.name;
+			}
+			return;
+		} else {
+			loading.github = true;
+			let installations = [];
+			try {
+				const data = await request('https://api.github.com/user/installations', $session);
+				installations = data.installations;
+			} catch (error) {
+				relogin = true;
+				console.log(error);
+				return false;
+			}
+			if (installations.length === 0) {
+				relogin = true;
+				return false;
+			}
+			$application.github.installation.id = installations[0].id;
+			$application.github.app.id = installations[0].app_id;
+			$githubInstallations = installations[0];
+
+			try {
+				let page = 1;
+				let userRepos = 0;
+				const data = await getGithubRepos($application.github.installation.id, page);
+				$githubRepositories = $githubRepositories.concat(data.repositories);
+				userRepos = data.total_count;
+				if (userRepos > $githubRepositories.length) {
+					while (userRepos > $githubRepositories.length) {
+						page = page + 1;
+						const repos = await getGithubRepos($application.github.installation.id, page);
+						$githubRepositories = $githubRepositories.concat(repos.repositories);
+					}
+				}
+				const foundRepositoryOnGithub = $githubRepositories.find(
+					(r) =>
+						r.full_name ===
+						`${$application.repository.organization}/${$application.repository.name}`
+				);
+				if (foundRepositoryOnGithub) {
+					$application.repository.id = foundRepositoryOnGithub.id;
+					await loadBranches();
+				}
+			} catch (error) {
+				return false;
+			} finally {
+				loading.github = false;
+			}
+		}
+	}
+	async function loadBranches() {
+		loading.branches = true;
+		const selectedRepository = $githubRepositories.find((r) => r.id === $application.repository.id);
+
+		if (selectedRepository) {
+			$application.repository.organization = selectedRepository.owner.login;
+			$application.repository.name = selectedRepository.name;
+		}
+
+		branches = await request(
+			`https://api.github.com/repos/${$application.repository.organization}/${$application.repository.name}/branches`,
+			$session
+		);
+		loading.branches = false;
+		await loadPermissions();
+	}
+	async function loadPermissions() {
+		const config = await request(
+			`https://api.github.com/apps/${import.meta.env.VITE_GITHUB_APP_NAME}`,
+			$session
+		);
+		if (config.permissions['pull_requests'] && config.events.includes('pull_request')) {
+			$isPullRequestPermissionsGranted = true;
+		}
+	}
+	async function modifyGithubAppConfig() {
+		if (browser) {
+			const left = screen.width / 2 - 1020 / 2;
+			const top = screen.height / 2 - 618 / 2;
+			const newWindow = open(
+				`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 +
+					', left=' +
+					left +
+					', toolbar=0, menubar=0, status=0'
+			);
+			const timer = setInterval(async () => {
+				if (newWindow?.closed) {
+					clearInterval(timer);
+					loading.github = true;
+
+					if ($application.repository.name) {
+						try {
+							const { configuration } = await request(`/api/v1/application/config`, $session, {
+								body: {
+									name: $application.repository.name,
+									organization: $application.repository.organization,
+									branch: $application.repository.branch
+								}
+							});
+
+							$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
+							$application = configuration.find((c) => c.general.pullRequest === 0);
+							$initConf = JSON.parse(JSON.stringify($application));
+						} catch (error) {
+							browser && goto('/dashboard/applications', { replaceState: true });
+						}
+					}
+
+					branches = [];
+					$githubRepositories = [];
+					await loadGithubRepositories(true);
+				}
+			}, 100);
+		}
+	}
+
+</script>
+
+<div in:fade={{ duration: 100 }}>
+	{#if relogin}
+		<Login />
+	{:else}
+		{#await loadGithubRepositories(false)}
+			<Loading github githubLoadingText="Loading repositories..." />
+		{:then}
+			{#if loading.github}
+				<Loading github githubLoadingText="Loading repositories..." />
+			{:else}
+				<div class="space-y-2 max-w-4xl mx-auto px-6" in:fade={{ duration: 100 }}>
+					<Repositories
+						on:loadBranches={loadBranches}
+						on:modifyGithubAppConfig={modifyGithubAppConfig}
+					/>
+					{#if $application.repository.organization}
+						<Branches loading={loading.branches} {branches} />
+					{/if}
+
+					{#if $application.repository.branch}
+						<Tabs />
+					{/if}
+				</div>
+			{/if}
+		{/await}
+	{/if}
+</div>

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

@@ -1,22 +0,0 @@
-<script>
-  import { application} from "@store";
-</script>
-
-<div class="grid grid-cols-1 space-y-2 max-w-2xl md:mx-auto mx-6 text-center">
-  <label for="buildCommand">Build Command</label>
-  <input
-    id="buildCommand"
-    bind:value="{$application.build.command.build}"
-    placeholder="eg: yarn build"
-  />
-
-  <label for="installCommand">Install Command</label>
-  <input
-    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="/" />
-</div>

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

@@ -1,106 +0,0 @@
-<script>
-  import { application } from "@store";
-</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>
-        <input
-          id="Port"
-          bind:value="{$application.publish.port}"
-          placeholder="{$application.build.pack === 'static'
-            ? '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

@@ -1,72 +0,0 @@
-<script>
-  import { application } from "@store";
-
-  let secret = {
-    name: null,
-    value: null,
-  };
-  let foundSecret = null;
-  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
-      }
-    } else {
-      foundSecret = found;
-    }
-    }
-
-  }
-
-  async function removeSecret(name) {
-    $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="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" />
-    <button
-      class="button p-1 w-20 bg-green-600 hover:bg-green-500 text-white"
-      on:click="{saveSecret}">Save</button
-    >
-  </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}
-  {/if}
-</div>

src/components/Application/Configuration/Branches.svelte

@@ -1,24 +0,0 @@
-<script>
-  export let loading, branches;
-  import { application } from "@store";
-</script>
-
-{#if loading}
-  <div class="grid grid-cols-1">
-    <label for="branch">Branch</label>
-    <select disabled>
-      <option selected>Loading branches</option>
-    </select>
-  </div>
-{:else}
-  <div class="grid grid-cols-1">
-    <label for="branch">Branch</label>
-    <!-- svelte-ignore a11y-no-onchange -->
-    <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>
-      {/each}
-    </select>
-  </div>
-{/if}

src/components/Application/Configuration/Configuration.svelte

@@ -1,150 +0,0 @@
-<script>
-  import { redirect, isActive } from "@roxi/routify";
-  import { fade } from "svelte/transition";
-  import { session, application, fetch, initialApplication } from "@store";
-
-  import Login from "./Login.svelte";
-  import Loading from "../../Loading.svelte";
-  import Repositories from "./Repositories.svelte";
-  import Branches from "./Branches.svelte";
-  import Tabs from "./Tabs.svelte";
-
-  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(
-      r => r.id === $application.repository.id,
-    );
-
-    if (selectedRepository) {
-      $application.repository.organization = selectedRepository.owner.login;
-      $application.repository.name = selectedRepository.name;
-    }
-
-    branches = await $fetch(
-      `https://api.github.com/repos/${$application.repository.organization}/${$application.repository.name}/branches`,
-    );
-    loading.branches = false;
-  }
-
-  async function loadGithub() {
-    try {
-      const { installations } = await $fetch(
-        "https://api.github.com/user/installations",
-      );
-      if (installations.length === 0) {
-        return false;
-      }
-      $application.github.installation.id = installations[0].id;
-      $application.github.app.id = installations[0].app_id;
-
-      const data = await $fetch(
-        `https://api.github.com/user/installations/${$application.github.installation.id}/repositories?per_page=10000`,
-      );
-
-      repositories = data.repositories;
-      const foundRepositoryOnGithub = data.repositories.find(
-        r =>
-          r.full_name ===
-          `${$application.repository.organization}/${$application.repository.name}`,
-      );
-
-      if (foundRepositoryOnGithub) {
-        $application.repository.id = foundRepositoryOnGithub.id;
-        await loadBranches();
-      }
-    } 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/${dashify(
-        import.meta.env.VITE_GITHUB_APP_NAME,
-      )}/installations/new`,
-      "Install App",
-      "resizable=1, scrollbars=1, fullscreen=0, height=1000, width=1020,top=" +
-        top +
-        ", left=" +
-        left +
-        ", toolbar=0, menubar=0, status=0",
-    );
-    const timer = setInterval(async () => {
-      if (newWindow.closed) {
-        clearInterval(timer);
-        loading.github = true;
-        if (!$isActive("/application/new")) {
-          try {
-            const config = await $fetch(`/api/v1/config`, {
-              body: {
-                name: $application.repository.name,
-                organization: $application.repository.organization,
-                branch: $application.repository.branch,
-              },
-            });
-            $application = { ...config };
-          } catch (error) {
-            $redirect("/dashboard/applications");
-          }
-        } else {
-          $application = JSON.parse(JSON.stringify(initialApplication));
-        }
-        branches = [];
-        repositories = [];
-        await loadGithub();
-      }
-    }, 100);
-  }
-</script>
-
-<div in:fade="{{ duration: 100 }}">
-  {#if !$session.githubAppToken}
-    <Login />
-  {:else}
-    {#await loadGithub()}
-      <Loading />
-    {:then}
-      {#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}
-    {/await}
-  {/if}
-</div>

src/components/Application/Configuration/Login.svelte

@@ -1,50 +0,0 @@
-<script>
-  import { session } from "@store";
-  function login() {
-    const left = screen.width / 2 - 1020 / 2;
-    const top = screen.height / 2 - 618 / 2;
-    const newWindow = open(
-      `https://github.com/login/oauth/authorize?client_id=${
-        import.meta.env.VITE_GITHUB_APP_CLIENTID
-      }`,
-      "Authenticate",
-      "resizable=1, scrollbars=1, fullscreen=0, height=618, width=1020,top=" +
-        top +
-        ", left=" +
-        left +
-        ", toolbar=0, menubar=0, status=0",
-    );
-    const timer = setInterval(() => {
-      if (newWindow.closed) {
-        clearInterval(timer);
-        const ghToken = new URL(newWindow.document.URL).searchParams.get(
-          "ghToken",
-        );
-        if (ghToken) {
-          $session.githubAppToken = ghToken;
-        }
-      }
-    }, 100);
-  }
-</script>
-
-<div class="text-center text-white">
-  <div class="text-2xl font-bold text-center pb-4">
-    Choose your Git provider
-  </div>
-  <button on:click="{login}" class="hover:scale-110 transform duration-100 transition">
-    <svg
-    class="w-16"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    ><path
-      d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
-    ></path></svg
-  >
-  </button>
-</div>

src/components/Application/Configuration/Repositories.svelte

@@ -1,45 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte";
-  import { isActive } from "@roxi/routify";
-  import { application } from "@store";
-  export let repositories;
-  const dispatch = createEventDispatcher();
-  const loadBranches = () => dispatch("loadBranches");
-  const modifyGithubAppConfig = () => dispatch("modifyGithubAppConfig");
-</script>
-
-<div class="grid grid-cols-1">
-  {#if repositories.length !== 0}
-    <label for="repository">Organization / Repository</label>
-    <div class="grid grid-cols-3">
-      <!-- svelte-ignore a11y-no-onchange -->
-      <select
-        id="repository"
-        class:cursor-not-allowed="{!$isActive('/application/new')}"
-        class="col-span-2"
-        bind:value="{$application.repository.id}"
-        on:change="{loadBranches}"
-        disabled="{!$isActive('/application/new')}"
-      >
-        <option selected disabled>Select a repository</option>
-        {#each repositories as repo}
-          <option value="{repo.id}" class="font-medium">
-            {repo.owner.login}
-            /
-            {repo.name}
-          </option>
-        {/each}
-      </select>
-
-      <button
-        class="button col-span-1 ml-2 bg-warmGray-800 hover:bg-warmGray-700 text-white"
-        on:click="{modifyGithubAppConfig}">Configure on Github</button
-      >
-    </div>
-  {:else}
-    <button
-      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}
-</div>

src/components/Application/Configuration/Tabs.svelte

@@ -1,97 +0,0 @@
-<script>
-  import { redirect, isActive } from "@roxi/routify";
-  import { application, fetch, deployments } from "@store";
-  import General from "./ActiveTab/General.svelte";
-  import BuildStep from "./ActiveTab/BuildStep.svelte";
-  import Secrets from "./ActiveTab/Secrets.svelte";
-  import { onMount } from "svelte";
-
-  onMount(async () => {
-    if (!$isActive("/application/new")) {
-      const config = await $fetch(`/api/v1/config`, {
-        body: {
-          name: $application.repository.name,
-          organization: $application.repository.organization,
-          branch: $application.repository.branch,
-        },
-      });
-      $application = { ...config };
-      $redirect(`/application/:organization/:name/:branch/configuration`, {
-        name: $application.repository.name,
-        organization: $application.repository.organization,
-        branch: $application.repository.branch,
-      });
-    } else {
-      $deployments.applications.deployed.filter(d => {
-        const conf = d?.Spec?.Labels.application;
-        if (
-          conf.repository.organization ===
-            $application.repository.organization &&
-          conf.repository.name === $application.repository.name &&
-          conf.repository.branch === $application.repository.branch
-        ) {
-          $redirect(`/application/:organization/:name/:branch/configuration`, {
-            name: $application.repository.name,
-            organization: $application.repository.organization,
-            branch: $application.repository.branch,
-          });
-        }
-      });
-    }
-  });
-  let activeTab = {
-    general: true,
-    buildStep: false,
-    secrets: false,
-  };
-  function activateTab(tab) {
-    if (activeTab.hasOwnProperty(tab)) {
-      activeTab = {
-        general: false,
-        buildStep: false,
-        secrets: false,
-      };
-      activeTab[tab] = true;
-    }
-  }
-</script>
-
-<div class="block text-center py-4">
-  <nav
-    class="flex space-x-4 justify-center font-bold text-md text-white"
-    aria-label="Tabs"
-  >
-    <div
-      on:click="{() => activateTab('general')}"
-      class:text-green-500="{activeTab.general}"
-      class="px-3 py-2 cursor-pointer hover:text-green-500"
-    >
-      General
-    </div>
-    <div
-      on:click="{() => activateTab('buildStep')}"
-      class:text-green-500="{activeTab.buildStep}"
-      class="px-3 py-2 cursor-pointer hover:text-green-500"
-    >
-      Build Step
-    </div>
-    <div
-      on:click="{() => activateTab('secrets')}"
-      class:text-green-500="{activeTab.secrets}"
-      class="px-3 py-2 cursor-pointer hover:text-green-500"
-    >
-      Secrets
-    </div>
-  </nav>
-</div>
-<div class="max-w-4xl mx-auto">
-  <div class="h-full">
-    {#if activeTab.general}
-      <General />
-    {:else if activeTab.buildStep}
-      <BuildStep />
-    {:else if activeTab.secrets}
-      <Secrets />
-    {/if}
-  </div>
-</div>

src/components/Application/Login.svelte

@@ -0,0 +1,42 @@
+<script>
+	function login() {
+		const left = screen.width / 2 - 1020 / 2;
+		const top = screen.height / 2 - 618 / 2;
+		const newWindow = open(
+			`https://github.com/login/oauth/authorize?client_id=${
+				import.meta.env.VITE_GITHUB_APP_CLIENTID
+			}`,
+			'Authenticate',
+			'resizable=1, scrollbars=1, fullscreen=0, height=618, width=1020,top=' +
+				top +
+				', left=' +
+				left +
+				', toolbar=0, menubar=0, status=0'
+		);
+		const timer = setInterval(() => {
+			if (newWindow?.closed) {
+				clearInterval(timer);
+				location.reload()
+			}
+		}, 100);
+	}
+</script>
+
+<div class="text-center text-white">
+	<div class="text-2xl font-bold text-center pb-4">Choose your Git provider</div>
+	<button on:click={login} class="hover:scale-110 transform duration-100 transition">
+		<svg
+			class="w-16"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			><path
+				d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+			/></svg
+		>
+	</button>
+</div>

src/components/Application/Navbar.svelte

@@ -0,0 +1,185 @@
+<script>
+	import { application, initialApplication, initConf } from '$store';
+	import { onDestroy } from 'svelte';
+	import { toast } from '@zerodevx/svelte-toast';
+	import Tooltip from '$components/Tooltip.svelte';
+	import { request } from '$lib/request';
+	import { page, session } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/env';
+	async function removeApplication() {
+		const result = window.confirm(
+			"Are you sure? It will delete all deployments, including PR's - it's NOT reversible!"
+		);
+		if (result) {
+			await request(`/api/v1/application/remove`, $session, {
+				body: {
+					organization: $application.repository.organization,
+					name: $application.repository.name,
+					branch: $application.repository.branch,
+					domain: $application.publish.domain
+				}
+			});
+
+			browser && toast.push('Application removed.');
+			$application = JSON.parse(JSON.stringify(initialApplication));
+			browser && goto(`/dashboard/applications`, { replaceState: true });
+		}
+	}
+
+	onDestroy(() => {
+		$application = JSON.parse(JSON.stringify(initialApplication));
+	});
+
+	async function deploy() {
+		try {
+			browser && toast.push('Checking configuration.');
+			await request(`/api/v1/application/check`, $session, {
+				body: $application
+			});
+			const { nickname, name, deployId } = await request(`/api/v1/application/deploy`, $session, {
+				body: $application
+			});
+			$application.general.nickname = nickname;
+			$application.build.container.name = name;
+			$application.general.deployId = deployId;
+			$initConf = JSON.parse(JSON.stringify($application));
+			if (browser) {
+				toast.push('Application deployment queued.');
+				goto(
+					`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/logs/${$application.general.deployId}`,
+					{ replaceState: true }
+				);
+			}
+		} catch (error) {
+			// console.log(error);
+			// toast.push(error.error || error || 'Ooops something went wrong.');
+		}
+	}
+
+</script>
+
+<nav class="flex text-white justify-end items-center m-4 fixed right-0 top-0 space-x-4 z-50">
+	<Tooltip position="bottom" label="Deploy">
+		<button
+			disabled={$application.publish.domain === '' || $application.publish.domain === null}
+			class:cursor-not-allowed={$application.publish.domain === '' ||
+				$application.publish.domain === null}
+			class:hover:bg-green-500={$application.publish.domain}
+			class:bg-green-600={$application.publish.domain}
+			class:hover:bg-transparent={!$application.publish.domain && $page.path === '/application/new'}
+			class:text-warmGray-700={$application.publish.domain === '' ||
+				$application.publish.domain === null}
+			class="icon"
+			on:click={deploy}
+		>
+			<svg
+				class="w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				><polyline points="16 16 12 12 8 16" /><line x1="12" y1="12" x2="12" y2="21" /><path
+					d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"
+				/><polyline points="16 16 12 12 8 16" /></svg
+			>
+		</button>
+	</Tooltip>
+	<Tooltip position="bottom" label="Delete">
+		<button
+			disabled={$application.publish.domain === '' ||
+				$application.publish.domain === null ||
+				$page.path === '/application/new'}
+			class:cursor-not-allowed={$application.publish.domain === '' ||
+				$application.publish.domain === null ||
+				$page.path === '/application/new'}
+			class:hover:text-red-500={$application.publish.domain && $page.path !== '/application/new'}
+			class:hover:bg-warmGray-700={$application.publish.domain && $page.path !== '/application/new'}
+			class:hover:bg-transparent={$page.path === '/application/new'}
+			class:text-warmGray-700={$application.publish.domain === '' ||
+				$application.publish.domain === null ||
+				$page.path === '/application/new'}
+			class="icon"
+			on:click={removeApplication}
+		>
+			<svg
+				class="w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+				/>
+			</svg>
+		</button>
+	</Tooltip>
+	<div class="border border-warmGray-700 h-8" />
+	<Tooltip position="bottom" label="Logs">
+		<button
+			class="icon"
+			class:text-warmGray-700={$page.path === '/application/new'}
+			disabled={$page.path === '/application/new'}
+			class:hover:text-blue-400={$page.path !== '/application/new'}
+			class:hover:bg-transparent={$page.path === '/application/new'}
+			class:cursor-not-allowed={$page.path === '/application/new'}
+			class:text-blue-400={/logs\/*/.test($page.path)}
+			class:bg-warmGray-700={/logs\/*/.test($page.path)}
+			on:click={() =>
+				goto(
+					`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/logs`
+				)}
+		>
+			<svg
+				class="w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+				/>
+			</svg>
+		</button>
+	</Tooltip>
+	<Tooltip position="bottom-left" label="Configuration">
+		<button
+			class="icon hover:text-yellow-400"
+			disabled={$page.path === '/application/new'}
+			class:text-yellow-400={$page.path.endsWith('configuration') ||
+				$page.path === '/application/new'}
+			class:bg-warmGray-700={$page.path.endsWith('configuration') ||
+				$page.path === '/application/new'}
+			on:click={() =>
+				goto(
+					`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/configuration`
+				)}
+		>
+			<svg
+				class="w-6"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+				/>
+			</svg>
+		</button>
+	</Tooltip>
+</nav>

src/components/Application/Repositories.svelte

@@ -0,0 +1,54 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import { application, githubRepositories } from '$store';
+	import Select from 'svelte-select';
+	import { page } from '$app/stores';
+	function handleSelect(event) {
+		$application.build.pack = 'static';
+		$application.repository.id = parseInt(event.detail.value, 10);
+		$application.repository.branch = null
+		dispatch('loadBranches');
+	}
+	const path = $page.path === '/application/new';
+	let items = $githubRepositories.map((repo) => ({
+		label: `${repo.owner.login}/${repo.name}`,
+		value: repo.id.toString()
+	}));
+
+	const selectedValue =
+		!path && `${$application.repository.organization}/${$application.repository.name}`;
+
+	const dispatch = createEventDispatcher();
+	const modifyGithubAppConfig = () => dispatch('modifyGithubAppConfig');
+</script>
+
+<div class="grid grid-cols-1 pt-4">
+	{#if $githubRepositories.length !== 0}
+		<label for="repository">Organization / Repository</label>
+		<div class="grid grid-cols-3 ">
+			<div class="repository-select-search col-span-2">
+				<Select
+					isFocused="{true}"
+					containerClasses="w-full border-none bg-transparent"
+					on:select={handleSelect}
+					{selectedValue}
+					isClearable={false}
+					{items}
+					showIndicator={path}
+					noOptionsMessage="No Repositories found"
+					placeholder="Select a Repository"
+					isDisabled={!path}
+				/>
+			</div>
+			<button
+				class="button col-span-1 ml-2 bg-warmGray-800 hover:bg-warmGray-700 text-white"
+				on:click={modifyGithubAppConfig}>Configure on Github</button
+			>
+		</div>
+	{:else}
+		<button
+			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}
+</div>

src/components/Application/Tabs.svelte

@@ -0,0 +1,153 @@
+<script>
+	import { toast } from '@zerodevx/svelte-toast';
+	import templates from '$lib/api/applications/packs/templates';
+	import { application, dashboard, initConf, prApplication } from '$store';
+	import General from '$components/Application/ActiveTab/General.svelte';
+	import Secrets from '$components/Application/ActiveTab/Secrets.svelte';
+	import Loading from '$components/Loading.svelte';
+	import { goto } from '$app/navigation';
+	import { page, session } from '$app/stores';
+	import { request } from '$lib/request';
+	import { browser } from '$app/env';
+	import PullRequests from './ActiveTab/PullRequests.svelte';
+
+	let activeTab = {
+		general: true,
+		secrets: false,
+		pullRequests: false
+	};
+	function activateTab(tab) {
+		if (activeTab.hasOwnProperty(tab)) {
+			activeTab = {
+				general: false,
+				pullRequests: false,
+				secrets: false
+			};
+			activeTab[tab] = true;
+		}
+	}
+	async function load() {
+		const found = $dashboard?.applications?.deployed.find((deployment) => {
+			if (
+				deployment.configuration.repository.organization === $application.repository.organization &&
+				deployment.configuration.repository.name === $application.repository.name &&
+				deployment.configuration.repository.branch === $application.repository.branch
+			) {
+				return deployment;
+			}
+		});
+		if (found) {
+			$application = { ...found.configuration };
+			if ($page.path === '/application/new') {
+				if (browser) {
+					toast.push('This repository & branch is already defined. Redirecting...');
+					goto(
+						`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/configuration`,
+						{ replaceState: true }
+					);
+				}
+			}
+			return;
+		}
+		if ($page.path === '/application/new') {
+			try {
+				const dir = await request(
+					`https://api.github.com/repos/${$application.repository.organization}/${$application.repository.name}/contents/?ref=${$application.repository.branch}`,
+					$session
+				);
+				const packageJson = dir.find((f) => f.type === 'file' && f.name === 'package.json');
+				const Dockerfile = dir.find((f) => f.type === 'file' && f.name === 'Dockerfile');
+				const CargoToml = dir.find((f) => f.type === 'file' && f.name === 'Cargo.toml');
+				const requirementsTXT = dir.find((f) => f.type === 'file' && f.name === 'requirements.txt');
+				if (packageJson) {
+					const { content } = await request(packageJson.git_url, $session);
+					const packageJsonContent = JSON.parse(atob(content));
+					const checkPackageJSONContents = (dep) => {
+						return (
+							packageJsonContent?.dependencies?.hasOwnProperty(dep) ||
+							packageJsonContent?.devDependencies?.hasOwnProperty(dep)
+						);
+					};
+					Object.keys(templates).map((dep) => {
+						if (checkPackageJSONContents(dep)) {
+							const config = templates[dep];
+							$application.build.pack = config.pack;
+							if (config.installation) {
+								$application.build.command.installation = config.installation;
+							}
+							if (config.start) {
+								$application.build.command.start = config.start;
+							}
+							if (config.port) {
+								$application.publish.port = config.port;
+							}
+							if (config.directory) {
+								$application.publish.directory = config.directory;
+							}
+
+							if (packageJsonContent.scripts.hasOwnProperty('build') && config.build) {
+								$application.build.command.build = config.build;
+							}
+							browser && toast.push(`${config.name} detected. Default values set.`);
+						}
+					});
+				} else if (CargoToml) {
+					$application.build.pack = 'rust';
+					browser && toast.push(`Rust language detected. Default values set.`);
+				} else if (requirementsTXT) {
+					$application.build.pack = 'python';
+					browser && toast.push('Python language detected. Default values set.');
+				} else if (Dockerfile) {
+					$application.build.pack = 'docker';
+					browser && toast.push('Custom Dockerfile found. Build pack set to docker.');
+				}
+			} catch (error) {
+				// Nothing detected
+			}
+		}
+	}
+
+</script>
+
+{#await load()}
+	<Loading github githubLoadingText="Scanning repository..." />
+{:then}
+	<div class="block text-center py-8">
+		<nav class="flex space-x-4 justify-center font-bold text-md text-white" aria-label="Tabs">
+			<div
+				on:click={() => activateTab('general')}
+				class:text-green-500={activeTab.general}
+				class="px-3 py-2 cursor-pointer hover:bg-warmGray-700 rounded-lg transition duration-100"
+			>
+				General
+			</div>
+			<div
+				on:click={() => activateTab('secrets')}
+				class:text-green-500={activeTab.secrets}
+				class="px-3 py-2 cursor-pointer hover:bg-warmGray-700 rounded-lg transition duration-100"
+			>
+				Secrets
+			</div>
+			{#if $application.general.isPreviewDeploymentEnabled}
+				<div
+					on:click={() => activateTab('pullRequests')}
+					class:text-green-500={activeTab.pullRequests}
+					class="px-3 py-2 cursor-pointer hover:bg-warmGray-700 rounded-lg transition duration-100"
+				>
+					Pull Requests
+				</div>
+			{/if}
+		</nav>
+	</div>
+	<div class="max-w-4xl mx-auto">
+		<div class="h-full">
+			{#if activeTab.general}
+				<General />
+			{:else if activeTab.secrets}
+				<Secrets />
+			{:else if activeTab.pullRequests && $page.path !== '/application/new'}
+				<PullRequests />
+			{/if}
+		</div>
+	</div>
+{/await}

src/components/Database/Configuration.svelte

@@ -0,0 +1,136 @@
+<script>
+	import { fade } from 'svelte/transition';
+	import { toast } from '@zerodevx/svelte-toast';
+	import MongoDb from './SVGs/MongoDb.svelte';
+	import Postgresql from './SVGs/Postgresql.svelte';
+	import Mysql from './SVGs/Mysql.svelte';
+	import CouchDb from './SVGs/CouchDb.svelte';
+	import Redis from './SVGs/Redis.svelte';
+	import { page, session } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { request } from '$lib/request';
+	import { browser } from '$app/env';
+	import Loading from '$components/Loading.svelte';
+
+	let type;
+	let defaultDatabaseName;
+	let loading = false;
+	async function deploy() {
+		try {
+			loading = true;
+			await request(`/api/v1/databases/deploy`, $session, {
+				body: {
+					type,
+					defaultDatabaseName
+				}
+			});
+
+			if (browser) {
+				toast.push('Database deployment queued.');
+				goto(`/dashboard/databases`, { replaceState: true });
+			}
+		} catch (error) {
+			console.log(error);
+		} finally {
+			loading = false;
+		}
+	}
+
+</script>
+
+{#if loading}
+	<Loading />
+{:else}
+	<div class="text-center space-y-2 max-w-4xl mx-auto px-6" in:fade={{ duration: 100 }}>
+		{#if $page.path === '/database/new'}
+			<div class="flex justify-center space-x-4 font-bold pb-6">
+				<div
+					class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-green-600 p-2 rounded bg-warmGray-800 w-32"
+					class:border-green-600={type === 'mongodb'}
+					on:click={() => (type = 'mongodb')}
+				>
+					<div class="flex items-center justify-center  my-2">
+						<MongoDb customClass="w-6" />
+					</div>
+					<div class="text-white">MongoDB</div>
+				</div>
+				<div
+					class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-red-600 p-2 rounded bg-warmGray-800 w-32"
+					class:border-red-600={type === 'couchdb'}
+					on:click={() => (type = 'couchdb')}
+				>
+					<div class="flex items-center justify-center  my-2">
+						<CouchDb customClass="w-12 text-red-600 fill-current" />
+					</div>
+					<div class="text-white">Couchdb</div>
+				</div>
+				<div
+					class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-blue-600 p-2 rounded bg-warmGray-800 w-32"
+					class:border-blue-600={type === 'postgresql'}
+					on:click={() => (type = 'postgresql')}
+				>
+					<div class="flex items-center justify-center  my-2">
+						<Postgresql customClass="w-12" />
+					</div>
+					<div class="text-white">PostgreSQL</div>
+				</div>
+				<div
+					class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-orange-600 p-2 rounded bg-warmGray-800 w-32"
+					class:border-orange-600={type === 'mysql'}
+					on:click={() => (type = 'mysql')}
+				>
+					<div class="flex items-center justify-center">
+						<Mysql customClass="w-10" />
+					</div>
+					<div class="text-white">MySQL</div>
+				</div>
+				<div
+					class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-red-600 p-2 rounded bg-warmGray-800 w-32"
+					class:border-red-600={type === 'redis'}
+					on:click={() => (type = 'redis')}
+				>
+					<div class="flex items-center justify-center">
+						<Redis customClass="w-12" />
+					</div>
+					<div class="text-white">Redis</div>
+				</div>
+
+				<!-- <button
+      class="button bg-gray-500 p-2 text-white hover:bg-yellow-500 cursor-pointer w-32"
+      on:click="{() => (type = 'clickhouse')}"
+      class:bg-yellow-500="{type === 'clickhouse'}"
+    >
+      Clickhouse
+    </button> -->
+			</div>
+			{#if type}
+				<div class="flex justify-center space-x-4 items-center">
+					{#if type !== 'redis'}
+						<label for="defaultDB">Default database</label>
+						<input
+							id="defaultDB"
+							class="w-64"
+							placeholder="random"
+							bind:value={defaultDatabaseName}
+						/>
+					{/if}
+
+					<button
+						class:bg-green-600={type === 'mongodb'}
+						class:hover:bg-green-500={type === 'mongodb'}
+						class:bg-blue-600={type === 'postgresql'}
+						class:hover:bg-blue-500={type === 'postgresql'}
+						class:bg-orange-600={type === 'mysql'}
+						class:hover:bg-orange-500={type === 'mysql'}
+						class:bg-red-600={type === 'couchdb' || type === 'redis'}
+						class:hover:bg-red-500={type === 'couchdb' || type === 'redis'}
+						class:bg-yellow-500={type === 'clickhouse'}
+						class:hover:bg-yellow-400={type === 'clickhouse'}
+						class="button p-2 w-32 text-white"
+						on:click={deploy}>Deploy</button
+					>
+				</div>
+			{/if}
+		{/if}
+	</div>
+{/if}

src/components/Database/SVGs/Clickhouse.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let customClass;
+</script>
+
+<svg class="{customClass}" viewBox="0 0 9 8" xmlns="http://www.w3.org/2000/svg"
+  ><path d="m0 7h1v1h-1z" fill="#f00"></path><path
+    d="m0 0h1v7h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 3.25h1v1.5h-1z"
+    fill="#fc0"></path></svg
+>

src/components/Database/SVGs/Redis.svelte

@@ -0,0 +1,37 @@
+<script>
+	export let customClass;
+
+</script>
+
+<svg
+	class={customClass}
+	height="64"
+	viewBox="0 0 32 32"
+	width="64"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	><defs
+		><path
+			id="a"
+			d="m45.536 38.764c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276c-1-.478-1.524-.88-1.524-1.26v-3.813s14.447-3.145 16.78-3.982 3.14-.867 5.126-.14 13.853 2.868 15.814 3.587v3.76c0 .377-.452.8-1.477 1.324z"
+		/><path
+			id="b"
+			d="m45.536 28.733c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276-2.04-1.613-.077-2.382l15.332-5.935c2.332-.837 3.14-.867 5.126-.14s12.35 4.853 14.312 5.57 2.037 1.31.024 2.36z"
+		/></defs
+	><g transform="matrix(.848327 0 0 .848327 -7.883573 -9.449691)"
+		><use fill="#a41e11" xlink:href="#a" /><path
+			d="m45.536 34.95c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276-2.04-1.613-.077-2.382l15.332-5.936c2.332-.836 3.14-.867 5.126-.14s12.35 4.852 14.31 5.582 2.037 1.31.024 2.36z"
+			fill="#d82c20"
+		/><use fill="#a41e11" xlink:href="#a" y="-6.218" /><use fill="#d82c20" xlink:href="#b" /><path
+			d="m45.536 26.098c-2.013 1.05-12.44 5.337-14.66 6.495s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276c-1-.478-1.524-.88-1.524-1.26v-3.815s14.447-3.145 16.78-3.982 3.14-.867 5.126-.14 13.853 2.868 15.814 3.587v3.76c0 .377-.452.8-1.477 1.324z"
+			fill="#a41e11"
+		/><use fill="#d82c20" xlink:href="#b" y="-6.449" /><g fill="#fff"
+			><path
+				d="m29.096 20.712-1.182-1.965-3.774-.34 2.816-1.016-.845-1.56 2.636 1.03 2.486-.814-.672 1.612 2.534.95-3.268.34zm-6.296 3.912 8.74-1.342-2.64 3.872z"
+			/><ellipse cx="20.444" cy="21.402" rx="4.672" ry="1.811" /></g
+		><path d="m42.132 21.138-5.17 2.042-.004-4.087z" fill="#7a0c00" /><path
+			d="m36.963 23.18-.56.22-5.166-2.042 5.723-2.264z"
+			fill="#ad2115"
+		/></g
+	></svg
+>

src/components/Databases/Configuration/Configuration.svelte

@@ -1,90 +0,0 @@
-<script>
-  import { fetch, dbInprogress } from "@store";
-  import { isActive, redirect } from "@roxi/routify/runtime";
-  import { fade } from "svelte/transition";
-  import { toast } from "@zerodevx/svelte-toast";
-
-  let type;
-  let defaultDatabaseName;
-
-  async function deploy() {
-    try {
-      await $fetch(`/api/v1/databases/deploy`, {
-        body: {
-          type,
-          defaultDatabaseName,
-        },
-      });
-      $dbInprogress = true
-      toast.push("Database deployment queued.");
-      $redirect(`/dashboard/databases`);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-</script>
-
-<div
-  class="text-center space-y-2 max-w-4xl mx-auto px-6"
-  in:fade="{{ duration: 100 }}"
->
-  {#if $isActive("/database/new")}
-    <div class="flex justify-center space-x-4 font-bold pb-6">
-      <button
-        class="button bg-gray-500 p-2 text-white hover:bg-green-600 cursor-pointer w-32"
-        on:click="{() => (type = 'mongodb')}"
-        class:bg-green-600="{type === 'mongodb'}"
-      >
-        MongoDB
-      </button>
-      <button
-        class="button bg-gray-500 p-2 text-white hover:bg-blue-600 cursor-pointer w-32"
-        on:click="{() => (type = 'postgresql')}"
-        class:bg-blue-600="{type === 'postgresql'}"
-      >
-        PostgreSQL
-      </button>
-      <button
-        class="button bg-gray-500 p-2 text-white hover:bg-orange-600 cursor-pointer w-32"
-        on:click="{() => (type = 'mysql')}"
-        class:bg-orange-600="{type === 'mysql'}"
-      >
-        MySQL
-      </button>
-      <button
-      class="button bg-gray-500 p-2 text-white hover:bg-red-600 cursor-pointer w-32"
-      on:click="{() => (type = 'couchdb')}"
-      class:bg-red-600="{type === 'couchdb'}"
-      >
-        Couchdb
-      </button>
-    </div>
-    {#if type}
-      <div>
-        <div
-          class="grid grid-rows-1 justify-center items-center text-center pb-5"
-        >
-          <label for="defaultDB">Default database</label>
-          <input
-            id="defaultDB"
-            class="w-64"
-            placeholder="random"
-            bind:value="{defaultDatabaseName}"
-          />
-        </div>
-        <button
-          class:bg-green-600="{type === 'mongodb'}"
-          class:hover:bg-green-500="{type === 'mongodb'}"
-          class:bg-blue-600="{type === 'postgresql'}"
-          class:hover:bg-blue-500="{type === 'postgresql'}"
-          class:bg-orange-600="{type === 'mysql'}"
-          class:hover:bg-orange-500="{type === 'mysql'}"
-          class:bg-red-600="{type === 'couchdb'}"
-          class:hover:bg-red-500="{type === 'couchdb'}"
-          class="button p-2 w-32 text-white"
-          on:click="{deploy}">Deploy</button
-        >
-      </div>
-    {/if}
-  {/if}
-</div>

src/components/Loading.svelte

@@ -1,52 +1,80 @@
 <style lang="postcss">
-  .loader {
-    width: 8px;
-    height: 40px;
-    border-radius: 4px;
-    display: block;
-    margin: 20px auto;
-    position: relative;
-    background: currentColor;
-    color: #fff;
-    box-sizing: border-box;
-    animation: animloader 0.3s 0.3s linear infinite alternate;
-  }
-
-  .loader::after,
-  .loader::before {
-    content: "";
-    width: 8px;
-    height: 40px;
-    border-radius: 4px;
-    background: currentColor;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 20px;
-    box-sizing: border-box;
-    animation: animloader 0.3s 0.45s linear infinite alternate;
-  }
-  .loader::before {
-    left: -20px;
-    animation-delay: 0s;
-  }
-
-  @keyframes animloader {
-    0% {
-      height: 48px;
+    .loader {
+      width: 8px;
+      height: 40px;
+      border-radius: 4px;
+      display: block;
+      margin: 20px auto;
+      position: relative;
+      background: currentColor;
+      color: #fff;
+      box-sizing: border-box;
+      animation: animloader 0.3s 0.3s linear infinite alternate;
     }
-    100% {
-      height: 4px;
+  
+    .loader::after,
+    .loader::before {
+      content: "";
+      width: 8px;
+      height: 40px;
+      border-radius: 4px;
+      background: currentColor;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 20px;
+      box-sizing: border-box;
+      animation: animloader 0.3s 0.45s linear infinite alternate;
     }
-  }
-</style>
-
-<script>
-  export let fullscreen = true;
-</script>
-
-{#if fullscreen}
-  <div class="fixed top-0 flex flex-wrap content-center h-full w-full">
-    <span class="loader"></span>
-  </div>
-{/if}
+    .loader::before {
+      left: -20px;
+      animation-delay: 0s;
+    }
+  
+    @keyframes animloader {
+      0% {
+        height: 48px;
+      }
+      100% {
+        height: 4px;
+      }
+    }
+  </style>
+  
+  <script>
+    export let github = false;
+    export let githubLoadingText = "Loading GitHub...";
+    export let fullscreen = true;
+  </script>
+  
+  {#if fullscreen}
+    {#if github}
+      <div class="fixed left-0 top-0 flex flex-wrap content-center h-full w-full">
+        <div class="main flex justify-center items-center">
+          <div class="w-64">
+            <svg
+              class=" w-28 animate-bounce mx-auto"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              ><path
+                d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+              ></path></svg
+            >
+            <div class="text-xl font-bold text-center">
+              {githubLoadingText}
+            </div>
+          </div>
+        </div>
+      </div>
+    {:else}
+      <div class="main fixed left-0 top-0 flex flex-wrap content-center h-full">
+        <span class=" loader"></span>
+      </div>
+    {/if}
+  {/if}
+  

src/components/PasswordField.svelte

@@ -0,0 +1,54 @@
+<script>
+  export let value;
+  let showPassword = false;
+</script>
+
+<div class="relative w-full">
+  <input
+    type="{showPassword ? 'text' : 'password'}"
+    class="w-full "
+    {value}
+    disabled
+  />
+  <div
+    class="absolute top-0 my-2 mx-2 right-0 cursor-pointer text-warmGray-600 hover:text-white"
+    on:click="{() => showPassword = !showPassword}"
+  >
+    {#if showPassword}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+        ></path>
+      </svg>
+    {:else}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+        ></path>
+      </svg>
+    {/if}
+  </div>
+</div>

src/components/Service/Plausible.svelte

@@ -0,0 +1,87 @@
+<script>
+	import { fade } from 'svelte/transition';
+	import { toast } from '@zerodevx/svelte-toast';
+	import Loading from '../Loading.svelte';
+	import Tooltip from '$components/Tooltip.svelte';
+	import { request } from '$lib/request';
+	import { page, session } from '$app/stores';
+	import PasswordField from '$components/PasswordField.svelte';
+import { browser } from '$app/env';
+	export let service;
+	let loading = false;
+	async function activate() {
+		try {
+			loading = true;
+			await request(`/api/v1/services/deploy/${$page.params.name}/activate`, $session, {
+				method: 'PATCH',
+				body: {}
+			});
+			browser && toast.push(`All users are activated for Plausible.`);
+		} catch (error) {
+			console.log(error);
+			browser && toast.push(`Ooops, there was an error activating users for Plausible?!`);
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+{#if loading}
+	<Loading />
+{:else}
+	<div class="text-left max-w-5xl mx-auto px-6" in:fade={{ duration: 100 }}>
+		<div class="pb-2 pt-5 space-y-4">
+			<div class="flex space-x-5 items-center">
+				<div class="text-2xl font-bold border-gradient">General</div>
+				<div class="flex-1" />
+				<Tooltip
+					position="bottom"
+					size="large"
+					label="Activate all users in Plausible database, so you can login without the email verification."
+				>
+					<button class="button bg-blue-500 hover:bg-blue-400 px-2" on:click={activate}
+						>Activate All Users</button
+					>
+				</Tooltip>
+			</div>
+
+			<div class="flex items-center pt-4">
+				<div class="font-bold w-64 text-warmGray-400">Domain</div>
+				<input class="w-full" value={service.config.baseURL} disabled />
+			</div>
+			<div class="flex items-center">
+				<div class="font-bold w-64 text-warmGray-400">Email address</div>
+				<input class="w-full" value={service.config.email} disabled />
+			</div>
+			<div class="flex items-center">
+				<div class="font-bold w-64 text-warmGray-400">Username</div>
+				<input class="w-full" value={service.config.userName} disabled />
+			</div>
+			<div class="flex items-center">
+				<div class="font-bold w-64 text-warmGray-400">Password</div>
+				<PasswordField value={service.config.userPassword} />
+			</div>
+			<div class="text-2xl font-bold pt-4 border-gradient w-32">PostgreSQL</div>
+			<div class="flex items-center pt-4">
+				<div class="font-bold w-64 text-warmGray-400">Username</div>
+				<input
+					class="w-full"
+					value={service.config.generateEnvsPostgres.POSTGRESQL_USERNAME}
+					disabled
+				/>
+			</div>
+			<div class="flex items-center">
+				<div class="font-bold w-64 text-warmGray-400">Password</div>
+				<PasswordField value={service.config.generateEnvsPostgres.POSTGRESQL_PASSWORD} />
+			</div>
+			<div class="flex items-center">
+				<div class="font-bold w-64 text-warmGray-400">Database</div>
+				<input
+					class="w-full"
+					value={service.config.generateEnvsPostgres.POSTGRESQL_DATABASE}
+					disabled
+				/>
+			</div>
+		</div>
+	</div>
+{/if}

src/components/Tooltip.svelte

@@ -0,0 +1,15 @@
+<script>
+    export let position = "bottom";
+    export let label;
+    export let size = "fit";
+  </script>
+  
+  <span
+    aria-label="{label}"
+    data-microtip-position="{position}"
+    data-microtip-size="{size}"
+    role="tooltip"
+  >
+  <slot></slot>
+  </span>
+  

src/components/TooltipInfo.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let position = "top";
+  export let label;
+  export let size = "large";
+</script>
+
+<span
+  class="absolute px-1 py-1"
+  aria-label="{label}"
+  data-microtip-position="{position}"
+  data-microtip-size="{size}"
+  role="tooltip"
+>
+  <svg
+    class="w-4 text-warmGray-600 hover:text-white"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+      clip-rule="evenodd"></path>
+  </svg>
+</span>

src/global.d.ts

@@ -0,0 +1,122 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+export type DateTimeFormatOptions = {
+	localeMatcher?: 'lookup' | 'best fit';
+	weekday?: 'long' | 'short' | 'narrow';
+	era?: 'long' | 'short' | 'narrow';
+	year?: 'numeric' | '2-digit';
+	month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+	day?: 'numeric' | '2-digit';
+	hour?: 'numeric' | '2-digit';
+	minute?: 'numeric' | '2-digit';
+	second?: 'numeric' | '2-digit';
+	timeZoneName?: 'long' | 'short';
+	formatMatcher?: 'basic' | 'best fit';
+	hour12?: boolean;
+	timeZone?: string;
+};
+export type Application = {
+	github: {
+		installation: {
+			id: number;
+		};
+		app: {
+			id: number;
+		};
+	};
+	repository: {
+		id: number;
+		organization: string;
+		name: string;
+		branch: string;
+	};
+	general: {
+		deployId: string;
+		nickname: string;
+		workdir: string;
+		isPreviewDeploymentEnabled: boolean;
+		pullRequest: number;
+	};
+	build: {
+		pack: string;
+		directory: string;
+		command: {
+			build: string | null;
+			installation: string;
+			start: string;
+			python: {
+				module?: string;
+				instance?: string;
+			};
+		};
+		container: {
+			name: string;
+			tag: string;
+			baseSHA: string;
+		};
+	};
+	publish: {
+		directory: string;
+		domain: string;
+		path: string;
+		port: number;
+		secrets: Array<Record<string, unknown>>;
+	};
+};
+export type Database = {
+	config:
+		| {
+				general: {
+					deployId: string;
+					nickname: string;
+					workdir: string;
+					type: string;
+				};
+				database: {
+					usernames: Array;
+					passwords: Array;
+					defaultDatabaseName: string;
+				};
+				deploy: {
+					name: string;
+				};
+		  }
+		| Record<string, unknown>;
+	envs: Array;
+};
+export type Dashboard = {
+	databases: {
+		deployed:
+			| [
+					{
+						configuration: Database;
+					}
+			  ]
+			| [];
+	};
+	services: {
+		deployed:
+			| [
+					{
+						configuration: any;
+					}
+			  ]
+			| [];
+	};
+	applications: {
+		deployed:
+			| [
+					{
+						configuration: Application;
+						UpdatedAt: any;
+					}
+			  ]
+			| [];
+	};
+};
+export type GithubInstallations = {
+	id: number;
+	app_id: number;
+};

src/hooks/index.ts

@@ -0,0 +1,150 @@
+import dotEnvExtended from 'dotenv-extended';
+dotEnvExtended.load();
+import { publicPages } from '$lib/consts';
+import mongoose from 'mongoose';
+import { verifyUserId } from '$lib/api/common';
+import { initializeSession } from 'svelte-kit-cookie-session';
+import { cleanupStuckedDeploymentsInDB } from '$lib/api/applications/cleanup';
+import { docker } from '$lib/api/docker';
+import Configuration from '$models/Configuration';
+
+process.on('SIGINT', function () {
+	mongoose.connection.close(function () {
+		console.log('Mongoose default connection disconnected through app termination');
+		process.exit(0);
+	});
+});
+
+async function connectMongoDB() {
+	// TODO: Save configurations on start?
+	const { MONGODB_USER, MONGODB_PASSWORD, MONGODB_HOST, MONGODB_PORT, MONGODB_DB } = process.env;
+	try {
+		if (process.env.NODE_ENV === 'production') {
+			await mongoose.connect(
+				`mongodb://${MONGODB_USER}:${MONGODB_PASSWORD}@${MONGODB_HOST}:${MONGODB_PORT}/${MONGODB_DB}?authSource=${MONGODB_DB}&readPreference=primary&ssl=false`,
+				{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }
+			);
+		} else {
+			await mongoose.connect(
+				'mongodb://supercooldbuser:developmentPassword4db@localhost:27017/coolify?&readPreference=primary&ssl=false',
+				{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }
+			);
+		}
+		console.log('Connected to mongodb.');
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+(async () => {
+	if (mongoose.connection.readyState !== 1) await connectMongoDB();
+	try {
+		await mongoose.connection.db.dropCollection('logs-servers');
+	} catch (error) {
+		//
+	}
+	try {
+		await cleanupStuckedDeploymentsInDB();
+	} catch (error) {
+		console.log(error);
+	}
+	try {
+		const dockerServices = await docker.engine.listServices();
+		let applications: any = dockerServices.filter(
+			(r) =>
+				r.Spec.Labels.managedBy === 'coolify' &&
+				r.Spec.Labels.type === 'application' &&
+				r.Spec.Labels.configuration
+		);
+		applications = applications.map((r) => {
+			if (JSON.parse(r.Spec.Labels.configuration)) {
+				return {
+					configuration: JSON.parse(r.Spec.Labels.configuration),
+					UpdatedAt: r.UpdatedAt
+				};
+			}
+			return {};
+		});
+		applications = [
+			...new Map(
+				applications.map((item) => [
+					item.configuration.publish.domain + item.configuration.publish.path,
+					item
+				])
+			).values()
+		];
+		for (const application of applications) {
+			await Configuration.findOneAndUpdate(
+				{
+					'repository.name': application.configuration.repository.name,
+					'repository.organization': application.configuration.repository.organization,
+					'repository.branch': application.configuration.repository.branch,
+					'publish.domain': application.configuration.publish.domain
+				},
+				{
+					...application.configuration
+				},
+				{ upsert: true, new: true }
+			);
+		}
+	} catch (error) {
+		console.log(error);
+	}
+})();
+
+export async function handle({ request, resolve }) {
+	const { SECRETS_ENCRYPTION_KEY } = process.env;
+	let session;
+	try {
+		session = initializeSession(request.headers, {
+			secret: SECRETS_ENCRYPTION_KEY,
+			cookie: { path: '/' }
+		});
+	} catch (error) {
+		return {
+			status: 302,
+			headers: {
+				'set-cookie': 'kit.session=deleted;path=/;expires=Wed, 21 Oct 2015 07:28:00 GMT',
+				location: '/'
+			}
+		};
+	}
+
+	request.locals.session = session;
+	if (session?.data?.coolToken) {
+		try {
+			await verifyUserId(session.data.coolToken);
+			request.locals.session = session;
+		} catch (error) {
+			request.locals.session.destroy = true;
+		}
+	}
+	const response = await resolve(request);
+	if (!session['set-cookie']) {
+		if (!session?.data?.coolToken && !publicPages.includes(request.path)) {
+			return {
+				status: 301,
+				headers: {
+					location: '/'
+				}
+			};
+		}
+		return response;
+	}
+	return {
+		...response,
+		headers: {
+			...response.headers,
+			...session
+		}
+	};
+}
+export function getSession(request) {
+	const { data } = request.locals.session;
+	return {
+		isLoggedIn: data && Object.keys(data).length !== 0 ? true : false,
+		expires: data.expires,
+		coolToken: data.coolToken,
+		ghToken: data.ghToken
+	};
+}

src/index.css

@@ -1,18 +0,0 @@
-@import "tailwindcss/base.css";
-@import "tailwindcss/components.css";
-@import "tailwindcss/utilities.css";
-
-html {
-  height: 100%;
-}
-body {
-  background-color: rgb(22, 22, 22);
-  min-height: 100vh;
-  overflow-x: hidden;
-}
-
-:root {
-  --toastBackground: rgba(41, 37, 36, 0.8);
-  --toastProgressBackground: transparent;
-  --toastFont: 'Inter';
-}

src/index.js

@@ -1,8 +0,0 @@
-import App from './App.svelte'
-import './index.css'
-
-const app = new App({
-  target: document.body
-})
-
-export default app