Docs: add astro quickstart guide #2606
Conversation
WalkthroughThis pull request replaces the placeholder Astro quick-start with a full Astro + Appwrite guide, increases readtime from 3 to 4, and adds step-by-step instructions: create an Appwrite project, initialize an Astro project, configure environment variables (astro.config.mjs and .env), install the Appwrite SDK, add a new src/lib/appwrite.ts wrapper, implement a client-side login page at src/pages/index.astro with session handling, include dark/light UI images and a CORS note partial, and provide deployment instructions and extensive code samples. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/routes/docs/quick-starts/astro/+page.markdoc (1)
248-267: Add null check for form submitter.The non-null assertion on line 251 could cause runtime errors if
e.submitteris undefined in certain browsers or submission scenarios.Apply this defensive coding improvement:
loginForm.addEventListener("submit", async (e) => { e.preventDefault(); - const type = e.submitter!.dataset.type; + const type = (e.submitter as HTMLButtonElement)?.dataset.type; + if (!type) { + console.error("Unable to determine submission type"); + return; + } + const formData = new FormData(loginForm);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/docs/quick-starts/astro/+page.markdoc(1 hunks)
🔇 Additional comments (6)
src/routes/docs/quick-starts/astro/+page.markdoc (6)
1-8: LGTM! Metadata and introduction look good.The readtime update from 3 to 4 minutes is appropriate for the expanded guide content.
9-49: LGTM! Clear and accurate setup instructions.Steps 1 and 2 provide clear guidance for creating both the Appwrite project and Astro application. The recommended project settings are appropriate for getting started.
94-108: LGTM! Appwrite client setup is correct.The client and account initialization follows Appwrite best practices, and the environment variable imports align with the configuration from Step 3.
117-194: LGTM! UI structure and styling are well organized.The HTML structure clearly separates the authenticated and unauthenticated states, and the CSS provides a clean, functional interface suitable for a quickstart guide.
276-278: LGTM! Clear final instructions.The closing step provides the correct command and default port for testing the implementation.
217-234: ****The code is correct. Appwrite JavaScript SDK v17+ uses object-style parameters as the preferred API for Account methods including
createEmailPasswordSession({ email, password }),create({ userId, email, password, name }), anddeleteSession({ sessionId }). The methods in lines 218, 223-228, and 234 all follow the current standard for Appwrite SDK v17.0.2.Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/routes/docs/quick-starts/astro/+page.markdoc (2)
248-267: Consider safer handling for submitter and currentUser.The code uses non-null assertions that could cause runtime errors in edge cases:
- Line 251:
e.submitter!.dataset.type- if the form is submitted programmatically without a button,submitterwill be null- Line 262:
currentUser!- assumes login/register succeeded without exceptionWhile these work in the happy path, consider defensive coding:
- const type = e.submitter!.dataset.type; + const type = (e.submitter as HTMLButtonElement)?.dataset?.type; + if (!type) { + alert("Invalid form submission"); + return; + } // ... after login/register - showLoggedIn(currentUser!); + if (currentUser) { + showLoggedIn(currentUser); + } else { + alert("Login succeeded but failed to fetch user data"); + }
113-115: Clarify the info note wording.The phrasing "Astro is not a frontend framework" might confuse users. Astro is a web framework, but it's primarily server-rendered with opt-in client-side JavaScript.
Consider rephrasing for clarity:
- This is similar to vanilla js considering Astro is not a frontend framework + This uses vanilla JavaScript in a client-side script tag, which is the recommended approach for adding interactivity to Astro components
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/docs/quick-starts/astro/+page.markdoc(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-11-16T17:12:42.549Z
Learnt from: vfshera
Repo: appwrite/website PR: 2606
File: src/routes/docs/quick-starts/astro/+page.markdoc:61-86
Timestamp: 2025-11-16T17:12:42.549Z
Learning: In Astro, envField schema definition is correctly placed in astro.config.mjs by importing envField from "astro/config". The schema defines validation rules and types. The actual environment variables are then accessed in runtime code (routes, components, middleware) by importing from "astro:env/client" or "astro:env/server" virtual modules.
Applied to files:
src/routes/docs/quick-starts/astro/+page.markdoc
📚 Learning: 2025-09-05T19:35:53.943Z
Learnt from: ebenezerdon
Repo: appwrite/website PR: 2372
File: src/routes/docs/tutorials/react/step-6/+page.markdoc:70-75
Timestamp: 2025-09-05T19:35:53.943Z
Learning: In React tutorial files, the correct Appwrite database instance to import is `tablesDB` from "../appwrite", not `databases`. The import statement should be `import { tablesDB } from "../appwrite"` to match the usage throughout the React tutorial code.
Applied to files:
src/routes/docs/quick-starts/astro/+page.markdoc
🔇 Additional comments (1)
src/routes/docs/quick-starts/astro/+page.markdoc (1)
217-234: ****The code uses the correct Appwrite Web SDK v17.0.2 API. As of v17+, all Account methods—including
account.create(),account.createEmailPasswordSession(), andaccount.deleteSession()—use object parameters, exactly as shown in the reviewed code. The original concern about positional parameters applies only to older SDK versions (v13-v15).Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/docs/quick-starts/astro/+page.markdoc(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-11-16T17:12:42.549Z
Learnt from: vfshera
Repo: appwrite/website PR: 2606
File: src/routes/docs/quick-starts/astro/+page.markdoc:61-86
Timestamp: 2025-11-16T17:12:42.549Z
Learning: In Astro, envField schema definition is correctly placed in astro.config.mjs by importing envField from "astro/config". The schema defines validation rules and types. The actual environment variables are then accessed in runtime code (routes, components, middleware) by importing from "astro:env/client" or "astro:env/server" virtual modules.
Applied to files:
src/routes/docs/quick-starts/astro/+page.markdoc
📚 Learning: 2025-09-05T19:35:53.943Z
Learnt from: ebenezerdon
Repo: appwrite/website PR: 2372
File: src/routes/docs/tutorials/react/step-6/+page.markdoc:70-75
Timestamp: 2025-09-05T19:35:53.943Z
Learning: In React tutorial files, the correct Appwrite database instance to import is `tablesDB` from "../appwrite", not `databases`. The import statement should be `import { tablesDB } from "../appwrite"` to match the usage throughout the React tutorial code.
Applied to files:
src/routes/docs/quick-starts/astro/+page.markdoc
🔇 Additional comments (1)
src/routes/docs/quick-starts/astro/+page.markdoc (1)
224-240: No issues found. The modern Appwrite JavaScript/Cloud client SDK uses object-parameter syntax foraccount.createEmailPasswordSession({ email, password }), and theaccount.create()method accepts an object withuserId,password, andname. The newer SDK also uses object-style foraccount.deleteSession({ sessionId }). All three API calls in the code are correct for the current Appwrite JavaScript Client SDK.
1 participant
What does this PR do?
Adds Astro quickstart guide
Have you read the Contributing Guidelines on issues?
Yes
Summary by CodeRabbit