Hey devs! 👋
Today was all about Svelte, components, and my first real attempt at client-side routing — and wow, things got tricky fast!
🧠 Goal for Today
- Integrate Svelte into my existing blog structure.
- Break repetitive HTML into modular components like
Navbar.svelte,Post.svelte. - Try using
svelte-spa-routerfor page routing.
🧩 The Problems I Faced
I used bun create vite svelteapp --template svelte to set things up.
Moved my old index.html, about.html, and posts.html into the public/ folder — Svelte was rendering fine.
Created components, and even App.svelte was showing up nicely.
But then…
Routing broke everything. ☠️
I added svelte-spa-router using:
bun add svelte-spa-router
…but couldn’t get the components to load on navigation. I think it has to do with the URL hash (#) not being detected. Still debugging this.
💡 What I Learned
- Svelte is super clean. Definitely loving the syntax and reactivity.
- I’m using bunx live-server to serve files. It installs into ~/.bun/install/cache/ — a good thing to clean up later!
- Learned to separate components properly, though I still need to figure out how to handle per-post pages (day01.html, etc.).
- Vite + Bun combo is fast and neat!
Still hacking at this. Routing is tricky — but I’m getting there!
Follow my dev journey — if you're also learning, feel free to reach out! 🙌
linkedin.com/in/sourav-yadav-self
Also, Special Thanks to @csm18 for suggesting me to use svelte
Check out the Live Blog: https://codingtheself.github.io/webdevblog/posts/day03.html
📸 Sneak Peek
