v1.0.5 (#25)

- Update sequence a bit optimized.
- Dependency updates.
- Edge case on repo/branch selection handled.
- More default templates. Thanks to @SaraVieira

.prettierrc

@@ -11,4 +11,4 @@
     "svelteBracketNewLine": true,
     "svelteAllowShorthand": true,
     "plugins": ["prettier-plugin-svelte"]
-  }
+  }

install.sh

@@ -1,4 +1,6 @@
 #!/bin/bash
+
+preTasks() {
 echo '
 ##############################
 #### Pulling Git Updates #####
@@ -39,9 +41,10 @@ if [ $? -ne 0 ]; then
 ##################################'
     exit 1
 fi
-
+}
 case "$1" in
     "all")
+       preTasks
        echo '
 #################################
 #### Rebuilding everything. #####
@@ -49,6 +52,7 @@ case "$1" in
         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")
+       preTasks
        echo '
 ##############################
 #### Rebuilding Coolify. #####
@@ -56,6 +60,7 @@ case "$1" in
         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")
+       preTasks
        echo '
 ############################
 #### Rebuilding Proxy. #####
@@ -63,6 +68,7 @@ case "$1" in
         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")
+        preTasks
         echo '
 ################################
 #### Upgrading Coolify P1. #####

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/install.js

@@ -13,7 +13,8 @@ program
 
 program.parse(process.argv)
 
