diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 34e2ca206..1999de134 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -72,6 +72,7 @@
if (confirmExit) {
showExitModal = true;
} else {
+ goto(href);
trackEvent('wizard_exit', {
from: 'button'
});
diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/JavascriptFrameworkIcon.svelte b/src/routes/(console)/project-[project]/overview/platforms/components/JavascriptFrameworkIcon.svelte
new file mode 100644
index 000000000..c38f0f810
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/platforms/components/JavascriptFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+
+
+
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 b9f3039d8..0274f651b 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -23,7 +23,8 @@
IconNuxt,
IconInfo,
IconExternalLink,
- IconAngular
+ IconAngular,
+ IconJs
} from '@appwrite.io/pink-icons-svelte';
import { page } from '$app/stores';
import { type ComponentType, onMount } from 'svelte';
@@ -34,13 +35,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;
@@ -52,8 +56,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;
@@ -61,6 +65,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;
@@ -72,42 +78,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_')
}
];
@@ -167,7 +194,7 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
});
-
+