DEV Community

How to build a Web App in 11 minutes and fall in love with SvelteKit

Valeria on September 18, 2021

It's been a long time since I got excited about a framework. I often advocate for reinventing the wheel, how come I'm writing an ode to a framework...
Collapse
 
fyodorio profile image
Fyodor

Thanks for the great post 👍 The SvelteKit approach looks really neat.

A Svelte-noob question about the folder structure: why some files are in src/..., some in src/lib/..., some insrc/routes/...` (incl. the form component) and some in the root? Is it intentional and reflects some common practices in Svelte, or it's just for the showcase purposes?

Collapse
 
valeriavg profile image
Valeria

Thank you) Svelte kit uses file names as route paths, therefore all the routes need to be in the src/routes folder. E.g. if you would like to render a page /blog/some-nice-title you would create a /src/routes/blog/some-nice-title.svelte. Same goes for the .ts ( or js) files with method handlers exported.
And the lib folder is conveniently aliased to avoid imports from ../../../../../src/lib/file.ts, so that you could simply import $lib/file.ts

Hope that helps:-)

Collapse
 
fyodorio profile image
Fyodor

Cool, very neat 🔥

Collapse
 
nstuyvesant profile image
Nate Stuyvesant

Nice job with the article. Trying to figure out how to make getSession() in hooks.ts useful. It only appears to fire once when I launch the dev server loading the home page. github.com/nstuyvesant/sveltekit-a....

Collapse
 
valeriavg profile image
Valeria

TL; DR; This is the correct behaviour. Write to client session storage whenever it changes.

As per documentation, getSession runs only when the page is rendered on the server. If this initial state is changing on the front-end you need to make sure the changes are reflected in the store.

To quote the docs once again:

session is a writable store whose initial value is whatever was returned from getSession. It can be written to, but this will not cause changes to persist on the server — this is something you must implement yourself.

Collapse
 
nstuyvesant profile image
Nate Stuyvesant

While my SPA has several pages in /src/routes, only /src/routes/index.svelte appears to trigger getSession() in hooks (guessing it's because client side routing has taken over). If it's a user's first visit to the site (no session id in a cookie to lookup in handle() so request.locals.user doesn't get populated), getSession() doesn't seem to have much value.

What I've been doing in my /login endpoint (github.com/nstuyvesant/sveltekit-a...) is putting the user in the body of the endpoint response then doing a session.set({ user: fromEndpoint.user }) on the client in the login() method that called the endpoint.

As all the examples of authentication using SvelteKit made use of getSession(), I thought I was doing something wrong.

Collapse
 
blancout profile image
Edimilson Blanes Coutinho • Edited

I´m getting a error at line:
if (typeof req.body == 'string' || Array.isArray(req.body))

Property 'body' does not exist on type 'RequestEvent<{ db: DB; }, Partial<{ email: string; password: string; "repeat-password": string; }>>'.

Please, how to fix it ?

Collapse
 
valeriavg profile image
Valeria

In the article I've used type RequestHandler, your version seems to be using RequestEvent. Is it a typo or the original type is no longer available for import?

Collapse
 
blancout profile image
Edimilson Blanes Coutinho

I copied the text as you wrote it using RequestHandler but something is changing in the compilation for RequestEvent. I believe it's the sveltekit version, I'm using the most current one.

Thread Thread
 
valeriavg profile image
Valeria

I believe you're right and it seems that the way routes are defined has been changed since I wrote the article. Please take a look at svelte kit docs while I'm updating examples to the current version.

Thread Thread
 
valeriavg profile image
Valeria

@blancout I've updated the article to reflect API of latest version, thank you for letting me know!

Thread Thread
 
blancout profile image
Edimilson Blanes Coutinho

You´re wonderful !

Collapse
 
fsrtechnologies profile image
Marc • Edited

One typo that tripped me up and might cause problems for others:

Let's add the "<Form/>" to src/routes/signup.ts as well:

That should be "src/routes/signup.svelte", not signup.ts.
Otherwise, excellent post! Thank you!

Collapse
 
valeriavg profile image
Valeria

Oops! Fixed it, thank you!
Glad you liked it!

Collapse
 
zefur profile image
The Silent Partner

Hi there, I am trying to follow along with this for practice and coming into the bug where I cannot get the data from req.locals.db when trying to save to the DB was there a work around for this? I am new to this so I have been un able to find a proper work around myself

Collapse
 
zefur profile image
The Silent Partner

Ignore me I think I sorted it =]