From 517fd5d5d7f99bf61ce205c76c4a25819861e95a Mon Sep 17 00:00:00 2001 From: "Vincent (Wen Yu) Ge" Date: Fri, 26 Jan 2024 22:56:14 +0000 Subject: [PATCH 1/7] Add generic web quick start --- src/routes/docs/quick-starts/+page.svelte | 6 + src/routes/docs/quick-starts/js/+page.markdoc | 151 ++++++++++++++++++ .../docs/tutorials/nuxt/step-4/+page.markdoc | 2 +- 3 files changed, 158 insertions(+), 1 deletion(-) create mode 100644 src/routes/docs/quick-starts/js/+page.markdoc diff --git a/src/routes/docs/quick-starts/+page.svelte b/src/routes/docs/quick-starts/+page.svelte index 94ce6cf70b..753bc07217 100644 --- a/src/routes/docs/quick-starts/+page.svelte +++ b/src/routes/docs/quick-starts/+page.svelte @@ -19,6 +19,12 @@ { title: 'Web app', quickStarts: [ + { + title: 'Web', + icon: 'icon-js', + image: '/images/blog/placeholder.png', + href: 'js' + }, { title: 'Next.js', icon: 'icon-nextjs', diff --git a/src/routes/docs/quick-starts/js/+page.markdoc b/src/routes/docs/quick-starts/js/+page.markdoc new file mode 100644 index 0000000000..6e0f2578b8 --- /dev/null +++ b/src/routes/docs/quick-starts/js/+page.markdoc @@ -0,0 +1,151 @@ +--- +layout: article +title: Start with Web +description: Build JavaScript or Typescript web apps with Appwrite and learn how to use our powerful backend to add authentication, user management, file storage, and more. +difficulty: beginner +readtime: 3 +back: /docs/quick-starts +--- + +Learn how to add Appwrite to your JavaScript or TypeScript web apps. +{% section #step-1 step=1 title="Create project" %} +Head to the [Appwrite Console](https://cloud.appwrite.io/console). + +{% only_dark %} +![Create project screen](/images/docs/quick-starts/dark/create-project.png) +{% /only_dark %} +{% only_light %} +![Create project screen](/images/docs/quick-starts/create-project.png) +{% /only_light %} + +If this is your first time using Appwrite, create an account and create your first project. + +Then, under **Add a platform**, add a **Web app**. +The **Hostname** should be `localhost` or the domain on which you're hosting your web app. + +{% only_dark %} +![Add a platform](/images/docs/quick-starts/dark/add-platform.png) +{% /only_dark %} +{% only_light %} +![Add a platform](/images/docs/quick-starts/add-platform.png) +{% /only_light %} + +You can skip optional steps. + +{% /section %} +{% section #step-2 step=2 title="Create project" %} +You can install the Appwrite Web SDK using CDN with a script tag. + +```html + +``` + +You can also install the Appwrite Web SDK using a package manager. +```sh +npm install appwrite +``` +{% /section %} +{% section #step-3 step=3 title="Import Appwrite" %} +```js +import { Client, Account} from 'appwrite'; + +export const client = new Client(); + +client + .setEndpoint('https://cloud.appwrite.io/v1') + .setProject(''); // Replace with your project ID + +export const account = new Account(client); +export { ID } from 'appwrite'; +``` +{% /section %} + +{% section #step-4 step=4 title="Using TypeScript" %} +If you prefer TypeScript, you can import TypeScript models from the Appwrite SDK. + +```ts +// appwrite.ts + +import { Client, Databases, Account } from "appwrite"; +// Import type models for Appwrite +import { type Models } from 'appwrite'; + +const client: Client = new Client(); + +client + .setEndpoint(<>>) + .setProject(project); + +export const account: Account = new Account(client); +export const database: Databases = new Databases(client); + +// You then use the imported type definitions like this +const authUser: Models.Session = await account.createEmailSession(email, password); +``` +{% /section %} + +{% section #step-4 step=4 title="Extending TypeScript models" %} +Sometimes you'll need to extend TypeScript models with your own type definitions. + +For example, when you fetch a list of documents from a collection, you can define the expected structure of the documents like this. +```ts +interface Idea extends Models.Document{ + title: string; + description: string; + userId: string; +} +``` + +When you fetch documents, you can use this new `Idea` interface like this. + +```ts +const response = await database.listDocuments( + ideasDatabaseId, + ideasCollectionId, + [Query.orderDesc("$createdAt"), Query.limit(queryLimit)] +); +const ideas: Idea[] = response.documents as Idea[]; +``` +{% /section %} + +{% section #step-6 step=6 title="All set" %} +The Appwrite SDK works with your favorite Web frameworks. + +Learn to use Appwrite by adding authentication to a simple web app. +{% cards %} +{% cards_item href="/docs/quick-starts/nextjs" title="Next.js" %} +Get started with Appwrite and Next.js +{% /cards_item %} +{% cards_item href="/docs/quick-starts/react" title="React" %} +Get started with Appwrite and React +{% /cards_item %} +{% cards_item href="/docs/quick-starts/vue" title="Vue.js" %} +Get started with Appwrite and Vue.js +{% /cards_item %} +{% cards_item href="/docs/quick-starts/nuxt" title="Nuxt" %} +Get started with Appwrite and Nuxt +{% /cards_item %} +{% cards_item href="/docs/quick-starts/sveltekit" title="SvelteKit" %} +Get started with Appwrite and SvelteKit +{% /cards_item %} +{% cards_item href="/docs/quick-starts/angular" title="Angular" %} +Get started with Appwrite and Angular +{% /cards_item %} +{% /cards %} + +Learn to use Appwrite by building an idea tracker app. +{% cards %} +{% cards_item href="/docs/quick-starts/react" title="React" %} +Get started with Appwrite and React +{% /cards_item %} +{% cards_item href="/docs/quick-starts/vue" title="Vue.js" %} +Get started with Appwrite and Vue.js +{% /cards_item %} +{% cards_item href="/docs/quick-starts/nuxt" title="Nuxt" %} +Get started with Appwrite and Nuxt +{% /cards_item %} +{% cards_item href="/docs/quick-starts/sveltekit" title="SvelteKit" %} +Get started with Appwrite and SvelteKit +{% /cards_item %} +{% /cards %} +{% /section %} \ No newline at end of file diff --git a/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc index 8c17094444..bfde2f9d17 100644 --- a/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc +++ b/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc @@ -137,7 +137,7 @@ The handle submit and submit type are props passed from `pages/login.vue`