From 11c395e940b04e0e1432ce2c464fe9ba0651fdaa Mon Sep 17 00:00:00 2001 From: ernstmul Date: Mon, 17 Mar 2025 16:52:05 +0100 Subject: [PATCH 1/2] Fix: close without confirm modal --- src/lib/layout/wizard.svelte | 1 + .../project-[project]/overview/platforms/createWeb.svelte | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte index 4e5e49078..3642c55ad 100644 --- a/src/lib/layout/wizard.svelte +++ b/src/lib/layout/wizard.svelte @@ -69,6 +69,7 @@ if (confirmExit) { showExitModal = true; } else { + goto(href); trackEvent('wizard_exit', { from: 'button' }); diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte index a00301f73..9e2c67941 100644 --- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte +++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte @@ -165,7 +165,7 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}" }); - +
From 606e5d9db28e74dab7a4cb3e332da860821d7b97 Mon Sep 17 00:00:00 2001 From: ernstmul Date: Mon, 17 Mar 2025 17:29:49 +0100 Subject: [PATCH 2/2] Add javascript starter kit, show correct env vars, and run commands --- .../components/JavascriptFrameworkIcon.svelte | 5 ++ .../overview/platforms/components/index.ts | 9 +++ .../overview/platforms/createWeb.svelte | 70 ++++++++++++++----- 3 files changed, 66 insertions(+), 18 deletions(-) create mode 100644 src/routes/(console)/project-[project]/overview/platforms/components/JavascriptFrameworkIcon.svelte create mode 100644 src/routes/(console)/project-[project]/overview/platforms/components/index.ts 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 9e2c67941..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_') } ]; @@ -249,7 +276,10 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
- +
3. Run the app, then click the 4. Run the app, then click the button to verify the setup. + +
+ +