6 ms·

In contrast, I had a not-so-great experience attempting to use SvelteKit for a not-full-stack SPA. I wanted an SPA "app" for a side project I'd already written

In contrast, I had a not-so-great experience attempting to use SvelteKit for a not-full-stack SPA. I wanted an SPA "app" for a side project I'd already written in Elixir/Phoenix and kit turned out to be super immature for that. There's a lot of issues with building a "true" SPA in kit - it is built first and foremost for full stack and will throw up a hundred ways if you try to make an SPA, chiefly by making it inconvenient to use client-only libraries even though you're never running on a server. Svelte is pretty cool but if you want to make an SPA I would recommend vanilla Svelte + Routify instead of Kit. (Or just React. React is pretty good, and vite comes with a React starter that's super good! You don't have to throw something out just because it's "old"!)

uxcolumbo 5y ago
Why did you want to rewrite your Phoenix app as a SPA? Just to learn new things or because Phoenix is lacking? Have you tried LiveView? And can't you use React with Phoenix?
- square_usual 5y ago
  I needed a lot more interactivity, especially with things like client side animations. LiveView is great if your usecase is sending fresh data - but if you want more interactivity, you have to use JS, and frameworkless JS is setting yourself up for pain for all but the simplest projects. The usual solution is ot use Alpine to add to LiveView but it didn't do enough for me. I'm a big fan of using static rendering as far as possible - I was "raised" on SSR Rails - but I know when I need an SPA. You can use React. I recommend it in my GP comment.
Ameo 5y ago
SvelteKit now has a static adapter[1] which is designed for those kinds of scenarios, defaulting to pre-rendering all pages and not requiring a server I think. I've not tried it out myself though, but it might be good for that if you want to bring your own API. > I would recommend vanilla Svelte + Routify instead of Kit. That sounds like a solid way to go as well. SvelteKit has some nice tools for 100% static sites that do stuff like generate pages at build time from markdown and stuff like that. But if your site is really simple, then that works fine. [1] https://www.npmjs.com/package/@sveltejs/adapter-static/v/next https://www.npmjs.com/package/@sveltejs/adapter-static/v/nex...
- square_usual 5y ago
  I tried the static adpater, but it still has issues as acknowledged here: https://github.com/sveltejs/kit/issues/1650 https://github.com/sveltejs/kit/issues/1650 In that thread, you can see some of the ugly workarounds people have to go through to make purely client-side apps: https://github.com/sveltejs/kit/issues/1650#issuecomment-984155203 https://github.com/sveltejs/kit/issues/1650#issuecomment-984...
hdra 5y ago
Had the similar experience, and as it happens, I was also looking to build something with Elixir/Phoenix backend.. Its nice that it comes with a proxy `fetch` implementation that you can use to make requests to your API backend from the svelekit "backend", but there are many leaky API surfaces around it, esp when dealing with cookies. The docs is also rather lacking regarding the many callbacks that can run on both server/client, though it is somewhat understandable given everything is still very much in flux...
whiddershins 5y ago
We used sveltekit for the front end of our most recent project, and had pretty much zero problems. If you want to do true front end though, I hear your pain. The biggest issue I had was I never could figure out how to make all my resource paths work with the static adapter, so I was put in the position of having to redo every image reference (for example) if I wanted to build static files. Pretty frustrating. But if you are just doing SPA deploying to vercel for development I think sveltekit is just brilliant and just works.
slantyyz 5y ago
Sounds like SvelteJS is a better option for you than Sveltekit.
djKianoosh 5y ago
How does Routify compare with svelte-spa-router[1]? I really like svelte-spa-router for a simple SPA, though I think a lot of SPA routers don't always handle state well. [1] https://github.com/ItalyPaleAle/svelte-spa-router https://github.com/ItalyPaleAle/svelte-spa-router
- turtlebits 5y ago
  svelte-spa-router is a hash based router and will work with any web server. Routify requires a rewrite rule for it to work.

uxcolumbo 5y ago

Why did you want to rewrite your Phoenix app as a SPA? Just to learn new things or because Phoenix is lacking? Have you tried LiveView? And can't you use React with Phoenix?

square_usual 5y ago
I needed a lot more interactivity, especially with things like client side animations. LiveView is great if your usecase is sending fresh data - but if you want more interactivity, you have to use JS, and frameworkless JS is setting yourself up for pain for all but the simplest projects. The usual solution is ot use Alpine to add to LiveView but it didn't do enough for me. I'm a big fan of using static rendering as far as possible - I was "raised" on SSR Rails - but I know when I need an SPA. You can use React. I recommend it in my GP comment.

Ameo 5y ago

SvelteKit now has a static adapter[1] which is designed for those kinds of scenarios, defaulting to pre-rendering all pages and not requiring a server I think. I've not tried it out myself though, but it might be good for that if you want to bring your own API. > I would recommend vanilla Svelte + Routify instead of Kit. That sounds like a solid way to go as well. SvelteKit has some nice tools for 100% static sites that do stuff like generate pages at build time from markdown and stuff like that. But if your site is really simple, then that works fine. [1] https://www.npmjs.com/package/@sveltejs/adapter-static/v/next https://www.npmjs.com/package/@sveltejs/adapter-static/v/nex...

square_usual 5y ago
I tried the static adpater, but it still has issues as acknowledged here: https://github.com/sveltejs/kit/issues/1650 https://github.com/sveltejs/kit/issues/1650 In that thread, you can see some of the ugly workarounds people have to go through to make purely client-side apps: https://github.com/sveltejs/kit/issues/1650#issuecomment-984155203 https://github.com/sveltejs/kit/issues/1650#issuecomment-984...

hdra 5y ago

Had the similar experience, and as it happens, I was also looking to build something with Elixir/Phoenix backend.. Its nice that it comes with a proxy `fetch` implementation that you can use to make requests to your API backend from the svelekit "backend", but there are many leaky API surfaces around it, esp when dealing with cookies. The docs is also rather lacking regarding the many callbacks that can run on both server/client, though it is somewhat understandable given everything is still very much in flux...

whiddershins 5y ago

We used sveltekit for the front end of our most recent project, and had pretty much zero problems. If you want to do true front end though, I hear your pain. The biggest issue I had was I never could figure out how to make all my resource paths work with the static adapter, so I was put in the position of having to redo every image reference (for example) if I wanted to build static files. Pretty frustrating. But if you are just doing SPA deploying to vercel for development I think sveltekit is just brilliant and just works.

slantyyz 5y ago

Sounds like SvelteJS is a better option for you than Sveltekit.

djKianoosh 5y ago

How does Routify compare with svelte-spa-router[1]? I really like svelte-spa-router for a simple SPA, though I think a lot of SPA routers don't always handle state well. [1] https://github.com/ItalyPaleAle/svelte-spa-router https://github.com/ItalyPaleAle/svelte-spa-router

turtlebits 5y ago
svelte-spa-router is a hash based router and will work with any web server. Routify requires a rewrite rule for it to work.