use postgres

[digitalit]

Hi,

I'm trying to use postgres instead of sqlite but i can't figure it out.

Any tip?

Have a nice day

[edwardspresume]

Hi Peter,

Pardon the delay, just saw your message a few minutes ago. Are you trying to run your postgres DB locally and are you trying to use it with drizzle?

Also, just a heads-up I started a new job this week, so I might not be able to look into this in depth till later this week as I settle in

And thank you, have a nice day as well !

[digitalit]

Hi Edward,

Your answer were blazing fast so no need to apologize.

Yes, i intend to use drizzle and a local PG for dev and maybe Vercel with PG for production.

I found this repo: https://github.com/ak4zh/slide/tree/main that works fine but there are som differences from yours regarding schema and some other stuff.

I just want to be sure i start building with Lucia "the right way".

Congrats to the new job.

EDIT*

I just got it working: https://github.com/digitalit/sveltekit-lucia-auth-v3-example

I like your way as it's reflects the Lucia docs more in terms of schema.

Anyway take your time and please let me know what you think of my migration to PG.

Have a nice day.

[edwardspresume]

Thank you

And right on for getting it working! I'll take a look later today

Have a nice day

[edwardspresume]

Your migration to PG is good. I was able to get your repo working with PG locally. And I like the naming of the folder "migrations" since it's a lot more clear of its purpose, I'm going to be doing the same moving forward

The use of using a env for the DATABASE_URL and the error handling that you have for it in drizzle.config.ts is also a nice touch. I was too lazy to add it to mine 😅

Also note that the --config option for the drizzel-kit commands is not required if the drizzle config file is named drizzle.config.ts as this is the default file that drizzle read. But it's good that you specified that option, in case the drizzle team ever change the default name for the config file

[digitalit]

Please tell me if you want to continue this conversation and if so, should we continue here in a "issue"?

I want to give you some background of my situation. I used to divide a project into 3 different apps:

1. api.customers.se - this was an API using the framework AdonisJS with purpose to only handle data, mails and media.

2. admin.customer.se - this was the admin for my customer using the framework Quasar in SSR mode with purpose to handle all in house content and of course the content of the public customer site.

3. www.customer.se - this was the public site for for my customers visitors using the framework Quasar in SSR mode

PROS:

1. i could mess around with admin.customer.se and my customers public site were still up and running (unless see CONS 1)
2. i could do updates to admin.customer.se to see if something went wrong without affecting the customers public site
3. i could allow an external site to consume the API

CONS:

1. i could mess around with admin.customer.se and changes could accidentally break something in the customers public site
2. extremely time consuming managing 3 apps and furthermore 2 different frameworks that were releasing new versions faster than i could keep up
3. really over kill since i used only a fraction of each framework.
4. Quasar forced me to choose CSR/SSR for the whole app and not like Sveltekit that allows med to use CSR/SSR in different parts of the app
5. Quasar uses Vue (that is a great) but i wanted to use Svelte as it feels much more logic and a more future feel to it.
6. Quasar forced me (ish) to use Material Design witch for me is starting to feel a bit like Bootstrap felt before.
7. and a lot more but you get that the cons is overwhelming

As you understand i'm totally new to Sveltekit/Svelte so forgive me for asking stupid questions.

1. I wonder what the purpose with /utils/styleTransitionUtils.ts is. Is it some visual stuff or something functionally?
2. Also i wonder why the hard redirect to dashboard if loged in? I had to comment out throw redirect(303, DASHBOARD_ROUTE); in hooks.server.ts to be able to add like /routes/dashboard/todos
3. i see that some repos has splited the user table extracting the user password into a separate table like key. Any thoughts on that?

Have a nice day

[edwardspresume]

Ok, I moved out chat to discussions

I haven't tried those other frameworks that you mentioned for me to give them a fair comparison. But I would say that it would be better to convert those 3 projects to SvelteKit. It would make it easier to manage those projects while still being able to do all those things, with the cons that you mentioned being less.

