+
-
+
diff --git a/src/lib/layout/createProject.svelte b/src/lib/layout/createProject.svelte
index 8e5eeb0cb..bbf324f84 100644
--- a/src/lib/layout/createProject.svelte
+++ b/src/lib/layout/createProject.svelte
@@ -1,5 +1,5 @@
-
+
diff --git a/src/routes/(console)/project-[project]/functions/create-function/manual/+page.svelte b/src/routes/(console)/project-[project]/functions/create-function/manual/+page.svelte
index ea7b0f8da..927403ca5 100644
--- a/src/routes/(console)/project-[project]/functions/create-function/manual/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/create-function/manual/+page.svelte
@@ -136,9 +136,14 @@
- Upload a zip file (tar.gz) containing your function source code
+ Upload a tar.gz file containing your function source code
-
+
- Manually deploy a function by uploading a zip file containing the source code and a relative
- path to the entry point.
+ Manually deploy a function by uploading a tar.gz file containing the source code and a
+ relative path to the entry point.
+ import { SvgIcon } from '$lib/components';
+
+
+
diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/index.ts b/src/routes/(console)/project-[project]/overview/platforms/components/index.ts
new file mode 100644
index 000000000..1cdbbfe20
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/platforms/components/index.ts
@@ -0,0 +1,9 @@
+export { default as AngularFrameworkIcon } from './AngularFrameworkIcon.svelte';
+export { default as ConnectionLine } from './ConnectionLine.svelte';
+export { default as JavascriptFrameworkIcon } from './JavascriptFrameworkIcon.svelte';
+export { default as NextjsFrameworkIcon } from './NextjsFrameworkIcon.svelte';
+export { default as NoFrameworkIcon } from './NoFrameworkIcon.svelte';
+export { default as NuxtFrameworkIcon } from './NuxtFrameworkIcon.svelte';
+export { default as ReactFrameworkIcon } from './ReactFrameworkIcon.svelte';
+export { default as SvelteFrameworkIcon } from './SvelteFrameworkIcon.svelte';
+export { default as VueFrameworkIcon } from './AngularFrameworkIcon.svelte';
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index a00301f73..3934d7ee1 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -22,7 +22,8 @@
IconNuxt,
IconInfo,
IconExternalLink,
- IconAngular
+ IconAngular,
+ IconJs
} from '@appwrite.io/pink-icons-svelte';
import { page } from '$app/stores';
import { type ComponentType, onMount } from 'svelte';
@@ -33,13 +34,16 @@
import ConnectionLine from './components/ConnectionLine.svelte';
import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
import { PlatformType } from '@appwrite.io/console';
- import ReactFrameworkIcon from './components/ReactFrameworkIcon.svelte';
- import SvelteFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/SvelteFrameworkIcon.svelte';
- import NuxtFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/NuxtFrameworkIcon.svelte';
- import NextjsFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/NextjsFrameworkIcon.svelte';
- import VueFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/VueFrameworkIcon.svelte';
- import NoFrameworkIcon from './components/NoFrameworkIcon.svelte';
- import AngularFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/AngularFrameworkIcon.svelte';
+ import {
+ ReactFrameworkIcon,
+ SvelteFrameworkIcon,
+ NuxtFrameworkIcon,
+ NextjsFrameworkIcon,
+ VueFrameworkIcon,
+ NoFrameworkIcon,
+ AngularFrameworkIcon,
+ JavascriptFrameworkIcon
+ } from './components/index';
export let key;
@@ -51,8 +55,8 @@
const projectId = $page.params.project;
- const updateConfigCode = `APPWRITE_PROJECT_ID = "${projectId}"
-APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
+ const updateConfigCode = (prefix = '') => `${prefix}APPWRITE_PROJECT_ID = "${projectId}"
+${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
`;
type FrameworkType = {
key: string;
@@ -60,6 +64,8 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
icon: ComponentType;
smallIcon: ComponentType;
portNumber: number;
+ runCommand: string;
+ updateConfigCode: string;
};
export let platform: PlatformType = PlatformType.Flutterandroid;
export let selectedFrameworkKey: string | undefined = key ? key : undefined;
@@ -70,42 +76,63 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
label: 'Svelte',
icon: SvelteFrameworkIcon,
smallIcon: IconSvelte,
- portNumber: 5173
+ portNumber: 5173,
+ runCommand: 'npm run dev',
+ updateConfigCode: updateConfigCode('PUBLIC_')
},
{
key: 'react',
label: 'React',
icon: ReactFrameworkIcon,
smallIcon: IconReact,
- portNumber: 5173
+ portNumber: 5173,
+ runCommand: 'npm run dev',
+ updateConfigCode: updateConfigCode('VITE_')
},
{
key: 'nuxt',
label: 'Nuxt',
icon: NuxtFrameworkIcon,
smallIcon: IconNuxt,
- portNumber: 3000
+ portNumber: 3000,
+ runCommand: 'npm run dev',
+ updateConfigCode: updateConfigCode('NUXT_')
},
{
key: 'nextjs',
label: 'Next.js',
icon: NextjsFrameworkIcon,
smallIcon: NextjsFrameworkIcon,
- portNumber: 3000
+ portNumber: 3000,
+ runCommand: 'npm run dev',
+ updateConfigCode: updateConfigCode('NEXT_PUBLIC_')
},
{
key: 'vue',
label: 'Vue',
icon: VueFrameworkIcon,
smallIcon: IconVue,
- portNumber: 5173
+ portNumber: 5173,
+ runCommand: 'npm run dev',
+ updateConfigCode: updateConfigCode('VITE_')
},
{
key: 'angular',
label: 'Angular',
icon: AngularFrameworkIcon,
smallIcon: IconAngular,
- portNumber: 4200
+ portNumber: 4200,
+ runCommand: 'npm run start',
+ updateConfigCode: `appwriteEndpoint: '${sdk.forProject.client.config.endpoint}',\nappwriteProjectId:'${projectId}'`
+ },
+ {
+ key: 'js',
+ label: 'Javascript',
+ icon: JavascriptFrameworkIcon,
+ smallIcon: IconJs,
+ portNumber: 5173,
+ runCommand: 'npm run dev',
+ updateConfigCode: updateConfigCode('VITE_')
}
];
@@ -165,7 +192,7 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
});
-
+
diff --git a/src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte
index 2a3f17486..658353802 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte
@@ -137,9 +137,9 @@
- Upload a zip file (tar.gz) containing your function source code
+ Upload a tar.gz containing your function source code
-
+
import { base } from '$app/paths';
- import { EmptySearch, PaginationWithLimit } from '$lib/components';
+ import { EmptySearch, PaginationWithLimit, SvgIcon } from '$lib/components';
import { Button, InputSearch } from '$lib/elements/forms';
import { page } from '$app/stores';
import Wizard from '$lib/layout/wizard.svelte';
import { goto } from '$app/navigation';
import { debounce } from '$lib/helpers/debounce.js';
- import { Card, Layout, Accordion, Selector } from '@appwrite.io/pink-svelte';
+ import { Card, Layout, Accordion, Selector, Tooltip } from '@appwrite.io/pink-svelte';
import { capitalize } from '$lib/helpers/string';
import { app } from '$lib/stores/app.js';
+ import { getFrameworkIcon } from '../../store.js';
export let data;
@@ -69,6 +70,7 @@
href={`${base}/project-${$page.params.project}/sites/`}
title="Create site"
invertColumns
+ stickySide
hideFooter>
@@ -95,7 +97,7 @@
{/each}
-
+
{#each [...data.frameworks] as framework}
@@ -126,13 +128,23 @@
padding="xxs">
+ alt={template.name}
+ avatar>
+
+
+
+
+ {capitalize(templateFrameworks[0])}
+
+
+
{/each}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
index 96fd3b96a..9857de1f1 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
@@ -17,7 +17,7 @@ export const load = async ({ url, route }) => {
console.log(siteTemplatesList);
- const [frameworks, useCases] = siteTemplatesList.templates.reduce(
+ const [frameworksSet, useCasesSet] = siteTemplatesList.templates.reduce(
([fr, uc], next) => {
next.useCases.forEach((useCase) => uc.add(useCase));
next.frameworks.forEach((framework) => fr.add(framework.name));
@@ -26,6 +26,9 @@ export const load = async ({ url, route }) => {
[new Set(), new Set()]
);
+ const frameworks = Array.from(frameworksSet).sort((a, b) => a.localeCompare(b));
+ const useCases = Array.from(useCasesSet).sort((a, b) => a.localeCompare(b));
+
const templates = siteTemplatesList.templates.filter((template) => {
if (
filter.frameworks.length > 0 &&
diff --git a/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
index 299f9ec94..076e9a59e 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
@@ -30,11 +30,12 @@
null,
2
);
- const baseEnvCode = envCode;
- const baseJsonCode = jsonCode;
+ let baseEnvCode = envCode;
+ let baseJsonCode = jsonCode;
if (jsonCode === '{}') {
jsonCode = '';
+ baseJsonCode = '';
}
let tab: 'env' | 'json' = 'env';
@@ -108,24 +109,12 @@
window.URL.revokeObjectURL(url);
}
- function handleKeydown(event: KeyboardEvent) {
- if (event.key === 'Enter') {
- if (tab === 'env') {
- envCode += '\n';
- } else {
- jsonCode += '\n';
- }
- }
- }
-
$: isButtonDisabled =
(tab === 'env' && baseEnvCode === envCode) || (tab === 'json' && baseJsonCode === jsonCode);
// TODO: merge this component with the rawVariableEditor?
-
-
+ href={`${base}/project-${$page.params.project}/sites/create-site/templates?framework=React&framework=Vue.js&framework=Next.js&framework=SvelteKit&framework=Nuxt`}>
-
+
+
+
+ {capitalize(site.framework)}
+
+
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte
index ba0e6d5b6..b812e9f28 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte
@@ -46,9 +46,9 @@
Manually deploy a site by uploading any file(s) or folder.
- Upload a zip file (tar.gz) containing your function source code
+ Upload a tar.gz file containing your function source code
-
+