-if (program.check) {
+const options = program.opts()
+if (options.check) {
   checkConfig().then(() => {
     console.log('Config: OK')
   }).catch((err) => {
@@ -26,17 +27,17 @@ if (program.check) {
     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 network create ${process.env.DOCKER_NETWORK} --driver overlay`, { silent: !options.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') {
+  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 (program.type === 'proxy') {
+  } else if (options.type === 'proxy') {
     shell.exec('docker service rm coollabs-coolify_proxy')
   }
-  if (program.type !== 'upgrade') {
-    shell.exec('set -a && source .env && set +a && envsubst < install/coolify-template.yml | docker stack deploy -c - coollabs-coolify', { silent: !program.debug, shell: '/bin/bash' })
+  if (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

@@ -10,13 +10,13 @@ program
   .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)
 }
 
-if (program.type === 'upgrade') {
+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: !program.debug, shell: '/bin/bash' })
+  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

@@ -16,45 +16,45 @@
     "build:svite": "svite build"
   },
   "dependencies": {
-    "@roxi/routify": "^2.7.3",
-    "@zerodevx/svelte-toast": "^0.1.4",
-    "axios": "^0.21.0",
-    "commander": "^6.2.1",
+    "@roxi/routify": "^2.15.1",
+    "@zerodevx/svelte-toast": "^0.2.0",
+    "axios": "^0.21.1",
+    "commander": "^7.2.0",
     "compare-versions": "^3.6.0",
     "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": "^3.14.1",
     "fastify-env": "^2.1.0",
-    "fastify-jwt": "^2.1.3",
+    "fastify-jwt": "^2.4.0",
     "fastify-plugin": "^3.0.0",
-    "fastify-static": "^3.3.0",
+    "fastify-static": "^4.0.1",
     "generate-password": "^1.6.0",
     "js-yaml": "^4.0.0",
     "jsonwebtoken": "^8.5.1",
-    "mongoose": "^5.11.4",
+    "mongoose": "^5.12.3",
     "shelljs": "^0.8.4",
     "svelte-select": "^3.17.0",
     "unique-names-generator": "^4.4.0"
   },
   "devDependencies": {
-    "mongodb-memory-server-core": "^6.9.3",
-    "nodemon": "^2.0.6",
+    "mongodb-memory-server-core": "^6.9.6",
+    "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.35",
-    "postcss-import": "^12.0.1",
-    "postcss-load-config": "^3.0.0",
+    "postcss": "^8.2.9",
+    "postcss-import": "^14.0.1",
+    "postcss-load-config": "^3.0.1",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "1.19",
-    "prettier-plugin-svelte": "^2.1.6",
+    "prettier": "2.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
     "standard": "^16.0.3",
-    "svelte": "^3.29.7",
-    "svelte-hmr": "^0.12.2",
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.0",
     "svelte-preprocess": "^4.6.1",
     "svite": "0.8.1",
-    "tailwindcss": "compat"
+    "tailwindcss": "2.1.1"
   },
   "keywords": [
     "svelte",

src/App.svelte

@@ -9,6 +9,10 @@
 </script>
 
 <style lang="postcss">
+  :global(.main) {
+    width: calc(100% - 4rem);
+    margin-left: 4rem;
+  }
   :global(._toastMsg) {
     @apply text-sm font-bold !important;
   }
@@ -57,6 +61,22 @@
   :global(.h-271) {
     min-height: 271px !important;
   }
+  :global(.repository-select-search .listItem .item),
+  :global(.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;
+  }
+
+  :global(.repository-select-search .listContainer) {
+    @apply bg-transparent !important;
+  }
+
+  :global(.repository-select-search .clearSelect) {
+    @apply text-white cursor-pointer !important;
+  }
+
+  :global(.repository-select-search .selectedItem) {
+    @apply text-white relative cursor-pointer font-bold text-sm flex items-center !important;
+  }
 </style>
 
 <SvelteToast options="{options}" />

src/components/Application/Configuration/Branches.svelte

@@ -1,24 +1,46 @@
 <script>
   export let loading, branches;
+  import { isActive } from "@roxi/routify";
   import { application } from "@store";
+  import Select from "svelte-select";
+
+  const selectedValue =
+    !$isActive("/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>
-    <select disabled>
-      <option selected>Loading branches</option>
-    </select>
+    <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>
-    <!-- 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-bold">{branch.name}</option>
-      {/each}
-    </select>
+    <div class="repository-select-search col-span-2">
+      <Select
+        containerClasses="w-full border-none bg-transparent"
+        on:select="{handleSelect}"
+        selectedValue="{selectedValue}"
+        isClearable="{false}"
+        items="{branches.map(b => ({ label: b.name, value: b.name }))}"
+        showIndicator="{$isActive('/application/new')}"
+        noOptionsMessage="No branches found"
+        placeholder="Select a branch"
+        isDisabled="{!$isActive('/application/new')}"
+      />
+    </div>
   </div>
 {/if}

src/components/Application/Configuration/Configuration.svelte

@@ -29,6 +29,7 @@
 
   async function loadBranches() {
     loading.branches = true;
+    if ($isActive("/application/new")) $application.repository.branch = null
     const selectedRepository = repositories.find(
       r => r.id === $application.repository.id,
     );
@@ -80,7 +81,6 @@
             $application.github.installation.id,
             page,
           );
-
           repositories = repositories.concat(repos.repositories);
         }
       }
@@ -97,8 +97,10 @@
       }
     } catch (error) {
       return false;
+    } finally {
+      loading.github = false;
     }
-    loading.github = false;
+ 
   }
   function modifyGithubAppConfig() {
     const left = screen.width / 2 - 1020 / 2;

src/components/Application/Configuration/Repositories.svelte

@@ -1,22 +1,3 @@
-<style lang="postcss">
-  :global(.repository-select-search .listItem .item),
-  :global(.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;
-  }
-
-  :global(.repository-select-search .listContainer) {
-    @apply bg-transparent !important;
-  }
-
-  :global(.repository-select-search .clearSelect) {
-    @apply text-white cursor-pointer !important;
-  }
-
-  :global(.repository-select-search .selectedItem) {
-    @apply text-white relative cursor-pointer font-bold text-sm flex items-center !important;
-  }
-</style>
-
 <script>
   import { createEventDispatcher } from "svelte";
   import { isActive } from "@roxi/routify";
@@ -53,6 +34,7 @@
           selectedValue="{selectedValue}"
           isClearable="{false}"
           items="{items}"
+          showIndicator="{$isActive('/application/new')}"
           noOptionsMessage="No Repositories found"
           placeholder="Select a Repository"
           isDisabled="{!$isActive('/application/new')}"

src/components/Application/Configuration/Tabs.svelte

@@ -2,7 +2,7 @@
   import { redirect, isActive } from "@roxi/routify";
   import { onMount } from "svelte";
   import { toast } from "@zerodevx/svelte-toast";
-
+  import templates from "../../../utils/templates";
   import { application, fetch, deployments } from "@store";
   import General from "./ActiveTab/General.svelte";
   import BuildStep from "./ActiveTab/BuildStep.svelte";
@@ -57,30 +57,43 @@
           $application.build.pack = "custom";
           toast.push("Custom Dockerfile found. Build pack set to custom.");
         } else if (packageJson) {
-          // Check here for things like nextjs,react,vue,blablabla
           const { content } = await $fetch(packageJson.git_url);
           const packageJsonContent = JSON.parse(atob(content));
-
-          if (packageJsonContent.dependencies.hasOwnProperty("next")) {
-            // Next.js
-            $application.build.pack = "nodejs";
-            $application.build.command.installation = "yarn install";
-            if (packageJsonContent.scripts.hasOwnProperty("build")) {
-              $application.build.command.build = `yarn build`;
-            }
-            toast.push("Next.js App detected. Build pack set to Node.js.");
-          } else if (packageJsonContent.dependencies.hasOwnProperty("react")) {
-            // CRA
-            $application.build.pack = "static";
-            $application.publish.directory = "build";
-            $application.build.command.installation = "yarn install";
-            if (packageJsonContent.scripts.hasOwnProperty("build")) {
-              $application.build.command.build = `yarn build`;
-            }
-            toast.push(
-              "React App detected. Build pack set to static with build phase.",
+          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.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;
+              }
+              toast.push(
+                `${config.name} App detected. Default values set.`,
+              );
+            } 
+ 
+          });
+
         }
       } catch (error) {
         // Nothing detected
@@ -106,7 +119,7 @@
 </script>
 
 {#if loading}
-  <Loading github githubLoadingText="Scanning repository 🤖" />
+  <Loading github githubLoadingText="Scanning repository..." />
 {:else}
   <div class="block text-center py-4">
     <nav

src/components/Loading.svelte

@@ -50,7 +50,7 @@
 {#if fullscreen}
   {#if github}
     <div class="fixed left-0 top-0 flex flex-wrap content-center h-full w-full">
-      <div class="w-full flex justify-center items-center">
+      <div class="main flex justify-center items-center">
         <div class="w-64">
           <svg
             class=" w-28 animate-bounce mx-auto"
@@ -65,15 +65,15 @@
               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="w-full text-xl font-bold text-center">
+          <div class="text-xl font-bold text-center">
             {githubLoadingText}
           </div>
         </div>
       </div>
     </div>
   {:else}
-    <div class="fixed left-0 top-0 flex flex-wrap content-center h-full w-full">
-      <span class="loader"></span>
+    <div class="main fixed left-0 top-0 flex flex-wrap content-center h-full">
+      <span class=" loader"></span>
     </div>
   {/if}
 {/if}

src/index.css

@@ -17,6 +17,12 @@ :root {
   --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;
+}
+
 [aria-label][role~="tooltip"]::after {
   background: rgba(41, 37, 36, 0.9);
   color: white;

src/pages/_layout.svelte

@@ -2,10 +2,6 @@
   .min-w-4rem {
     min-width: 4rem;
   }
-  .main {
-    width: calc(100% - 4rem);
-    margin-left: 4rem;
-  }
 </style>
 
 <script>

src/pages/application/_layout.svelte

@@ -151,7 +151,6 @@ import Tooltip from "../../components/Tooltip/Tooltip.svelte";
   <div class="border border-warmGray-700 h-8"></div>
   <Tooltip position="bottom" label="Logs" >
   <button
-
     class="icon"
     class:text-warmGray-700="{$isActive('/application/new')}"
     disabled="{$isActive('/application/new')}"

src/pages/index.svelte

@@ -43,7 +43,7 @@
       <p
         class="mt-1 pb-8 font-extrabold text-white text-5xl sm:tracking-tight lg:text-6xl text-center"
       >
-        Coolify
+        <span class="border-gradient">Coolify</span>
       </p>
       <h2 class="text-2xl md:text-3xl font-extrabold text-white">
         An open-source, hassle-free, self-hostable<br />

src/utils/templates.js

@@ -0,0 +1,51 @@
+const defaultBuildAndDeploy = {
+  installation: 'yarn install',
+  build: 'yarn build'
+}
+
+const templates = {
+  next: {
+    pack: 'nodejs',
+    ...defaultBuildAndDeploy,
+    port: 3000,
+    name: 'Next.js'
+  },
+  nuxt: {
+    pack: 'nodejs',
+    ...defaultBuildAndDeploy,
+    port: 8080,
+    name: 'Nuxt'
+  },
+  'react-scripts': {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'build',
+    name: 'Create React'
+  },
+  'parcel-bundler': {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'dist',
+    name: 'Parcel'
+  },
+  'vue-cli-service': {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'dist',
+    name: 'Vue CLI'
+  },
+  gatsby: {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'public',
+    name: 'Gatsby'
+  },
+  'preact-cli': {
+    pack: 'static',
+    ...defaultBuildAndDeploy,
+    directory: 'build',
+    name: 'Preact CLI'
+  }
+}
+
+export default templates