As for whether these projects should each have their own repo post-conversion, that largely depends on the extent of shared utilities. If these shared elements are minimal or non-existent, maintaining separate repositories might be the most efficient approach. However, if there’s a significant amount of shared utilities, considering something like turbo repo could be beneficial. But I haven't tried it myself, so I wouldn't know for sure.

No worries, those are not stupid questions at all

1. Yeah in /utils/styleTransitionUtils.ts the function flyAndScale is to give components a certain animated transition, and 'cn' is to be able to merge tailwind classes without causing conflict. The code in that files was generated when I installed the component library shadcn. That file is named utils by default, but I changed it to styleTransitionUtils to be a bit more descriptive.

2. If a user is already be logged in, there’s no need for them to access the login or register pages. So, I set that redirect to the dashboard if they attempt to access the auth routes via the url. But that condition was something I quickly put together, so I made a mistake. Here's a correct one that doesn't prevent to the access to the subroutes of the dashboard.

	// List of AUTH routes
	const AUTH_ROUTES = [route('/auth/login'), route('/auth/register')];

	// If a logged-in user tries to access the login or register page, redirect them to the dashboard.
	if (session && AUTH_ROUTES.includes(event.url.pathname)) {
		throw redirect(303, DASHBOARD_ROUTE);
	}

3. Earlier versions of Lucia stored user credentials in a keys table. But for V3 they wanted to make things simpler, and they also mentioned that the keys table approach "didn't work for more complicated use cases”. My thoughts on the matter is that having a separate table for the user's credentials does improve security by reducing the risk of accidentally exposing these field when sending user info to the front-end. Using a separate table for the credentials also allows us to do a table-level encryption for sensitive data. So all in all, it's good to do for better security. In this repo, I chose not to use a separate table to align with the Lucia V3 documentation to not cause others in the tutorial I made.

[digitalit]

Pleas tell me if you don't want/have time with me asking questions?

Thank you for clarifying the Lucia table stuff.

With Vue i relied in Pinia(state) to handle all my states between pages/components. I also need the states to be persistent. I don't have anything critical in these stores but i need the user to have all settings and stuff persisted.

In vue one also did all api stuff in store files populating the store witch then showed all data in pages. I have a hard time grasping the difference between built in storage like Page data and "real" storage stuff.

I read a lot about the upcoming Runes in Svelte 5 but i can't figure out if the Runes will be able to persist?

Also as i'm learning Svelte i'm trying to use al little third party stuff as possible and do everything "the Svelte way". I wonder what style solution is recommended for Sveltekit?

By looking around it feels like Tailwind is the "official" way but there are a lot of inline coding everywhere. I was thinking of making my own UI components and i see you have but with som other third party stuff that broke when i tested with Svelte 5 / next.

As Svelte 5 is coming i don't want to use anything that will break so any tip of thing to avoid/use that will please Svelte 5?

[edwardspresume]

Yeah I don't mind, and I can make time for us to do a Q&A

Np regarding the Lucia table stuff.

I’m still relatively new to Svelte as well, so please take my advice with a grain of salt.

I haven't tried these libraries, but they allow us to have persistent state between pages/components via local storage https://github.com/joshnuss/svelte-persisted-store#readme or https://github.com/MacFJA/svelte-persistent-store

If you don't want to use the libraries, you can do something like this to sync the stores with local Storage. (Please note that this was my first big project with Sveltekit, so I'm sure that there are better ways to go about this)

https://github.com/edwardspresume/promptly/blob/037b13a6fb300dfb4d76cb9b6c3ff95f489d9b58/src/lib/dashboard/utils/localStorageManager.ts

To sync the stores with a DB you can first return the data in a load function on the server and then set the store to that data on the client:

Loading the user data on the server: https://github.com/edwardspresume/promptly/blob/037b13a6fb300dfb4d76cb9b6c3ff95f489d9b58/src/routes/dashboard/%2Blayout.server.ts

Setting the user data on the client: https://github.com/edwardspresume/promptly/blob/037b13a6fb300dfb4d76cb9b6c3ff95f489d9b58/src/routes/dashboard/%2Blayout.svelte

