SolidJS with Vite vs Solid Start
Hi, I am very new to Web Development in general, and am currently struggling with understanding what a "framework" is comprised of. I started developing my Website in Svelte + SvelteKit and then hit a big problem I couldn't figure out. After that I was looking around for a framework with more control over the reactivity. After playing around with Solid for a few days I started porting what I had already written in my Svelte project and even figured out how to solve my problem. Theen I tried building it for the first time and noticed that SolidJS in itself isn't a whole framework, but SolidStart is (I had CORS related problems with SolidJS when i built it). So I started porting my SolidJS stuff to SolidStart, and now I basically have similar problems as with Svelte + SvelteKit.
My main problems are:
- Implementing a Theme Switch (auto | light | dark), without having FOUC
- Loading .json data (haven't done this in SolidStart yet, just in Svelte and in SolidJS (where it worked))
(- My fonts are in the public directory, but when building I always get the error "didn't resolve at build time, it will remain unchanged to be resolved at runtime" when importing the fonts from my app.css with the path being relative from the public directory as stated in the docs.)
So basically I have a problem with when in the lifecycle I should instantiate / update my values. (e.g. for the theme switch I use localStorage, which I (think), I can just call with onMount)
4 Replies
You can simply use vite proxy to solve the cors problem
If you need SSR (like e-commerce, or movie site... Which needs to be optimized for search engines), go for solidstart
Implementing the theme could be used with cookie from the server side, then return the initial html with theme included
I see, thank you for the answer, it helped a lot!
I solved the FOUC problem by using
Astro - and inlining script tags -> its very good documented
https://docs.astro.build/en/tutorial/6-islands/2/
Docs
Back on dry land. Take your blog from day to night, no island requi...
Tutorial: Build your first Astro blog —
Build a light/dark theme toggle using only JavaScript and CSS
You could do it in Solid as well -> you will have to read localStorage setting as early as possible to set the right classes