Sveltekit SSR

Hello,

Using mostly all of the code, besides the UI from https://github.com/Meldiron/appwrite-ssr-svelte-kit/tree/main to get SSR working in a demo project i'm using to learn how it all works.

I have it working on the server side but not sure what i'm doing wrong, the client side is not getting the account. I'm trying to learn here so don't make me feel stupid. lol!

Cookies are being set and I can see them in the browser. I am thinking the following code is where i'm messing up. I am using localhost Svelte and my Appwrite server is hosted.

export const AppwriteHostname: string = 'appwrite.hinrgdjs.com';

export const AppwriteEndpoint = import.meta.env.VITE_APP_ENDPOINT.toString();
export const AppwriteProject = import.meta.env.VITE_APP_PROJECT.toString();```

When I click ``Create Anyomous Account`` as expected the account gets created in my project and the cookies are set.(see pic)

when trying to fetch the account or delete the session, i get the 401 error:

```Request URL:
https://appwrite.hinrgdjs.com/v1/account
Request Method:
GET
Status Code:
401
Remote Address:
159.203.112.158:443
Referrer Policy:
strict-origin-when-cross-origin```

```Access-Control-Allow-Credentials:
true

Access-Control-Allow-Headers:
Origin, Cookie, Set-Cookie, X-Requested-With, Content-Type, Access-Control-Allow-Origin, Access-Control-Request-Headers, Accept, X-Appwrite-Project, X-Appwrite-Key, X-Appwrite-Locale, X-Appwrite-Mode, X-Appwrite-JWT, X-Appwrite-Response-Format, X-SDK-Version, X-SDK-Name, X-SDK-Language, X-SDK-Platform, X-SDK-GraphQL, X-Appwrite-ID, X-Appwrite-Timestamp, Content-Range, Range, Cache-Control, Expires, Pragma
Access-Control-Allow-Methods:
GET, POST, PUT, PATCH, DELETE
Access-Control-Allow-Origin:
http://localhost:5174

The most important part is appwrite endpoint must be a subdomain of your app. This makes the cookie a 1st party cookie that will be shared and sent to both your back end and Appwrite

Ok, so I won’t be able to use localhost for the app and use my appwrite hosted. I’ll have to create a local appwrite server for testing?

I recommend editing your hosts file to point hinrgdjs.com to localhost

So I should change export const SsrHostname: string = 'localhost'; to export const SsrHostname: string = 'hinrgdjs.com' and in my hosts file hinrgdjs.com localhost

in my hosts file on my local machine I have an entry: 127.0.0.1 hinrgdjs.com and when i ping hinrgdjs.com, I am getting 127.0.0.1 back. Is this correct?

So in the browser, this still goes to the hinrgdjs.com, only when i ping from the terminal does it report back 127.0.0.1. So after i build the svelte app in dev mode and it opens up in the browser as expected it doesnt work. I know the code works perfectly because I actually built the app and used it on the real hosted server and everything works, i am able to set the cookies and do a fetch request same as in the Meldiron example.

Unfortunately I cant get it to work in dev. Any help apprecitated. Thanks.

I have heard some browsers ignore the hosts file

ok, ill try another browser

I used Chrome and that did honor the hosts file, because now the browser gives the "This site can not be reached " message. Still not working, I get the anon user in appwrite but no cookie created in the browser. I get the cookie when i change back to localhost. hmmm

but no cookie created in the browser.

What makes you say that?

are you connecting to a local appwrite?

no

anything in any logs?

you should be able to see stuff in the response headers too

Just so im clear, here is what im doing.

my .env file:

VITE_APP_PROJECT="624293b9aed2a2244ed3"
VITE_APP_SSR_HOSTNAME="linkup.hinrgdjs.com"
VITE_APP_APPWRITE_HOSTNAME="appwrite.linkup.hinrgdjs.com"```

My hosts file has the entry: ``127.0.0.1 linkup.hinrgdjs.com``

Sorry i meant the client side is not getting a cookie

the server side is working, it creates the anon user

Hi, you can use appwrite-ssr npm package for this all. You dont have to worry about that all.