I haven't read up or tested svelte 5 too much since I am waiting for things to be finalized, but I think the $state rune should be able to work similarly to the above examples

In terms of styling, I’d recommend using whichever solution you prefer and that makes sense for your project and team. I personally prefer having my CSS code close to my HTML code for modularity and ease of making changes to a particular component/element. At the moment, I mainly use Tailwind, but I also utilize the style block within my component when needed.

If you have a repo for the UI components with third-party dependencies that broke with Svelte 5, I can take a look when I get a chance.

I haven't tested svelte 5 enough to give proper tips, but I might be trying it more in the coming weeks, so I can let you know then if I do

[digitalit]

Sweet, cause your are miles ahead of me skill wise :)

I got the store persist working with https://github.com/MacFJA/svelte-persistent-store and i like this package as one can choose if persist in localStorage/Cookies/Sessions but i read that localStorage is better to persist as i can hold more data and is faster than cookies?

My plan was to only store Lucia auth in a Cookie and then all my persists in localStorage, Is this okay you think?

If i should lean on only localStorage for persist i will try the other package that only has localStorage cause i think it might be smaller and also seems more popular?

One thing i really miss about Vue is the devtool with really nice structure and a separate tab for all stores(pinia).

In svelte devtool i'm having a hard time overview everything and the stores take me for ever to locate and i need to reload the devtool often when all data freezes and then i'll have to locate my stores again.

Any tip on how to use the Svelte devtool with stores?

Have a nice day :)

[edwardspresume]

Thank you for the kind words, I am sure you can surpass me :)

Nice on getting it working! And yeah localStorage can hold up to 10 MB of data, while cookies are limited to 4 KB. In terms of speed, I assume that localStorage is likely faster since it operates solely on the client-side and doesn’t send data to the server with each HTTP request, unlike cookies.

Yeah, that would work great. Cookies, being more secure, are suitable for auth-related data, while localStorage can be used for non-sensitive data such as user settings.

And yea if you're only using localStorage I would use the other library.

I haven't fully explored Vue, but I've heard really good things about their devtools. I'm going to have to give it a spin one of these days.

And which Svelte devtool are you referring too?

Have a nice day as well :)

[digitalit]

I guess it's the "official" called Svelte Devtool and its the only one i can get running.

But i found a solution that works exactly how i want. I use:

import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';

In my +layout.server i add everything i want to be shown in pageData:

import type { LayoutServerLoad } from './$types';

export const load = (async ({ locals: { session, user } }) => {
	return { isLoggedIn: session !== null, loggedInUser: user };
}) satisfies LayoutServerLoad;

In my +layout.svelte i import all my custom stores and then:

<div class="flex py-5">
   <div class="px-2 py-1 text-xs font-light">
       pageData
       <SuperDebug {data} />
   </div>
   <div class="px-2 py-1 text-xs font-light">
       settingsStore
       <SuperDebug data={$settingsStore} />
    </div>
</div>

And then i get what i want under every page content:

Then i will use debug: true/false for every block so i can hide and show the ones i want to see.

Please tell me if this is a stupid solution?

Have a nice day

[edwardspresume]

Ah ok yeah I have the Svelte Devtool installed, but I haven't really used it all that much to give any tips.

Your solution is brilliant! I never thought of using the SuperDebug in this way. I like your approach. The only thing I would say is maybe at some point we should create our own Debuger component so we can customize it to our liking if needed.

I might tinker around with a custom Debuger next week, if I do i'll share what I discover

Have a nice day

[digitalit]

Yeah, i had some problem with SuperDebug running multiple instances on the same page messing upp data and lagging.

I also wanted, like you said, have my own design/structure so i made my own debug component placed in the main layout so i can activate debug everywhere. I made the content smaller and also following light/dark modes.

debugg.mp4

The stores are the most important stuff for me to easily overview as my new project will depend heavily on custom stores.

It will be a replacement "backend" for this project that is a machine rental site: https://www.krankungen.se

