A template for Tailwind 2, Svelte, built with Snowpack
Having built quite a few web apps now using this stack, we made a template and strongly recommend it!
Svelte, just like Tailwind, is a 10x technology and allowed us to move really fast (my background front-end wise is 5 years of React)
Let me know if you have questions regarding the usage.
Trending on Indie Hackers
Hey Omar!
I'm not a Svelte dev but definitely want to try it out someday. And as I love Tailwind, I think your template is pretty promising (I starred it ;) ). Do you plan on adding some more components and other features? How does state management work in Svelte? If that requires some boilerplate code, maybe you can integrate that as well.
I recently published a Starter Kit as well, which connects a Laravel Backend to a Next.js frontend and does some heavy lifting for you. I'd be really grateful for some feedback on that!
https://github.com/NiclasTimmeDev/laravel-nextjs-starter
Cheers.
Hey @NTDev! Thanks for starring it :)
What kind of features do you have in mind? We don't have any plan for the time being, but why not!
We use Svelte and Tailwind to power our webapp at Monitoro (video here to give you an idea https://www.youtube.com/watch?v=SHk0uhiFTxM). One day we'll be less tied up with the product and hopefully contribute to the Svelte ecosystem :D
With that said, the template is as little opinionated as possible to avoid forcing users to clean things up. I personally always have to delete half of the boilerplates to actually get started!
Svelte provides something called "stores", and you can subscribe to changes happening to these stores reactively. It's much simpler than the typical state management solutions like Redux, and functionally very similar to MobX.
The downside is that you have less control and you might shoot yourself in the foot a few times while you're still learning (valid for Svelte in general).
There's no boilerplate at all though. You create a store like this:
const somethingStore = writable(initialStoreValue);https://svelte.dev/tutorial is an amazing way to get started, you'll be handheld throughout the entire process.
Just checked it out and it seems you spent significant effort on a very well featured starter! Congrats for shipping it :)
I would say, what's not clear to someone stumbling upon it is where to start, even though the documentation is very expansive, given the complexity and the amount of the features you're including, you might want to have a practical tutorial or video about it (if you want to invest the time that is).
Hey Omar,
Based on what you said about the vision for the boilerplate there probably don’t need to be a lot more features, so nevermind :D but maybe you will find something that you add to every project after deleting 50% boilerplate.
State management in Svelte sounds really easy and more fun than the annoying tools that I‘ve worked with so far. Maybe I‘ll give ist a try in my next project.
Thanks a lot for the valuable feedback! I think I have to update the docs and I‘m planning to even make a website for it. I‘m also thinking about making a Video, but I want to first find out if people are acutally interested.
Happy to help!
There's some basic stuff such as a router still :)
Like I mentioned elsewhere in the thread, contributions are more than welcome if you ever identify something relevant to add to the template :D
How do you guys like Snowpack? Any problems with it?
Interested to check this out. I mostly use Sapper + Tailwind (love it). Looking forward to using SvelteKit soon- will check out your template though, as I haven't used snowpack yet and I know SvelteKit takes advantage of that!
I started with Sapper for quite a long time, before I got tired of fighting rollup's super slow builds, and debug service worker caching issues (it's a real nightmare when you couple that with a CDN).
Eventually, we adopted parcel 1, and a standalone router, and giving up server side rendering as well. Unfortunately, Parcel is not compatible with Tailwind 2 (due to some craziness in the background with postCSS 8, I know it's crazy).
Parcel's transition to v2 is very opinionated and doesn't match our setup, while at the same time it drops the main reason we adopted Parcel in the first place.
Enter Snowpack, which not only works beautifully with our stack, but also represents a qualitative step forward in frontend building. SvelteKit is indeed very close, but is a bit overkill for our taste (and it doesn't include some necessary components such as tailwind, postcss ...).
Of course the template is open for contribution and if you would like to make a PR, it's more than welcome :)
I too use Sapper for an app I'm working on. @omneity, do you have any links or advice to what it would take to implement Snowpack with Sapper?
I can just wait for SvelteKit but there's no timeline (I've seen as of yet) and I'd really like to try it out.
Thanks for sharing your template!
Interesting, I never did the rollup thing. I skipped that route and used webpack and it was fast enough in dev for my needs.
I haven't had any issues with service workers on my CDN either (cloudflare).
I also haven't used parcel.
BUT, still looking to check out snowpack, just because.
The issue is that the service worker generated by sapper by default caches your requests, and there's no way to bust that cache if someone is already running your app. It causes all sorts of headaches.
Here's one ongoing issue for 2 years with annoying workarounds:
https://github.com/sveltejs/sapper/issues/179 (and there are many more)
The result being, the only way to update your website if it was cached for a user is to ask the user to clean up local storage.
Then I had to capture 404 errors if a file was updated but an older version is loaded in the browser, and force a page reload (say
home.a1b2.jsimportsprofile.a1b2.js, but you pushed an update in the meantime which deletesprofile.a1b2.jsand deploysprofile.c3d4.jsinstead).A real nightmare...
Love the resource Omar definitely I will give it a try.
Glad you liked it Ranjan! Let me know if you want some pointers around :)
Hi Omar. I don't have that much of knowledge in Svelet. I read your very informative answer above. It will definitely give me a head start and as of now, I have starred and bookmarked your repo for future reference.