v1.0.16 (#51)

2021-06-07 21:33:11 +02:00 · 2021-06-07 21:33:11 +02:00 · 31b3f58b2c
commit 31b3f58b2c
parent 9c173d1de0
36 changed files with 1480 additions and 1999 deletions
--- a/README.md
+++ b/README.md
@ -54,7 +54,7 @@ ## Support
 - Twitter: [@andrasbacsai](https://twitter.com/andrasbacsai)
 - Telegram: [@andrasbacsai](https://t.me/andrasbacsai)
 - Email: [andras@coollabs.io](mailto:andras@coollabs.io)
- Discord: [Invitation](https://discord.com/invite/bvS3WhR)
+- Discord: [Invitation](https://discord.gg/xhBCC7eGKw)

 ## Roadmap

--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
 	"name": "coolify",
 	"description": "An open-source, hassle-free, self-hostable Heroku & Netlify alternative.",
-	"version": "1.0.15",
+	"version": "1.0.16",
 	"license": "AGPL-3.0",
 	"scripts": {
 		"dev:docker:start": "docker-compose -f docker-compose-dev.yml up -d",
@ -14,8 +14,8 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-node": "^1.0.0-next.20",
-		"@sveltejs/kit": "1.0.0-next.107",
+		"@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.23.0",
 		"@typescript-eslint/parser": "^4.23.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/Application/ActiveTab/General.svelte
+++ b/src/components/Application/ActiveTab/General.svelte
@ -1,8 +1,17 @@
 <script>
-	import { application } from '$store';
+	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: {
@ -110,6 +119,45 @@
 			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';
@ -117,6 +165,34 @@
 			$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();
 	});
@ -235,6 +311,127 @@
 	</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>
@ -298,11 +495,7 @@
 			</div>
 		</div>
 	</div>
-	<div
-		class="text-2xl font-bold w-40 border-gradient"
-	>
-		Commands
-	</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">
@ -320,17 +513,17 @@
 						placeholder="main"
 					/>
 					<label for="ApplicationInstance"
-					>Application Instance<TooltipInfo
-						label="The instance name (the main function name. See gunicorn.org for more details)"
-					/>
-				</label>
+						>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"
-				/>
+					<input
+						class="mb-6"
+						id="ApplicationInstance"
+						bind:value={$application.build.command.python.instance}
+						placeholder="app"
+					/>
 				{:else}
 					<label
 						for="installCommand"
--- a/src/components/Application/ActiveTab/PullRequests.svelte
+++ b/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>
--- a/src/components/Application/Configuration.svelte
+++ b/src/components/Application/Configuration.svelte
@ -2,7 +2,14 @@
 	import { goto } from '$app/navigation';
 	import { request } from '$lib/request';
 	import { session } from '$app/stores';
-	import { githubRepositories, application, githubInstallations } from '$store';
+	import {
+		githubRepositories,
+		application,
+		githubInstallations,
+		prApplication,
+		initConf,
+		isPullRequestPermissionsGranted
+	} from '$store';

 	import { fade } from 'svelte/transition';
 	import Loading from '$components/Loading.svelte';
@ -18,6 +25,7 @@
 	};
 	let branches = [];
 	let relogin = false;
+	let permissions = {};
 	function dashify(str: string, options?: any) {
 		if (typeof str !== 'string') return str;
 		return str
@ -110,8 +118,17 @@
 			$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;
@ -128,20 +145,23 @@
 					', toolbar=0, menubar=0, status=0'
 			);
 			const timer = setInterval(async () => {
-				if (newWindow.closed) {
+				if (newWindow?.closed) {
 					clearInterval(timer);
 					loading.github = true;

 					if ($application.repository.name) {
 						try {
-							const config = await request(`/api/v1/application/config`, $session, {
+							const { configuration } = await request(`/api/v1/application/config`, $session, {
 								body: {
 									name: $application.repository.name,
 									organization: $application.repository.organization,
 									branch: $application.repository.branch
 								}
 							});
-							$application = { ...config };
+
+							$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 });
 						}
--- a/src/components/Application/Login.svelte
+++ b/src/components/Application/Login.svelte
@ -14,7 +14,7 @@
 				', toolbar=0, menubar=0, status=0'
 		);
 		const timer = setInterval(() => {
-			if (newWindow.closed) {
+			if (newWindow?.closed) {
 				clearInterval(timer);
 				location.reload()
 			}
--- a/src/components/Application/Navbar.svelte
+++ b/src/components/Application/Navbar.svelte
@ -8,17 +8,23 @@
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/env';
 	async function removeApplication() {
-		await request(`/api/v1/application/remove`, $session, {
-			body: {
-				organization: $application.repository.organization,
-				name: $application.repository.name,
-				branch: $application.repository.branch
-			}
-		});
+		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 });
+			browser && toast.push('Application removed.');
+			$application = JSON.parse(JSON.stringify(initialApplication));
+			browser && goto(`/dashboard/applications`, { replaceState: true });
+		}
 	}

 	onDestroy(() => {
@ -50,6 +56,7 @@
 			// 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">
--- a/src/components/Application/Tabs.svelte
+++ b/src/components/Application/Tabs.svelte
@ -1,7 +1,7 @@
 <script>
 	import { toast } from '@zerodevx/svelte-toast';
 	import templates from '$lib/api/applications/packs/templates';
-	import { application, dashboard } from '$store';
+	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';
@ -9,17 +9,18 @@
 	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,
-		buildStep: false,
-		secrets: false
+		secrets: false,
+		pullRequests: false
 	};
 	function activateTab(tab) {
 		if (activeTab.hasOwnProperty(tab)) {
 			activeTab = {
 				general: false,
-				buildStep: false,
+				pullRequests: false,
 				secrets: false
 			};
 			activeTab[tab] = true;
@ -48,16 +49,7 @@
 			}
 			return;
 		}
-		if ($page.path !== '/application/new') {
-			const config = await request(`/api/v1/application/config`, $session, {
-				body: {
-					name: $application.repository.name,
-					organization: $application.repository.organization,
-					branch: $application.repository.branch
-				}
-			});
-			$application = { ...config };
-		} else {
+		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}`,
@ -103,17 +95,18 @@
 					$application.build.pack = 'rust';
 					browser && toast.push(`Rust language detected. Default values set.`);
 				} else if (requirementsTXT) {
-					$application.build.pack = 'python'
+					$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()}
@ -135,6 +128,15 @@
 			>
 				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">
@ -143,6 +145,8 @@
 				<General />
 			{:else if activeTab.secrets}
 				<Secrets />
+			{:else if activeTab.pullRequests && $page.path !== '/application/new'}
+				<PullRequests />
 			{/if}
 		</div>
 	</div>
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -36,6 +36,8 @@ export type Application = {
 		deployId: string;
 		nickname: string;
 		workdir: string;
+		isPreviewDeploymentEnabled: boolean;
+		pullRequest: number;
 	};
 	build: {
 		pack: string;
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@ -80,9 +80,10 @@ async function connectMongoDB() {
 				'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 })
+			}, { upsert: true, new: true })
 		}
 	} catch (error) {
 		console.log(error)
@ -90,12 +91,24 @@ async function connectMongoDB() {
 })()


-export async function handle({ request, render }) {
+export async function handle({ request, resolve }) {
 	const { SECRETS_ENCRYPTION_KEY } = process.env;
-	const session = initializeSession(request.headers, {
-		secret: SECRETS_ENCRYPTION_KEY,
-		cookie: { path: '/' }
-	});
+	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 {
@ -105,7 +118,7 @@ export async function handle({ request, render }) {
 			request.locals.session.destroy = true;
 		}
 	}
-	const response = await render(request);
+	const response = await resolve(request);
 	if (!session['set-cookie']) {
 		if (!session?.data?.coolToken && !publicPages.includes(request.path)) {
 			return {
--- a/src/lib/api/applications/cleanup.ts
+++ b/src/lib/api/applications/cleanup.ts
@ -11,7 +11,8 @@ export async function deleteSameDeployments(configuration) {
 			const running = JSON.parse(s.Spec.Labels.configuration);
 			if (
 				running.repository.id === configuration.repository.id &&
-				running.repository.branch === configuration.repository.branch
+				running.repository.branch === configuration.repository.branch && 
+				running.publish.domain === configuration.publish.domain
 			) {
 				await execShellAsync(`docker stack rm ${s.Spec.Labels['com.docker.stack.namespace']}`);
 			}
--- a/src/lib/api/applications/cloneRepository.ts
+++ b/src/lib/api/applications/cloneRepository.ts
@ -4,7 +4,7 @@ import { execShellAsync } from '../common';
 export default async function (configuration) {
 	try {
 		const { GITHUB_APP_PRIVATE_KEY } = process.env;
-		const { workdir } = configuration.general;
+		const { workdir, isPreviewDeploymentEnabled, pullRequest } = configuration.general;
 		const { organization, name, branch } = configuration.repository;
 		const github = configuration.github;
 		if (!github.installation.id || !github.app.id) {
@ -37,8 +37,12 @@ export default async function (configuration) {
 		await execShellAsync(
 			`mkdir -p ${workdir} && git clone -q -b ${branch} https://x-access-token:${token}@github.com/${organization}/${name}.git ${workdir}/`
 		);
+
+		if (isPreviewDeploymentEnabled && pullRequest && pullRequest !== 0) {
+			await execShellAsync(`cd ${workdir} && git fetch origin pull/${pullRequest}/head:pull_${pullRequest} && git checkout pull_${pullRequest}`)
+		}
 		configuration.build.container.tag = (
-			await execShellAsync(`cd ${configuration.general.workdir}/ && git rev-parse HEAD`)
+			await execShellAsync(`cd ${workdir}/ && git rev-parse HEAD`)
 		)
 			.replace('\n', '')
 			.slice(0, 7);
--- a/src/lib/api/applications/configuration.ts
+++ b/src/lib/api/applications/configuration.ts
@ -10,9 +10,8 @@ function getUniq() {
 }

 export function setDefaultConfiguration(configuration) {
-	const nickname = getUniq();
+	const nickname = configuration.general.nickname || getUniq();
 	const deployId = cuid();
-
 	const shaBase = JSON.stringify({ repository: configuration.repository });
 	const sha256 = crypto.createHash('sha256').update(shaBase).digest('hex');

@ -21,12 +20,14 @@ export function setDefaultConfiguration(configuration) {
 	configuration.general.nickname = nickname;
 	configuration.general.deployId = deployId;
 	configuration.general.workdir = `/tmp/${deployId}`;
-
+	if (configuration.general.isPreviewDeploymentEnabled && configuration.general.pullRequest !== 0) {
+		configuration.build.container.name = `pr${configuration.general.pullRequest}-${sha256.slice(0, 8)}`
+		configuration.publish.domain = `pr${configuration.general.pullRequest}.${configuration.publish.domain}`
+	}
 	if (!configuration.publish.path) configuration.publish.path = '/';
 	if (!configuration.publish.port) {
 		if (
 			configuration.build.pack === 'nodejs' ||
-			configuration.build.pack === 'vuejs' ||
 			configuration.build.pack === 'nuxtjs' ||
 			configuration.build.pack === 'rust' ||
 			configuration.build.pack === 'nextjs' ||
@ -74,20 +75,23 @@ export function setDefaultConfiguration(configuration) {
 	return configuration;
 }

-export async function precheckDeployment({ services, configuration }) {
+export async function precheckDeployment(configuration) {
+	const services = (await docker.engine.listServices()).filter(
+		(r) => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application' && JSON.parse(r.Spec.Labels.configuration).publish.domain === configuration.publish.domain
+	);
 	let foundService = 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.repository.id === configuration.repository.id &&
 				running.repository.branch === configuration.repository.branch
 			) {
+				foundService = true;
 				// Base service configuration changed
 				if (
 					!running.build.container.baseSHA ||
@ -107,9 +111,32 @@ export async function precheckDeployment({ services, configuration }) {
 						(n) =>
 							n.DesiredState !== 'Running' && n.Image.split(':')[1] === running.build.container.tag
 					);
-				if (isError.length > 0) forceUpdate = true;
-				foundService = true;
+				if (isError.length > 0) {
+					forceUpdate = true;
+				}

+				const compareObjects = (a, b) => {
+					if (a === b) return true;
+				   
+					if (typeof a != 'object' || typeof b != 'object' || a == null || b == null) return false;
+				   
+					let keysA = Object.keys(a), keysB = Object.keys(b);
+				   
+					if (keysA.length != keysB.length) return false;
+				   
+					for (let key of keysA) {
+					  if (!keysB.includes(key)) return false;
+				   
+					  if (typeof a[key] === 'function' || typeof b[key] === 'function') {
+						if (a[key].toString() != b[key].toString()) return false;
+					  } else {
+						if (!compareObjects(a[key], b[key])) return false;
+					  }
+					}
+				   
+					return true;
+				   }
+				   
 				const runningWithoutContainer = JSON.parse(JSON.stringify(running));
 				delete runningWithoutContainer.build.container;

@ -118,16 +145,19 @@ export async function precheckDeployment({ services, configuration }) {

 				// If only the configuration changed
 				if (
-					JSON.stringify(runningWithoutContainer.build) !==
-					JSON.stringify(configurationWithoutContainer.build) ||
-					JSON.stringify(runningWithoutContainer.publish) !==
-					JSON.stringify(configurationWithoutContainer.publish)
-				)
+					!compareObjects(runningWithoutContainer.build,configurationWithoutContainer.build) ||
+					!compareObjects(runningWithoutContainer.publish,configurationWithoutContainer.publish) ||
+					runningWithoutContainer.general.isPreviewDeploymentEnabled !==
+					configurationWithoutContainer.general.isPreviewDeploymentEnabled
+				){
 					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 (configuration.general.isPreviewDeploymentEnabled && configuration.general.pullRequest !== 0) forceUpdate = true
 			}
 		}
 	}
@ -144,28 +174,5 @@ export async function precheckDeployment({ services, configuration }) {
 }

 export async function updateServiceLabels(configuration) {
-	// In case of any failure during deployment, still update the current configuration.
-	const services = (await docker.engine.listServices()).filter(
-		(r) => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application'
-	);
-	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;
-		const Labels = { ...JSON.parse(found.Spec.Labels.configuration), ...configuration };
-		await 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}`
-		);
-	}
+	return await execShellAsync(`docker service update --label-add configuration='${JSON.stringify(configuration)}' ${configuration.build.container.name}_${configuration.build.container.name}`)
 }
--- a/src/lib/api/applications/deploy.ts
+++ b/src/lib/api/applications/deploy.ts
@ -1,9 +1,9 @@
 import { docker } from '$lib/api/docker';
 import { saveAppLog } from './logging';
 import { promises as fs } from 'fs';
-import { deleteSameDeployments } from './cleanup';
+import { deleteSameDeployments, purgeImagesContainers } from './cleanup';
 import yaml from 'js-yaml';
-import { execShellAsync } from '../common';
+import { delay, execShellAsync } from '../common';

 export default async function (configuration, imageChanged) {
 	const generateEnvs = {};
@ -11,6 +11,7 @@ export default async function (configuration, imageChanged) {
 		generateEnvs[secret.name] = secret.value;
 	}
 	const containerName = configuration.build.container.name;
+	const containerTag = configuration.build.container.tag;

 	// Only save SHA256 of it in the configuration label
 	const baseServiceConfiguration = configuration.baseServiceConfiguration;
@ -20,7 +21,7 @@ export default async function (configuration, imageChanged) {
 		version: '3.8',
 		services: {
 			[containerName]: {
-				image: `${configuration.build.container.name}:${configuration.build.container.tag}`,
+				image: `${containerName}:${containerTag}`,
 				networks: [`${docker.network}`],
 				environment: generateEnvs,
 				deploy: {
@ -31,21 +32,21 @@ export default async function (configuration, imageChanged) {
 						'configuration=' + JSON.stringify(configuration),
 						'traefik.enable=true',
 						'traefik.http.services.' +
-							configuration.build.container.name +
+							containerName +
 							`.loadbalancer.server.port=${configuration.publish.port}`,
-						'traefik.http.routers.' + configuration.build.container.name + '.entrypoints=websecure',
+						'traefik.http.routers.' + containerName + '.entrypoints=websecure',
 						'traefik.http.routers.' +
-							configuration.build.container.name +
+							containerName +
 							'.rule=Host(`' +
 							configuration.publish.domain +
 							'`) && PathPrefix(`' +
 							configuration.publish.path +
 							'`)',
 						'traefik.http.routers.' +
-							configuration.build.container.name +
+							containerName +
 							'.tls.certresolver=letsencrypt',
 						'traefik.http.routers.' +
-							configuration.build.container.name +
+							containerName +
 							'.middlewares=global-compress'
 					]
 				}
@ -62,7 +63,7 @@ export default async function (configuration, imageChanged) {
 	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}`
+			`docker service update --image ${containerName}:${containerTag} ${containerName}_${containerName}`
 		);
 	} else {
 		// console.log('new deployment or force deployment or config changed')
@ -71,6 +72,11 @@ export default async function (configuration, imageChanged) {
 			`cat ${configuration.general.workdir}/stack.yml | docker stack deploy --prune -c - ${containerName}`
 		);
 	}
+	async function purgeImagesAsync(found) {
+		await delay(10000);
+		await purgeImagesContainers(found, true);
+	}
+	purgeImagesAsync(configuration)

 	await saveAppLog('### Published done!', configuration);
 }
--- a/src/lib/api/applications/packs/templates.ts
+++ b/src/lib/api/applications/packs/templates.ts
@ -46,6 +46,7 @@ const templates = {
 		pack: 'vuejs',
 		...defaultBuildAndDeploy,
 		directory: 'dist',
+		port: 80,
 		name: 'Vue'
 	},
 	gatsby: {
--- a/src/lib/api/applications/queueAndBuild.ts
+++ b/src/lib/api/applications/queueAndBuild.ts
@ -10,7 +10,7 @@ import { saveAppLog } from './logging';
 export default async function (configuration, imageChanged) {
 	const { id, organization, name, branch } = configuration.repository;
 	const { domain } = configuration.publish;
-	const { deployId} = configuration.general;
+	const { deployId } = configuration.general;
 	try {
 		await saveAppLog(`${dayjs().format('YYYY-MM-DD HH:mm:ss.SSS')} Queued.`, configuration);
 		await copyFiles(configuration);
@ -20,6 +20,7 @@ export default async function (configuration, imageChanged) {
 			{ repoId: id, branch, deployId, organization, name, domain },
 			{ repoId: id, branch, deployId, organization, name, domain, progress: 'done' }
 		);
+
 		await updateServiceLabels(configuration);
 	} catch (error) {
 		await Deployment.findOneAndUpdate(
--- a/src/lib/consts.ts
+++ b/src/lib/consts.ts
@ -1 +1,2 @@
 export const publicPages = ['/', '/api/v1/login/github/app', '/api/v1/webhooks/deploy', '/success'];
+export const VITE_GITHUB_APP_NAME = import.meta.env.VITE_GITHUB_APP_NAME
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@ -63,7 +63,6 @@ export async function request(
 		} else {
 			if (response.headers.get('content-disposition')) {
 				const blob = await response.blob();
-				console.log(blob);
 				const link = document.createElement('a');
 				link.href = URL.createObjectURL(blob);
 				link.download = response.headers.get('content-disposition').split('=')[1] || 'backup.gz';
--- a/src/models/Configuration.ts
+++ b/src/models/Configuration.ts
@ -13,12 +13,14 @@ const ConfigurationSchema = new Schema({
 		id: { type: Number, required: true },
 		organization: { type: String, required: true },
 		name: { type: String, required: true },
-		branch: { type: String, required: true },
+		branch: { type: String, required: true }
 	},
 	general: {
 		deployId: { type: String, required: true },
 		nickname: { type: String, required: true },
 		workdir: { type: String, required: true },
+		isPreviewDeploymentEnabled: { type: Boolean, required: true, default: false },
+		pullRequest: { type: Number, required: true, default: 0 },
 	},
 	build: {
 		pack: { type: String, required: true },
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -306,7 +306,7 @@
 				>
 			{:else}
 				<button
-					class="opacity-50 tracking-tight font-bold text-xs rounded px-2  cursor-not-allowed"
+					class="opacity-50 tracking-tight font-bold text-xs rounded px-2 cursor-not-allowed"
 					disabled={upgradeDisabled}>Upgrading. It could take a while, please wait...</button
 				>
 			{/if}
--- a/src/routes/api/v1/application/check.ts
+++ b/src/routes/api/v1/application/check.ts
@ -1,32 +1,18 @@
 import { setDefaultConfiguration } from '$lib/api/applications/configuration';
 import { saveServerLog } from '$lib/api/applications/logging';
 import { docker } from '$lib/api/docker';
+import Configuration from '$models/Configuration';
 import type { Request } from '@sveltejs/kit';

 export async function post(request: Request) {
 	try {
 		const { DOMAIN } = process.env;
 		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 &&
-					running.publish.path === configuration.publish.path
-				) {
-					foundDomain = true;
-				}
-			}
-		}
-		if (DOMAIN === configuration.publish.domain) foundDomain = true;
-		if (foundDomain) {
+		const configurationFound = await Configuration.find({
+			'repository.id': { '$ne': configuration.repository.id },
+			'publish.domain': configuration.publish.domain
+		}).select('-_id -__v -createdAt -updatedAt')
+		if (configurationFound.length > 0 || configuration.publish.domain === DOMAIN) {
 			return {
 				status: 200,
 				body: {
@ -38,7 +24,7 @@ export async function post(request: Request) {
 		return {
 			status: 200,
 			body: { success: true, message: 'OK' }
-		};
+		}
 	} catch (error) {
 		await saveServerLog(error);
 		return {
--- a/src/routes/api/v1/application/config/index.ts
+++ b/src/routes/api/v1/application/config/index.ts
@ -5,17 +5,17 @@ import type { Request } from '@sveltejs/kit';
 export async function post(request: Request) {
 	const { name, organization, branch }: any = request.body || {};
 	if (name && organization && branch) {
-		const configurationFound = await Configuration.findOne({
+		const configurationFound = await Configuration.find({
 			'repository.name': name,
 			'repository.organization': organization,
-			'repository.branch': branch,
-		}).lean()
+			'repository.branch': branch
+		}).select('-_id -__v -createdAt -updatedAt')
+
 		if (configurationFound) {
 			return {
 				status: 200,
 				body: {
-					success: true,
-					...configurationFound
+					configuration: [...configurationFound]
 				}
 			};
 		}
@ -46,6 +46,7 @@ export async function post(request: Request) {
 			}
 			return null;
 		});
+
 		if (found) {
 			return {
 				status: 200,
--- a/src/routes/api/v1/application/config/previewDeployment.ts
+++ b/src/routes/api/v1/application/config/previewDeployment.ts
@ -0,0 +1,62 @@
+import { updateServiceLabels } from '$lib/api/applications/configuration';
+import { execShellAsync } from '$lib/api/common';
+import { docker } from '$lib/api/docker';
+import ApplicationLog from '$models/ApplicationLog';
+import Configuration from '$models/Configuration';
+import Deployment from '$models/Deployment';
+import type { Request } from '@sveltejs/kit';
+
+export async function post(request: Request) {
+	const { name, organization, branch, isPreviewDeploymentEnabled }: any = request.body || {};
+	if (name && organization && branch) {
+		const configuration = await Configuration.findOneAndUpdate({
+			'repository.name': name,
+			'repository.organization': organization,
+			'repository.branch': branch
+		}, { $set: { 'general.isPreviewDeploymentEnabled': isPreviewDeploymentEnabled, 'general.pullRequest': 0 } }, { new: true }).select('-_id -__v -createdAt -updatedAt')
+		if (!isPreviewDeploymentEnabled) {
+			const found = await Configuration.find({
+				'repository.name': name,
+				'repository.organization': organization,
+				'repository.branch': branch,
+				'general.pullRequest': { '$ne': 0 }
+			})
+			for (const prDeployment of found) {
+				await Configuration.findOneAndRemove({
+					'repository.name': name,
+					'repository.organization': organization,
+					'repository.branch': branch,
+					'publish.domain': prDeployment.publish.domain
+				})
+				const deploys = await Deployment.find({ organization, branch, name, domain: prDeployment.publish.domain });
+				for (const deploy of deploys) {
+					await ApplicationLog.deleteMany({ deployId: deploy.deployId });
+					await Deployment.deleteMany({ deployId: deploy.deployId });
+				}
+				await execShellAsync(`docker stack rm ${prDeployment.build.container.name}`);
+			}
+			return {
+				status: 200,
+				body: {
+					organization,
+					name,
+					branch
+				}
+			};
+		}
+		updateServiceLabels(configuration);
+		return {
+			status: 200,
+			body: {
+				success: true
+			}
+		};
+
+	}
+	return {
+		status: 500,
+		body: {
+			error: 'Cannot save.'
+		}
+	};
+}
--- a/src/routes/api/v1/application/deploy/index.ts
+++ b/src/routes/api/v1/application/deploy/index.ts
@ -1,32 +1,24 @@
 import type { Request } from '@sveltejs/kit';
 import Deployment from '$models/Deployment';
-import { docker } from '$lib/api/docker';
 import { precheckDeployment, setDefaultConfiguration } from '$lib/api/applications/configuration';
 import cloneRepository from '$lib/api/applications/cloneRepository';
 import { cleanupTmp } from '$lib/api/common';
 import queueAndBuild from '$lib/api/applications/queueAndBuild';
 import Configuration from '$models/Configuration';
-export async function post(request: Request) {
-	let configuration;
-	try {
-		const services = (await docker.engine.listServices()).filter(
-			(r) => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application'
-		);
-		configuration = setDefaultConfiguration(request.body);

-		if (!configuration) {
-			return {
-				status: 500,
-				body: {
-					error: 'Whaaat?'
-				}
-			};
-		}
+export async function post(request: Request) {
+	const configuration = setDefaultConfiguration(request.body);
+	if (!configuration) {
+		return {
+			status: 500,
+			body: {
+				error: 'Whaaat?'
+			}
+		};
+	}
+	try {
 		await cloneRepository(configuration);
-		const { foundService, imageChanged, configChanged, forceUpdate } = await precheckDeployment({
-			services,
-			configuration
-		});
+		const { foundService, imageChanged, configChanged, forceUpdate } = await precheckDeployment(configuration);
 		if (foundService && !forceUpdate && !imageChanged && !configChanged) {
 			cleanupTmp(configuration.general.workdir);
 			return {
@ -56,7 +48,8 @@ export async function post(request: Request) {
 		}
 		const { id, organization, name, branch } = configuration.repository;
 		const { domain } = configuration.publish;
-		const { deployId, nickname } = configuration.general;
+		const { deployId, nickname, pullRequest } = configuration.general;
+
 		await new Deployment({
 			repoId: id,
 			branch,
@ -66,11 +59,13 @@ export async function post(request: Request) {
 			name,
 			nickname
 		}).save();
+
 		await Configuration.findOneAndUpdate({
 			'repository.id': id,
 			'repository.organization': organization,
 			'repository.name': name,
 			'repository.branch': branch,
+			'general.pullRequest': 0,
 		},
 			{ ...configuration },
 			{ upsert: true, new: true })
@ -86,6 +81,7 @@ export async function post(request: Request) {
 			}
 		};
 	} catch (error) {
+		console.log(error)
 		await Deployment.findOneAndUpdate(
 			{
 				repoId: configuration.repository.id,
--- a/src/routes/api/v1/application/deploy/logs/[deployId].ts
+++ b/src/routes/api/v1/application/deploy/logs/[deployId].ts
@ -12,8 +12,6 @@ export async function get(request: Request) {

 		const deploy: any = await Deployment.findOne({ deployId })
 			.select('-_id -__v')
-			.sort({ createdAt: 'desc' });
-
 		const finalLogs: any = {};
 		finalLogs.progress = deploy.progress;
 		finalLogs.events = logs.map((log) => log.event);
--- a/src/routes/api/v1/application/deploy/logs/index.ts
+++ b/src/routes/api/v1/application/deploy/logs/index.ts
@ -16,12 +16,12 @@ export async function get(request: Request) {
 			.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();
+			finalLogs.isPr = d.domain.startsWith('pr')
 			return finalLogs;
 		});
 		return {
--- a/src/routes/api/v1/application/remove.ts
+++ b/src/routes/api/v1/application/remove.ts
@ -1,61 +1,69 @@
 import { purgeImagesContainers } from '$lib/api/applications/cleanup';
-import { docker } from '$lib/api/docker';
 import Deployment from '$models/Deployment';
 import ApplicationLog from '$models/ApplicationLog';
 import { delay, execShellAsync } from '$lib/api/common';
 import Configuration from '$models/Configuration';

-async function call(found) {
+async function purgeImagesAsync(found) {
 	await delay(10000);
 	await purgeImagesContainers(found, true);
 }
 export async function post(request: Request) {
-	const { organization, name, branch } = request.body;
-	let found = false;
+	const { organization, name, branch, domain } = request.body;
 	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;
+		const configurationFound = await Configuration.findOne({
+			'repository.organization': organization,
+			'repository.name': name,
+			'repository.branch': branch,
+			'publish.domain': domain
+		})
+		if (configurationFound) {
+			const id = configurationFound._id
+			if (configurationFound?.general?.pullRequest === 0) {
+				// Main deployment deletion request; deleting main + PRs
+				const allConfiguration = await Configuration.find({
+					'repository.name': name,
+					'repository.organization': organization,
+					'repository.branch': branch,
+				})
+				for (const config of allConfiguration) {
+					await Configuration.findOneAndRemove({
+						'repository.name': config.repository.name,
+						'repository.organization': config.repository.organization,
+						'repository.branch': config.repository.branch,
+					})
+					await execShellAsync(`docker stack rm ${config.build.container.name}`);
 				}
-				return null;
-			});
-		if (found) {
-			await Configuration.findOneAndRemove({
-				'repository.name': name,
-				'repository.organization': organization,
-				'repository.branch': branch,
-			})
-			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 });
+				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 });
+				}
+
+				purgeImagesAsync(configurationFound);
+			} else {
+				// Delete only PRs
+				await Configuration.findByIdAndRemove(id)
+				await execShellAsync(`docker stack rm ${configurationFound.build.container.name}`);
+				const deploys = await Deployment.find({ organization, branch, name, domain })
+				for (const deploy of deploys) {
+					await ApplicationLog.deleteMany({ deployId: deploy.deployId });
+					await Deployment.deleteMany({ deployId: deploy.deployId });
+				}
+				purgeImagesAsync(configurationFound);
 			}
-			await execShellAsync(`docker stack rm ${found.build.container.name}`);
-			call(found);
-			return {
-				status: 200,
-				body: {
-					organization,
-					name,
-					branch
-				}
-			};
-		} else {
-			return {
-				status: 500,
-				error: {
-					message: 'Nothing to do.'
-				}
-			};
 		}
+
+		return {
+			status: 200,
+			body: {
+				organization,
+				name,
+				branch
+			}
+		};
 	} catch (error) {
+		console.log(error)
 		return {
 			status: 500,
 			error: {
--- a/src/routes/api/v1/dashboard/index.ts
+++ b/src/routes/api/v1/dashboard/index.ts
@ -1,14 +1,9 @@
 import { docker } from '$lib/api/docker';
 import type { Request } from '@sveltejs/kit';
-
+import Configuration from '$models/Configuration'
 export async function get(request: Request) {
+	// Should update this to get data from mongodb and update db with the currently running services on start!
 	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
-	);
 	let databases: any = dockerServices.filter(
 		(r) =>
 			r.Spec.Labels.managedBy === 'coolify' &&
@ -21,15 +16,6 @@ export async function get(request: Request) {
 			r.Spec.Labels.type === 'service' &&
 			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 {};
-	});
 	databases = databases.map((r) => {
 		if (JSON.parse(r.Spec.Labels.configuration)) {
 			return {
@ -47,14 +33,23 @@ export async function get(request: Request) {
 		}
 		return {};
 	});
-	applications = [
-		...new Map(
-			applications.map((item) => [
-				item.configuration.publish.domain + item.configuration.publish.path,
-				item
-			])
-		).values()
-	];
+	const configurations = await Configuration.find({
+		'general.pullRequest': { '$in': [null, 0] }
+	}).select('-_id -__v -createdAt')
+	const applications = []
+	for (const configuration of configurations) {
+		const foundPRDeployments = await Configuration.find({
+			'repository.id': configuration.repository.id,
+			'repository.branch': configuration.repository.branch,
+			'general.pullRequest': { '$ne': 0 }
+		}).select('-_id -__v -createdAt')
+		const payload = {
+			configuration,
+			UpdatedAt: configuration.updatedAt,
+			prBuilds: foundPRDeployments.length > 0 ? true : false,
+		}
+		applications.push(payload)
+	}
 	return {
 		status: 200,
 		body: {
--- a/src/routes/api/v1/webhooks/deploy.ts
+++ b/src/routes/api/v1/webhooks/deploy.ts
@ -4,11 +4,16 @@ import Deployment from '$models/Deployment';
 import { docker } from '$lib/api/docker';
 import { precheckDeployment, setDefaultConfiguration } from '$lib/api/applications/configuration';
 import cloneRepository from '$lib/api/applications/cloneRepository';
-import { cleanupTmp } from '$lib/api/common';
+import { cleanupTmp, execShellAsync } from '$lib/api/common';
 import queueAndBuild from '$lib/api/applications/queueAndBuild';
 import Configuration from '$models/Configuration';
+import ApplicationLog from '$models/ApplicationLog';
+import { cleanupStuckedDeploymentsInDB } from '$lib/api/applications/cleanup';
 export async function post(request: Request) {
 	let configuration;
+	const allowedGithubEvents = ['push', 'pull_request']
+	const allowedPRActions = ['opened', , 'reopened', 'synchronize', 'closed']
+	const githubEvent = request.headers['x-github-event']
 	const { GITHUP_APP_WEBHOOK_SECRET } = process.env;
 	const hmac = crypto.createHmac('sha256', GITHUP_APP_WEBHOOK_SECRET);
 	const digest = Buffer.from(
@ -20,52 +25,92 @@ export async function post(request: Request) {
 		return {
 			status: 500,
 			body: {
-				error: 'Invalid request'
+				error: 'Invalid request.'
 			}
 		};
 	}

-	if (request.headers['x-github-event'] !== 'push') {
+	if (!allowedGithubEvents.includes(githubEvent)) {
 		return {
 			status: 500,
 			body: {
-				error: 'Not a push event.'
+				error: 'Event not allowed.'
 			}
 		};
 	}
+
 	try {
-		const services = (await docker.engine.listServices()).filter(
-			(r) => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application'
-		);
-
-		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;
+		const applications = await Configuration.find({
+			'repository.id': request.body.repository.id,
+		}).select('-_id -__v -createdAt -updatedAt')
+		if (githubEvent === 'push') {
+			configuration = applications.find((r) => {
+				if (request.body.ref.startsWith('refs')) {
+					if (r.repository.branch === request.body.ref.split('/')[2]) {
+						return r;
+					}
 				}
+				return null;
+			});
+		} else if (githubEvent === 'pull_request') {
+			if (!allowedPRActions.includes(request.body.action)) {
+				return {
+					status: 500,
+					body: {
+						error: 'PR action is not allowed.'
+					}
+				};
 			}
-
-			return null;
-		});
-		configuration = setDefaultConfiguration(JSON.parse(configuration.Spec.Labels.configuration));
-
+			configuration = applications.find((r) => r.repository.branch === request.body['pull_request'].base.ref);
+			if (configuration) {
+				if (!configuration.general.isPreviewDeploymentEnabled) {
+					return {
+						status: 500,
+						body: {
+							error: 'PR deployments are not enabled.'
+						}
+					};
+				}
+				configuration.general.pullRequest = request.body.number
+			}
+		}
 		if (!configuration) {
 			return {
 				status: 500,
 				body: {
-					error: 'Whaaat?'
+					error: 'No configuration found.'
+				}
+			};
+		}
+		configuration = setDefaultConfiguration(configuration);
+		const { id, organization, name, branch } = configuration.repository;
+		const { domain } = configuration.publish;
+		const { deployId, nickname, pullRequest } = configuration.general;
+
+		if (request.body.action === 'closed') {
+			const deploys = await Deployment.find({ organization, branch, name, domain });
+			for (const deploy of deploys) {
+				await ApplicationLog.deleteMany({ deployId: deploy.deployId });
+				await Deployment.deleteMany({ deployId: deploy.deployId });
+			}
+			await Configuration.findOneAndRemove({
+				'repository.id': id,
+				'repository.organization': organization,
+				'repository.name': name,
+				'repository.branch': branch,
+				'general.pullRequest': pullRequest
+			})
+			await execShellAsync(`docker stack rm ${configuration.build.container.name}`);
+			return {
+				status: 200,
+				body: {
+					success: true,
+					message: 'Removed'
 				}
 			};
 		}
 		await cloneRepository(configuration);
-		const { foundService, imageChanged, configChanged, forceUpdate } = await precheckDeployment({
-			services,
-			configuration
-		});
+		const { foundService, imageChanged, configChanged, forceUpdate } = await precheckDeployment(configuration);
 		if (foundService && !forceUpdate && !imageChanged && !configChanged) {
 			cleanupTmp(configuration.general.workdir);
 			return {
@ -77,11 +122,11 @@ export async function post(request: Request) {
 			};
 		}
 		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,
+			repoId: id,
+			branch: branch,
+			organization: organization,
+			name: name,
+			domain: domain,
 			progress: { $in: ['queued', 'inprogress'] }
 		});
 		if (alreadyQueued.length > 0) {
@ -93,9 +138,7 @@ export async function post(request: Request) {
 				}
 			};
 		}
-		const { id, organization, name, branch } = configuration.repository;
-		const { domain } = configuration.publish;
-		const { deployId, nickname } = configuration.general;
+
 		await new Deployment({
 			repoId: id,
 			branch,
@ -105,14 +148,29 @@ export async function post(request: Request) {
 			name,
 			nickname
 		}).save();
-		await Configuration.findOneAndUpdate({
-			'repository.id': id,
-			'repository.organization': organization,
-			'repository.name': name,
-			'repository.branch': branch,
-		},
-			{ ...configuration },
-			{ upsert: true, new: true })
+
+
+		if (githubEvent === 'pull_request') {
+			await Configuration.findOneAndUpdate({
+				'repository.id': id,
+				'repository.organization': organization,
+				'repository.name': name,
+				'repository.branch': branch,
+				'general.pullRequest': pullRequest
+			},
+				{ ...configuration },
+				{ upsert: true, new: true })
+		} else {
+			await Configuration.findOneAndUpdate({
+				'repository.id': id,
+				'repository.organization': organization,
+				'repository.name': name,
+				'repository.branch': branch,
+				'general.pullRequest': { '$in': [null, 0] }
+			},
+				{ ...configuration },
+				{ upsert: true, new: true })
+		}

 		queueAndBuild(configuration, imageChanged);
 		return {
@ -125,28 +183,40 @@ export async function post(request: Request) {
 			}
 		};
 	} catch (error) {
-		await Deployment.findOneAndUpdate(
-			{
-				repoId: configuration.repository.id,
-				branch: configuration.repository.branch,
-				organization: configuration.repository.organization,
-				name: configuration.repository.name,
-				domain: configuration.publish.domain
-			},
-			{
-				repoId: configuration.repository.id,
-				branch: configuration.repository.branch,
-				organization: configuration.repository.organization,
-				name: configuration.repository.name,
-				domain: configuration.publish.domain,
-				progress: 'failed'
-			}
-		);
+		console.log(error)
+		// console.log(configuration)
+		if (configuration) {
+			cleanupTmp(configuration.general.workdir);
+			await Deployment.findOneAndUpdate(
+				{
+					repoId: configuration.repository.id,
+					branch: configuration.repository.branch,
+					organization: configuration.repository.organization,
+					name: configuration.repository.name,
+					domain: configuration.publish.domain
+				},
+				{
+					repoId: configuration.repository.id,
+					branch: configuration.repository.branch,
+					organization: configuration.repository.organization,
+					name: configuration.repository.name,
+					domain: configuration.publish.domain,
+					progress: 'failed'
+				}
+			);
+		}
+
 		return {
 			status: 500,
 			body: {
 				error: error.message || error
 			}
 		};
+	} finally {
+		try {
+			await cleanupStuckedDeploymentsInDB();
+		} catch (error) {
+			console.log(error)
+		}
 	}
 }
--- a/src/routes/application/[organization]/[name]/[branch]/logs/index.svelte
+++ b/src/routes/application/[organization]/[name]/[branch]/logs/index.svelte
@ -84,13 +84,15 @@
 									deployment.progress !== 'failed'}
 								class:bg-warmGray-800={deployment.progress !== 'done' &&
 									deployment.progress !== 'failed'}
-								class:hover:bg-red-200={deployment.progress === 'failed'}
 								class:hover:border-red-500={deployment.progress === 'failed'}
 								on:click={() => goto(`./logs/${deployment.deployId}`)}
 							>
-								<div class="font-bold text-sm px-3 flex justify-center items-center">
-									{deployment.branch}
+							<div class="flex space-x-2 px-2">
+								<div class="font-bold text-sm flex justify-center items-center">
+									{deployment.branch} 
 								</div>
+								<div class="font-bold text-xs flex justify-center items-center text-warmGray-500">{deployment.isPr ? 'PR' : ''}</div>
+							</div>
 								<div class="flex-1" />
 								<div class="px-3 w-48">
 									<div
--- a/src/routes/application/__layout.svelte
+++ b/src/routes/application/__layout.svelte
@ -1,5 +1,5 @@
 <script>
-	import { application, initialApplication, initConf, dashboard } from '$store';
+	import { application, initialApplication, initConf, dashboard, prApplication } from '$store';
 	import { onDestroy } from 'svelte';
 	import Loading from '$components/Loading.svelte';
 	import Navbar from '$components/Application/Navbar.svelte';
@ -14,15 +14,16 @@

 	async function setConfiguration() {
 		try {
-			const config = await request(`/api/v1/application/config`, $session, {
+			const { configuration } = await request(`/api/v1/application/config`, $session, {
 				body: {
 					name: $application.repository.name,
 					organization: $application.repository.organization,
 					branch: $application.repository.branch
 				}
 			});
-			$application = { ...config };
-			$initConf = JSON.parse(JSON.stringify($application));
+			$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
+			$application = configuration.find((c) => c.general.pullRequest === 0);
+			if (!$application) browser && goto('/dashboard/applications');
 		} catch (error) {
 			browser && goto('/dashboard/applications');
 		}
--- a/src/routes/database/[name]/configuration.svelte
+++ b/src/routes/database/[name]/configuration.svelte
@ -67,9 +67,7 @@
 		<div class="pb-2 pt-5 space-y-4">
 			<div class="text-2xl font-bold border-gradient w-32">Database</div>
 			<div class="flex items-center pt-4">
-				{#if $database.config.general.type !== 'redis'}
-					<div class="font-bold w-64 text-warmGray-400">Connection string</div>
-				{/if}
+				<div class="font-bold w-64 text-warmGray-400">Connection string</div>
 				{#if $database.config.general.type === 'mongodb'}
 					<PasswordField
 						value={`mongodb://${$database.envs.MONGODB_USERNAME}:${$database.envs.MONGODB_PASSWORD}@${$database.config.general.deployId}:27017/${$database.envs.MONGODB_DATABASE}`}
@ -86,6 +84,10 @@
 					<PasswordField
 						value={`http://${$database.envs.COUCHDB_USER}:${$database.envs.COUCHDB_PASSWORD}@${$database.config.general.deployId}:5984`}
 					/>
+				{:else if $database.config.general.type === 'redis'}
+					<PasswordField
+						value={`redis://${$database.envs.REDIS_PASSWORD}@${$database.config.general.deployId}:6379`}
+					/>
 				{:else if $database.config.general.type === 'clickhouse'}
 					<!-- {JSON.stringify($database)} -->
 					<!-- <textarea
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -20,7 +20,7 @@
 				', toolbar=0, menubar=0, status=0'
 		);
 		const timer = setInterval(() => {
-			if (newWindow.closed) {
+			if (newWindow?.closed) {
 				clearInterval(timer);
 				browser && location.reload()
 			}
--- a/src/routes/settings.svelte
+++ b/src/routes/settings.svelte
@ -26,9 +26,9 @@
 <script>
 	export let allowRegistration;
 	export let sendErrors;
+
 	import { browser } from '$app/env';
 	import { session } from '$app/stores';
-
 	import { request } from '$lib/request';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { fade } from 'svelte/transition';
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -48,7 +48,9 @@ export const application = writable<Application>({
 	general: {
 		deployId: null,
 		nickname: null,
-		workdir: null
+		workdir: null,
+		isPreviewDeploymentEnabled: false,
+		pullRequest: 0
 	},
 	build: {
 		pack: 'static',
@ -76,6 +78,7 @@ export const application = writable<Application>({
 		secrets: []
 	}
 });
+export const prApplication = writable([])

 export const initConf = writable({});

@ -97,7 +100,9 @@ export const initialApplication: Application = {
 	general: {
 		deployId: null,
 		nickname: null,
-		workdir: null
+		workdir: null,
+		isPreviewDeploymentEnabled: false,
+		pullRequest: 0
 	},
 	build: {
 		pack: 'static',
@ -162,3 +167,5 @@ export const initialNewService = {
 	userPasswordAgain: null,
 	baseURL: null
 };
+
+export const isPullRequestPermissionsGranted = writable(false)