When i say backend i mean the admin area that today are two different apps with two different frameworks AdonisJS(API) and QuasarJS (Vue). This is an only admin app and will not need any SEO and will not use url routing so no need for route-kit.

It will be only one page with a login and after validating creds content will appear using module blocks (components) that will be added with store states. The customer wants an "windows like" app with a empty canvas were one can activate/open a lot of module blocks in draggable/resizable windows.

This is quite interesting as it's not the traditional web way of doing thing but i have it running in AdonisJS(API) and QuasarJS (Vue) and it's quite clever as one can work with many things side by side in different windows.

But working in two apps and two different frameworks is time consuming and only in a short period of time am close to recoding it in only SvelteKit and its so much easier to code and really fast.

Just wanted to give you some info on my project so you don't think i'm totally lost when i might show you or ask about something that really don't make sense if this were an regular web site with SEO and what not.

Have a nice day

[edwardspresume]

Right on, on making your own debug component, it looks neat. Now you can turn that into a library if you want to, so you can easily import and use that in different projects. If you are to do that, I can help if you want. I never made a library before, but I want to learn how

The machine rental site looks pretty cool and an interesting project. I'm glad that you're having a good developer experience with recoding it in SvelteKit. Thank you for the added info. If you want my help with anything else let me know

Have a nice day

[digitalit]

Thank you, sound interesting creating a reusable library but for now i must focus on the project.

Also i have added the ability to edit the store values in the debug so one can se the impact of state changes.

Well the thing i have most problem grasping is the client/server line drawing in terms of functions. Usually one have a +page.svelte where all client stuff goes and a .page.server.ts file where all server functions goes. At least that's how i understand it?

Anyway, since i will be using Sveltekit a bit different with no pages appart from the root page with only a login form visible if not logged in and all ather stuff in separate components i run into some problem with the PageData stuff. I need to be able to do everything i can in a route env like routes/about/+page.svelte and +page.server.ts in a component like lib/components/about/about.svelte and about.server.ts.

This looks a bit tricky regarding stores and cookies as i think i need the things you get when the files liver in the "page env"?

Any tip on how to access/use all stuff when in components folder?

An good example is the login/logout with lucid that lives in routes/pages and i'd like to move this into an component but can't access like cookies, locals when not in a +page.server.ts file.

Have a nice day.

[edwardspresume]

So sorry for the long delay!

Yep, that is correct, +page.svelte is for all the client stuff and +page.server.ts is for all the server stuff. Any other JavaScript or TypeScript file with a .server in its name, such as database.server.ts, is only for server-side operations. Also note that server-only files cannot be directly imported on the client-side. This restriction helps prevent accidental exposure of sensitive server-side information to the client.

I am not sure what you mean by "page env", but you would still be able to access the PageData, stuff in the component files via the $page.data store from SvelteKit. To do so, return all the server stuff that you want the client to have access to in a +layout.server.ts then I would do something like this lib/component/pages/About.svelte and within that file can access the PageData that would be coming from the +layout.server.ts like this:

// file: +layout.server.ts

import type { LayoutServerLoad } from './$types';

export const load = async ({ cookies, locals: { session } }) => {

    const someCookieInfo = cookies.get('someCookie');
    
	return {
		isUserLoggedIn: session !== null,
	   someCookieInfo 
	};
}) satisfies LayoutServerLoad;

// file: lib/component/pages/About.svelte

<script lang="ts">
	import { page } from '$app/stores';
	
	const someCookieInfo = $page.data.someCookieInfo 
	const isUserLoggedIn= $page.data.isUserLoggedIn
</script>

<p>Is user logged in: {isUserLoggedIn ? 'Yes' : 'No'}</p>
<p>Some cookie info: {someCookieInfo}</p>

And you'll be able to access what ever info you're returning the +layout.server.ts load function such as the cookies, locals, etc.

Hope that made sense if not, we can jump on a call, or continue texting if you want

[digitalit]

Thanks and i'm sorry for my lame problem description but i guess i don't grasp it enough to explain correctly.

