v1.0.5 (#25)

- Update sequence a bit optimized. - Dependency updates. - Edge case on repo/branch selection handled. - More default templates. Thanks to @SaraVieira
2021-04-06 23:22:48 +02:00 · 2021-04-06 23:22:48 +02:00 · 703d941f23
commit 703d941f23
parent c691c52751
19 changed files with 2913 additions and 3152 deletions
--- a/install.sh
+++ b/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. #####
--- a/install/Dockerfile
+++ b/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
--- a/install/Dockerfile-base
+++ b/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
--- a/install/install.js
+++ b/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' })
  }
 }

--- a/install/update.js
+++ b/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' })
 }
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.svelte
+++ b/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}" />
--- a/src/components/Application/Configuration/Branches.svelte
+++ b/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}
--- a/src/components/Application/Configuration/Configuration.svelte
+++ b/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,9 +97,11 @@
      }
    } catch (error) {
      return false;
-    }
+    } finally {
      loading.github = false;
    }
+ 
+  }
  function modifyGithubAppConfig() {
    const left = screen.width / 2 - 1020 / 2;
    const top = screen.height / 2 - 618 / 2;
--- a/src/components/Application/Configuration/Repositories.svelte
+++ b/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')}"
--- a/src/components/Application/Configuration/Tabs.svelte
+++ b/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`;
+          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;
              }
-            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`;
+
+              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(
-              "React App detected. Build pack set to static with build phase.",
+                `${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
--- a/src/components/Loading.svelte
+++ b/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,14 +65,14 @@
              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">
+    <div class="main fixed left-0 top-0 flex flex-wrap content-center h-full">
      <span class=" loader"></span>
    </div>
  {/if}
--- a/src/index.css
+++ b/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;
--- a/src/pages/_layout.svelte
+++ b/src/pages/_layout.svelte
@ -2,10 +2,6 @@
  .min-w-4rem {
    min-width: 4rem;
  }
-  .main {
-    width: calc(100% - 4rem);
-    margin-left: 4rem;
-  }
 </style>

 <script>
--- a/src/pages/application/_layout.svelte
+++ b/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')}"
--- a/src/pages/index.svelte
+++ b/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 />
--- a/src/utils/templates.js
+++ b/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