Appwrite Ssr Svelte Kit

Overview

The Almost CoverAlmost SSR - Svelte Kit is a demo application that showcases authorized server-side and client-side rendering. It utilizes Appwrite, Svelte Kit, and TypeScript. The application uses secure cookies for authorization and sets these cookies on the SSR server hostname instead of the Appwrite hostname to enable server-side rendering. To ensure proper authorization during client-side rendering, the Appwrite hostname needs to be a subdomain of the SSR hostname.

Features

• Authorized Server-Side and Client-Side Rendering: The application demonstrates how to achieve server-side and client-side rendering with proper authorization using secure cookies.
• Appwrite Integration: The application integrates with Appwrite, a backend-as-a-service platform, to handle user authentication and authorization.
• Svelte Kit: The application is built using Svelte Kit, a framework for building web applications that provides routing, server-side rendering, and other features out of the box.
• Pink Design: The application utilizes the Pink Design design system to ensure a consistent and visually appealing user interface.
• TypeScript: The application is developed using TypeScript, which adds static typing to JavaScript and improves code maintainability and reliability.

Installation

To set up the Almost CoverAlmost SSR - Svelte Kit, follow these steps:

1. Set up the Appwrite server.

   • Create an Appwrite project.
   • Set up the Appwrite server by installing the necessary dependencies.
   • Create a project named “almostSsr”.

2. Set up the client.

   • Install the required libraries using npm.
   • Update the AppwriteEndpoint in src/lib/AppwriteService.ts to point to your Appwrite server.
   • Start the server using the command “npm run dev”.

3. Deployment.

   • Deploy the frontend on your production domain (e.g., myapp.com).
   • Add the frontend domain as a trusted platform in your Appwrite project.
   • Add a custom domain to your Appwrite project, which should be a subdomain of your frontend (e.g., appwrite.myapp.com).
   • Update the SsrHostname and AppwriteHostname in src/lib/AppwriteService.ts with the proper domains.

Summary

The Almost CoverAlmost SSR - Svelte Kit is a demo application showcasing server-side and client-side rendering with proper authorization using secure cookies. It integrates with Appwrite and is developed using Svelte Kit and TypeScript. The application demonstrates how to set up the server and client, as well as deployment steps. It also emphasizes the use of the Pink Design design system for a consistent and visually appealing user interface.