Update flow for apex domains

This commit is contained in:
Khushboo Verma
2025-09-09 15:57:37 +05:30
parent 5b98696e4a
commit eeebf6f8a3
7 changed files with 70 additions and 32 deletions
+14 -2
View File
@@ -30,8 +30,8 @@
{/if}
</Layout.Stack>
<Typography.Text variant="m-400">
Add the following record on your DNS provider. Note that DNS changes may take time to
propagate fully.
Add the following record on your DNS provider. Note that DNS changes may take up to 48
hours to propagate fully.
</Typography.Text>
</Layout.Stack>
@@ -51,6 +51,18 @@
text={$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME} />
</Table.Cell>
</Table.Row.Base>
<Table.Row.Base {root}>
<Table.Cell {root}>
<Layout.Stack direction="row" alignItems="center" gap="xs">
CAA
<Badge variant="secondary" size="s" content="Optional" />
</Layout.Stack>
</Table.Cell>
<Table.Cell {root}>@</Table.Cell>
<Table.Cell {root}>
<InteractiveText variant="copy" isVisible text={`0 issue "certainly.com"`} />
</Table.Cell>
</Table.Row.Base>
</Table.Root>
<Layout.Stack gap="s" direction="row" alignItems="center">
<Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
+35 -13
View File
@@ -9,13 +9,26 @@
Alert
} from '@appwrite.io/pink-svelte';
import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
import { isASubdomain } from '$lib/helpers/tlds';
export let domain: string;
export let verified = undefined;
export let variant: 'cname' | 'a' | 'aaaa';
export let service: 'sites' | 'general' = 'general';
interface Props {
domain: string;
verified?: boolean;
variant: 'cname' | 'a' | 'aaaa';
service?: 'sites' | 'general';
onNavigateToNameservers?: () => void;
}
let {
domain,
verified = undefined,
variant,
service = 'general',
onNavigateToNameservers = undefined
}: Props = $props();
let subdomain = domain?.split('.')?.slice(0, -2)?.join('.');
const isSubDomain = $derived.by(() => isASubdomain(domain));
function setTarget() {
switch (variant) {
@@ -44,8 +57,8 @@
{/if}
</Layout.Stack>
<Typography.Text variant="m-400">
Add the following record on your DNS provider. Note that DNS changes may take time to
propagate fully.
Add the following record on your DNS provider. Note that DNS changes may take up to 48
hours to propagate fully.
</Typography.Text>
</Layout.Stack>
@@ -62,16 +75,25 @@
<InteractiveText variant="copy" isVisible text={setTarget()} />
</Table.Cell>
</Table.Row.Base>
<Table.Row.Base {root}>
<Table.Cell {root}>
<Layout.Stack direction="row" alignItems="center" gap="xs">
CAA
<Badge variant="secondary" size="s" content="Optional" />
</Layout.Stack>
</Table.Cell>
<Table.Cell {root}>@</Table.Cell>
<Table.Cell {root}>
<InteractiveText variant="copy" isVisible text={`0 issue "certainly.com"`} />
</Table.Cell>
</Table.Row.Base>
</Table.Root>
<Layout.Stack gap="s" direction="row" alignItems="center">
{#if variant === 'cname'}
{#if variant === 'cname' && !isSubDomain}
<Alert.Inline>
If your domain uses CAA records, ensure certainly.com is authorized — otherwise, SSL
setup may fail. A list of all domain providers and their DNS setting is available <Link
variant="muted"
external
href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
>.
Since <Badge variant="secondary" size="s" content={domain} /> is an apex domain, CNAME
record is only supported by certain providers. If yours doesn't, please verify using
<Link variant="muted" on:click={onNavigateToNameservers}>nameservers</Link> instead.
</Alert.Inline>
{:else}
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
@@ -118,7 +118,7 @@
Navigate to your domain provider and update the nameservers to <InlineCode
code="ns1.appwrite-dns.com"
size="s" /> and <InlineCode code="ns2.appwrite-dns.com" size="s" />.
Note that DNS changes may take time to propagate fully.
Note that DNS changes may take up to 48 hours to propagate fully.
</span>
<svelte:fragment slot="actions">
<Button
@@ -20,7 +20,6 @@
import Wizard from '$lib/layout/wizard.svelte';
import { base } from '$app/paths';
import { writable } from 'svelte/store';
import { isASubdomain } from '$lib/helpers/tlds';
import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
import RecordTable from '$lib/components/domains/recordTable.svelte';
import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
@@ -29,11 +28,10 @@
const ruleId = page.url.searchParams.get('rule');
const domainId = page.url.searchParams.get('domain');
const isSubDomain = $derived.by(() => isASubdomain(page.params.domain));
let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
$effect(() => {
if ($regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain) {
if ($regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME) {
selectedTab = 'cname';
} else if (!isCloud && $regionalConsoleVariables._APP_DOMAIN_TARGET_A) {
selectedTab = 'a';
@@ -124,7 +122,7 @@
<Layout.Stack gap="xl">
<div>
<Tabs.Root variant="secondary" let:root>
{#if isSubDomain && !!$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
{#if !!$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
<Tabs.Item.Button
{root}
on:click={() => (selectedTab = 'cname')}
@@ -162,7 +160,11 @@
{#if selectedTab === 'nameserver'}
<NameserverTable domain={page.params.domain} {verified} />
{:else}
<RecordTable domain={page.params.domain} {verified} variant={selectedTab} />
<RecordTable
domain={page.params.domain}
{verified}
variant={selectedTab}
onNavigateToNameservers={() => (selectedTab = 'nameserver')} />
{/if}
<Divider />
<Layout.Stack direction="row" justifyContent="flex-end">
@@ -20,7 +20,6 @@
import Wizard from '$lib/layout/wizard.svelte';
import { base } from '$app/paths';
import { writable } from 'svelte/store';
import { isASubdomain } from '$lib/helpers/tlds';
import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
import RecordTable from '$lib/components/domains/recordTable.svelte';
import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
@@ -29,12 +28,11 @@
const ruleId = page.url.searchParams.get('rule');
const domainId = page.url.searchParams.get('domain');
const isSubDomain = $derived.by(() => isASubdomain(page.params.domain));
let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
$effect(() => {
if ($regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain) {
if ($regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME) {
selectedTab = 'cname';
} else if (!isCloud && $regionalConsoleVariables._APP_DOMAIN_TARGET_A) {
selectedTab = 'a';
@@ -126,7 +124,7 @@
<Layout.Stack gap="xl">
<div>
<Tabs.Root variant="secondary" let:root>
{#if isSubDomain && !!$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
{#if !!$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
<Tabs.Item.Button
{root}
on:click={() => (selectedTab = 'cname')}
@@ -164,7 +162,11 @@
{#if selectedTab === 'nameserver'}
<NameserverTable domain={page.params.domain} {verified} />
{:else}
<RecordTable domain={page.params.domain} {verified} variant={selectedTab} />
<RecordTable
domain={page.params.domain}
{verified}
variant={selectedTab}
onNavigateToNameservers={() => (selectedTab = 'nameserver')} />
{/if}
<Divider />
<Layout.Stack direction="row" justifyContent="flex-end">
@@ -20,7 +20,6 @@
import Wizard from '$lib/layout/wizard.svelte';
import { base } from '$app/paths';
import { writable } from 'svelte/store';
import { isASubdomain } from '$lib/helpers/tlds';
import RecordTable from '$lib/components/domains/recordTable.svelte';
import NameserverTable from '$lib/components/domains/nameserverTable.svelte';
import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
@@ -28,12 +27,11 @@
let { data } = $props();
const ruleId = page.url.searchParams.get('rule');
const isSubDomain = $derived.by(() => isASubdomain(page.params.domain));
let selectedTab = $state<'cname' | 'nameserver' | 'a' | 'aaaa'>('nameserver');
$effect(() => {
if ($regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && isSubDomain) {
if ($regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME) {
selectedTab = 'cname';
} else if (!isCloud && $regionalConsoleVariables._APP_DOMAIN_TARGET_A) {
selectedTab = 'a';
@@ -123,7 +121,7 @@
<Layout.Stack gap="xl">
<div>
<Tabs.Root variant="secondary" let:root>
{#if isSubDomain && !!$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
{#if !!$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}
<Tabs.Item.Button
{root}
on:click={() => (selectedTab = 'cname')}
@@ -165,7 +163,8 @@
{verified}
service="sites"
variant={selectedTab}
domain={page.params.domain} />
domain={page.params.domain}
onNavigateToNameservers={() => (selectedTab = 'nameserver')} />
{/if}
<Divider />
<Layout.Stack direction="row" justifyContent="flex-end">
@@ -117,7 +117,8 @@
{verified}
service="sites"
variant={selectedTab}
domain={selectedProxyRule.domain} />
domain={selectedProxyRule.domain}
onNavigateToNameservers={() => (selectedTab = 'nameserver')} />
{/if}
<svelte:fragment slot="footer">