My goal is to not have anything in routes besides the root layout +layout.svelte and in this file i will hide/show/sort a bunch of content blocks. These modules as i call it is like products/customers/staff/settings and so on. These modules should be able to use custom stores doing database transactions and validation and all stuff that one can do in routes/somefolder/+somepage.svelte and +somepage.server.ts

Anyway, lets take an example:

Now i have the login/logout in routes/+page.svelte and +page.server.ts

I want all auth stuff to live in /src/lib/modules/auth and i can get this to work by moving everything in routes/+page.svelte to /src/lib/modules/auth/Auth.svelte but i can't figure out how to move everything in routes/+page.server.ts to /src/lib/modules/auth/auth.server.ts and the call the form actions from the /src/lib/modules/auth/Auth.svelte file.

The problem is my maybe stupid way of structuring this but it were really convenient in both Quasar and Adonis to totally separate all my "modules" and just use stores to have them communicate with one an other.

I want the SPA behaviour where the browser only shows domain.se and nothing more. So no url routing only show/hide based on store values.

Maybe i can structure everything in routes/modulefolders/+module.svelte and +module.server.ts and import them as components?

Think of my screen/root page as an huge workspace where many different floating windows will be opened and closed. They will all have the ability to interact with both stores and database.

I really like Svelte/SvelteKit and i would love to find a solution to my self created problem :)

I don't really care about the folder structure i just want to achieve the workspace feel.

i guess the short version is that i want the same behaviour in a component that i get in a page

Thank you and i'm so sorry for being a pain.

[edwardspresume]

No worries at all, I have a better understanding now

I have very little experience with SPA's, so I won't be the best help for this.

You would still need a +page.svelte at the root of the routes dir, else would get a 404 error in the console

Form actions can only be used in a +page.server.ts/js file, so if you do want to make your database transactions and validation via form actions, you can either create a general route with just that file example: src/route/generalRoute/+page.server.ts. And have it contain all the different from actions that you need:

// file: src/route/generalRoute/+page.server.ts

import type { Actions } from '@sveltejs/kit';

export const actions: Actions = {
      authFormAction: async (request) => {
            console.log('authFormAction');
      },
      windowOneFormAction: async (request) => {
            console.log('windowOneFormAction');
      },

      windowTwoFormAction: async (request) => {
            console.log('windowTwoFormAction');
      },};

And then for the forms in your module components, you can access that action via

<!-- file: /src/lib/modules/auth/Auth.svelte -->
  
<form method="POST" action="/generalRoute?/authFormAction">

Or you can create a route with a route with a +page.server.ts for each module that you want to do a form action in

If you want you don't want to use form actions for database transactions and validation, can use make fetch calls to an API end points src/routes/api/auth/+server.ts src/routes/api/someWindow/+server.ts but i would say doing form related things are easier with form actions.

And you can load the data that you want to pass to your modules in +layout.server.ts

Let me know if that works with what you want to do

[digitalit]

Sorry for late respons.

I will use form actions everywhere i need to check data and where i can use an form action button.

But i need to be able to trigger an fetch when i load an component and populate it with data.

I can't do this in like layout and pass to page data cause it will be so much bloated data.

So i have an component TIcketIndex.svelte and when this component is loaded i need to fetch all tickets.

TicketIndex.svelte:

<script lang="ts">
	import { onMount } from 'svelte';
 
	onMount(async () => {
		const response = await fetch('what do i type here?');
		if (!response.ok) {
			throw new Error(`HTTP error! status: ${response.status}`);
		}
		// add all tickets to my ticketIndex store
	});

	export let currentWidth: number;
</script>

I want to fetch from router/tickets/+server.ts:

import { database } from '$lib/database/database.server';
import { usersTable } from '$modules/auth/schema/authSchema';
import { eq } from 'drizzle-orm';

export const _checkExistingUser = async () => {
	const queryResult = await database
		.select({
			id: usersTable.id,
			password: usersTable.password
		})
		.from(usersTable)
		.where(eq(usersTable.email, '[email protected]'));

	return queryResult;
};

At some pint i got GET is not allowed so i guess i have to have some type POST in the fetch function but my biggest problem is that i don't know to write the correct fetch url to my _checkExistingUser function

