diff --git a/src/routes/docs/quick-starts/web/+page.markdoc b/src/routes/docs/quick-starts/web/+page.markdoc index a26c20dad9..cd46704a2f 100644 --- a/src/routes/docs/quick-starts/web/+page.markdoc +++ b/src/routes/docs/quick-starts/web/+page.markdoc @@ -20,8 +20,8 @@ Head to the [Appwrite Console](https://cloud.appwrite.io/console). 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. +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) @@ -33,19 +33,22 @@ The **Hostname** should be `localhost` or the domain on which you're hosting you You can skip optional steps. {% /section %} -{% section #step-2 step=2 title="Create project" %} +{% section #step-2 step=2 title="Install Appwrite" %} You can install the Appwrite Web SDK using a package manager. ```sh npm install appwrite@14.0.1 ``` -You can also add the Appwrite Web SDK using CDN with a script tag. +You can also add the Appwrite Web SDK using CDN by adding a script tag to your HTML file. The SDK will be available globally through the `Appwrite` namespace. ```html ``` {% /section %} -{% section #step-3 step=3 title="Import Appwrite" %} +{% section #step-3 step=3 title="Initialize Appwrite" %} + +If you installed via npm, you can import `Client` and `Account` from the Appwrite SDK. + ```client-web import { Client, Account } from 'appwrite'; @@ -58,6 +61,19 @@ client export const account = new Account(client); export { ID } from 'appwrite'; ``` + +If you're using CDN, the library loads directly in your browser as a global object, so you access it through Appwrite instead of imports. + +```js +const client = new Appwrite.Client() + +client + .setEndpoint('https://cloud.appwrite.io/v1') + .setProject('') // Replace with your project ID + +export const account = new Appwrite.Account(client) +export const databases = new Appwrite.Databases(client) +``` {% /section %} {% section #step-4 step=4 title="Using TypeScript" %} @@ -109,7 +125,7 @@ const ideas = response.documents as Idea[]; {% /section %} {% section #step-6 step=6 title="All set" %} -The Appwrite SDK works with your favorite Web frameworks. +The Appwrite SDK works with your favorite Web frameworks. Learn to use Appwrite by adding authentication to a simple web app. {% cards %}