Please note that the actual query is just an test query to get false/true but i need the basic flow working.

Have a nice day.

[digitalit]

Hi man,

I trying to figure out how to connect a sveltekit site to another.

So, i have an sveltekit that is only for administrating different companies with their separate data and i want to build separate websites in sveltekit (or maybe Astro) and these sites should be accessable with the company domain and have its own design (codebase/run process.

All content like news, products and so on should come from the separate admin site. In short the separate admin site should act like an api for the different company sites.

Is this possible?

Have a nice day.

[edwardspresume]

Pardon the delay on this, I had seen the email notification at the time, and forgot to follow up to reply. Do you still need help with this?

[digitalit]

No problem, i just glad to get your help when you find the time.

Well, i haven't really figure this out yet and what i'm trying to solve it to combine sveltekit sites.

My customer site
"master" sveltekit site will contain data for many companies and later i will build separate sveltekit sites for those that will contain data from two sources.

My customers companies (my customers own customers)
The companies will have their own "local" svelte site that can get data from the "master"

1. the "local" data from their own backend/db like news and other local stuff
2. the "master" data like staff/products... shall be coming via API calls from "master"

Basically i want the "local" sites be able to also get data from "master" where "master" acts like an API for those sites with specific data.

I hope you get what i mean, sorry if this is messy.

P.S i guess i can solve this by having different versions of the site for each company but how will i solve the domain isolation.

Basically my customer will offer this rental system admin and also want to offer "webpages" with totally different design and functions.

I would be nicest to separate the companies websites to separate svelte kit projects/sites

[edwardspresume]

Ok I'm spending time with my girlfriend today and also have a headache so i'll have to think about this later on.

I'll get back to you within about 3 days since the coming days might be a bit busy. But don't expect a proper solution from me though since I haven't encountered this scenario, but I can help brainstorm some ideas

[digitalit]

No rush and i hope your headache gets better,

I will never expect or beg for a complete and coded solution, thats on me :)

But i'm hoping to get some thoughts on my brainstorming that often are quite out there :)

Take it easy

[edwardspresume]

Thank you, I got a bit better yesterday

And ok roger, I'll follow up with you next time I get a chance

Have great day

[edwardspresume]

Based on your what you said it should be possible to have a centralized master SvelteKit site that acts as an API and data source for multiple local SvelteKit sites. I just haven't worked creating API's yet to have better insight on the approach

To solve the domain isolation issue, you can deploy each local site to a separate domain or subdomain. For example, if your customer's domain is example.com, you can deploy the local sites to subdomains like companyA.example.com, companyB.example.com, etc

Let me know if that helps

[digitalit]

thanx man, this sounds great.

as my "master" will act 99.9% as an admin site with just a login page and no SEO or anything i'd like the concept of letting "local" sites consume selected data from it and have the "freedom" of even being like an Astro/Svelte site that are really focused on SEO and other stuff.

The thing to solve i guess is how a "local" like Sveltekit site could have communication with two different Postgres, one for the standard local and the other via API from the "master" site.

Well, this is future problems but i will go with my gut feeling and not separate site/admin in the "master", it will only contain code for the actual admin. This way the master will be separated and "attaching" a "local" site won't affect the performance/code size or risk of down time while messing with the site part.

Does this sound like a valid approach?

Have a anice day.

[edwardspresume]

Np. And yeah your approach sounds valid. Let me know if you want help with anything else.

Have a nice day

[digitalit]

Sweet,

Well i guess iv'e gotten a lot of confidence in your skills so i would like to ask you about a few things.

My plan is to use as little overkill stuff as possible and keep my code minimal. I tried Shadcn witch i liked but i feel it's way to much unnecessary code for me.

And while Tailwind is great i feel a bit like i'm sucked into the old "Bootstrap trap".

I'm now fideling with Vanilla Extract CSS that looks really promising and i will try to build "my own shadcn". Its typed and there seems to be a lot to gain both with performance and type/linting in VSCode.

Take it easy