Svelte - VS Code initial files with Vite, what is what?
Making sure I don't make the same mistakes I made with my React projects 🤣
1) are all component files being held in ./src/lib?
2) App.svelte, is this the equivalent to app.jsx in React? so the main file where I import all components to build the app, and then push this file into main.js?
170 Replies
Use SvelteKit
even Svelte recommends you use kit
Yea it's the way you should start any Svelte project, their docs default it now too
oh shoot, yeah I see it. I'm so used to vite
So don't use create vite but instead create Svelte
uhh... Sveltekit demo app, skeleton project, library project?
pnpm create svelte@latest my-app
Skeletonah I see the demo one is just a pre-built to show you, mmka
I mean you can install a demo and nuke stuff too
Package is for making well library packages
I'm assuming this is the way
(don't know tS)
Alrighty lib is holding index.js here, the vite project had it under src with components in lib, so uhh... interesting
Perfect
Thanks!
Joy Of Code
SvelteKit Project Structure Explained
Understand how SvelteKit works by creating a SvelteKit project from scratch.
Yea basically just look on his site 😂
But if you have questions I'm here for ya too
all good I forgot how detailed his site was, it should answer most of what I need, thanks b1
Yea love that my mentor got into Svelte
I'm slightly confused still, it helped but not entirely.
lib/index.js "// place files you want to import through the
$lib alias in this folder.".. huh?
src/routes/+page.svelte ...huh? I can see this contains code which is showing on my browser, so is this a component? if so, why +page.svelte? is this the "app.jsx" file that stores all of my import/exports/the structure of the page?+page.svelte is the page for that route
so if you had a new route /something/+page.svelte
like a index.html/php
You don't wanna mess with the entry point really at all
I'm not even sure what the index.js is 😂
"lib can hold your shared components, utils or library code which can be imported using the $lib alias"
just showing you where to store stuff in $lib
yea
So that kinda stuff is up to you too
Lots of people like to keep concerns close
Like I only use $lib if its a shared component
if only the route uses the component I'll just keep it in the route.
I'll read through the basic sveltekit part of the tutorial to see if it explains it in better detail (than joyofcode did)
like /sometime/Component.svelte and import it with ./
ah ok
was just gonna ask, where am I storing all of my components really
that's the bit that confused me
Yea and that bit you shouldnt worry about much
people get hung on the weirdest things imo
Lots of times that is a "you choice"
You can also setup your own Aliases like $lib
I'd say only put components in the route folder if you want to and it's used only on that page. As soon as it's used in two places, it's easier to stick it somewhere in $lib
say I wanted $sass or $utils to alias imports from /lib/utils/
agree with Jochem
The way I work a lot is by just writing everything in +page.svelte until I see something that's an obvious component, then split it out into Component.svelte in the same folder, then if that component is useful elsewhere I move it to $lib
I love that, cause I see so many people make everything a component... then you are just Propdrilling or making a global for someothing that maybe shouldn't have been abstracted in the first place xD
ahh so +page.svelte is my "app.jsx" in react? sorry for the comparisons, just trying to make sure I understand
don't compare them
make a new mental model
+page.svelte is the page for that route
so I could create say... header.svelte, and then export that into +page.svelte
app.jsx is more like index.html
in this case
for this, you'd use the layout system
Svelte injects it self into index.html
ahhh ok
React has to use JS cause its "just js bro"
I've just read taht in the tutorial
src is where your app's source code goes. src/app.html is your page template (SvelteKit replaces the %sveltekit.head% and %sveltekit.body% as appropriate), and src/routes defines the routes of your app.
so its app.jsx is really injecting it self into a <div #id="app">
gotcha, this makes more sense
we call this a "entry" point
vite does it too (and one thing I hate about vite)
Vite does let you set multiple entry points but its not clean like Snowpack was imo (and why html template plugins were better or rather even available)
Keep in mind too Astro is basically a Vite plugin
Kit is a Vite plugin
they made it that way on purpose so you can use really any other vite stuff with it.
https://joyofcode.xyz/svelte-for-beginners
https://joyofcode.xyz/sveltekit-for-beginners
may aswell just go straight into sveltekit eh
So he has it well abstracted
but yes always just use Kit
no reason to use anything else Kit does it all better and helps you.
Even if you wanted a full SPA (you just turn off ssr on your +layout.svelte)
even if you're building a SPA with a separate backend, it still makes some sense to use sveltekit
yeah that's great thanks chaps
ill read the tutorial on sveltekit for setting it up etc thetn ill check out joyofcods video
warning
You might enjoy the experience and not wanna use anything else
honestly im good with that, a year ago I was worried because svelte was so small, but now that im seeing it popping up everywhere in the uk, I figured now is honestly probably a great time to learn it
Yea its only going to grow the more people realize how good it is xD
Kit being in 1.0 release for a year now helps too
Svelte without a router was having a hard time taking off though lots of websites with millions of users use it
ElderJS was one .
any idea when 5 is coming out btw?
TBH no rush
cause depending, CDL may or may not want to spend too much time learning about the reactivity system
They wanna make sure they do Runes proper before they release I'm sure.
and old ways won't be sunset till 6/7 they said
So what could be years away
sounds good, im safe for a bit then
ill have built a to-do app by then im sure 💀
yea you good
it's not a huge deal until you start doing weird shit, so I wouldn't worry about it too much, just curious 😄
Honeslty Runes won't be that big a hurdle I think people are making it a big deal like they did with the +page/server stuff
If I can understand it enough to use them anyone can xD
oh, honestly I can't wait
it seems much clearer
what it solves too is bigger than any magic syntax and I'm sure they will have nice wrappers around the primatives.
So yea I'm hyped too
not having to use $$restprops > export let prop
rants
do me a quick favour, try create a +page/svelte in this section, doesn't seem to let me unless I'm miss-understanding what it's asking of me https://learn.svelte.dev/tutorial/pages
I read it as, create about folder inside routes, and add a +page.svelte inside about
?
what the
I rightclicked the folders instead of using the tiny badly contrasted buttons
oh how weird, if I right click it works, if I click on the little btutons, it gives me "only xx can be created here"
/feedback
man this is weird, but im starting to understand it
assuming this tutorial is teaching my fullstack right now lol
Which is the way
Php gang knows
SvelteLab
SvelteLab
A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.
It's a nice playground too if you need something. Stackblitz too (it powers both the tutorial and lab)
Thanks for that. I finally understood the routing, and it looks like joysofcode just made .svelte component files inside the routing file, assume that's ok too? he uses +layout.svelte as his main "import everything here and ill build the page!" file
is there a way to make a global css file? app.css or whatever
you can import it from $lib in +layout.svelte
i.e.
Oh fantastic, so I just create the css file in the lib folder, do whatever I want in there and it imports into my layout file in routing
Great
simple
I thought the basic template already did that in
routes/+layout.svelteyea idk its been awhile since I used the skel template
when I do its normally just to not deal with deps and I rebuild my template xD
I hate updating deps xD
its like removing malware/viruses
best to just format and reinstall
>.>;; I'm kinda the same with package.json 🤣
seems the browser doesn't like me doing that
yea you probably can't inside that tut
I wouldn't use that tutorial as a repl
this is in vscode
oh 😂 what you mean browser then?
I did a skeleton buld to practise
close and restart vite
works, random lol
😉
always restart Vite first then be like wtf
Ok I'm used to the layout of the sveltekit files now
simple
most things you will not have to restart vite but sometimes yea like with that cause its wanting to import the asset.
Because SvelteKit is a vite plug you will find somethings like that too that helps to reference how they do things.
like importing Images
because it will handle caching and stuff for you (vite seems to add the headers)
I see, I see
'ppreciate the help
You can always look how my poser arse does things too https://github.com/b1mind?tab=repositories
fullkit labels are my current template
I have a basic one and a Prismic one going atm
need to update my basic xD
oh nice thanks, was hoping to find a github repo I could check out
going through the svelte tut atm to pick up the way it writes everything, very easy to learn
yea its so nice and easy xD
also leverages the native API's a lot too so that really helps as you get into more complexity. Like I can't express how nice it is to have real hrefs, real forms, all progressively enhanced with little effort. You can get really good results leveraging their client side nav too.
Great, I'll plough through the tutorial this week and practise some building along the way
💪
Aha, so you have all of your components and styling inside the lib folder
just depends.
Like I said I really don't worry about much of that atm
If you are on a Team lots of the structure and linting will be decided as a team.
So for now I just do what feels good in the moment and move on
ohh, so it really doesn't matter where I put the components?
can be in lib, can be in src/components, can be in routing?
could be a Header in the /src/ with my +layout
if its not used in any sub layouts
Interesting..
no its "just js bruh"
I think i'll use lib/components, just to keep it nice and neat
Understanding ESM+CJS imports/exports helps a LOT
err
ESM
CJS is good to know too
ill check it out!
yea so like Jochem was saying, its really about where it is used too. Think about keeping concerns close
Also a hot tip is to use
goto: Def in vscode. Idk what the default bind is anymore cause I customized mine.
if its not working by default (with svelte) you might need to modify a config but.I am enjoying the hell out of this tutorial
can i use kit and avoid routing just to avoid confusion when im just using it for basically svelte (but everything says use kit even if only doing svelte, so uhh, sure)
first ask why you would avoid routing?
also routing is just file paths in SvelteKit
well Folder paths
you can just use that one
+page.svelte as the one page you're makingyea I mean if you have one page sure but the best part of kit is you can MPA and still have it butter
Client side nav fo free 😄
You can tie into it (even better now with navigation promise) like I do to fake the View transition api
https://b.1mind.dev/projects
I mean, I can't even get the first bit to load up atm, so I was trying to minimize the amount of stuff I hard to work with, until I get the hang of it 😬
first bit?
created Todo.svelte inside src/lib/components/Todo.svelte, tried to import it into +page.svelte, just got a 500 error
those are usually pretty descriptive
whats the import look like (code plz)
$lib/components/Todo.svelte
use the alias cause its nice
aha.
but you need to understand why that don't work too which is the path is wrong
./lib would be /src/routes/liboh
./ is same dirohhh...
../ is back up onedoh.
/ is always rootI should've known ../, because of cd ..
yup exactly the same
lovely, thanks chaps
just normal file paths stuffs
so I can use +page.svelte as my "main file", and I can import everything to there to build the site, aswell as my global css
yea
you can make MPA at anypoint too using the same components in a new folder/+page.svelte and make a Nav.svelte or what not and learn about +layout
if you are just using one page too its fine just saying that would be the enxt step.
its litterly that
yeah I went through that a little with joysofcode
path 'route/todo/+page.svelte' == domain.com/todo/ (that's it... you know how Kit does routing xD)
I think he used layout.svelte as his main page, and +page.svelte as the home/about/contact etc..
yup
basic templating is powerful
slots make life nice (even with components, cause pages are just components 😄
well layout is more so
might get the hang of using layout from the fly, so I can form a nice habit
I use templating even in Pug 😄
its a good pattern to learn and imo you can bring the same logic to components so.
imo html templates made me a better component dev >.>;; hah
ill give it a shot, I'll just get the hang of the basics first then ill move it around later
Svelte templating* is basically handlebars too (popular html template lang)
Vue slots are much the same too just tossing that out there
functionality done except editting an item, i can add, remove, check/uncheck.
Got mega stuck on the checkbox, asked chatgpstupid to help and it gave me some massively over the top code, scrapped it, checked out some SO threads, stole a bit here, bit there, merged it, tweaked it, and it works.
Sveltekit is younger than chatgpt's training data
yeah I realized that after about 30mins of banging my head against a wall haha
removed 50% of the code, and it worked
thanks for the help lads, I've pretty much built the todo list, i just need to style the input and make sure the lists are in columns, rather then being flex-wrapped then I think i may re-do my portfolio in svelte and add some more advanced pieces to it, as it looks horrendously amateurish.
So I've been silently following this thread and today found out about this site: https://sveltebyexample.com/ Looks like an interesting way of getting started, what do you think?
As I've been looking forward to finally get started with Svelte I wanted to also use a UI library. I've found https://www.melt-ui.com/ which looks quite good although still in development. If anyone has any recommendations I'd appreciate it, as I'm trying to get into Svelte for the nth time and would prefer to focus on the core rather than stylistic choices.
Melt toot would still need to style
It's styleless components so you can use your own design system
The example website is fine, I still think the official examples and learn.svelte provide more though.
Sure, but the accessibility stuff and things like modals, accordions and such is easier when is all handled.
Oh no doubt! I'm a big fan of the work they are doing at MeltUI
You mean that learn.svelte has examples about components?
https://svelte.dev/examples/hello-world
na but the main site does
The example site (you linked*) is not bad though. I saved it for future reference in helping others.
I'll check both and compare, from someone with fresh eyes to Svelte maybe I can give some good tips as well
It does look quite similar to Vue so it shouldn't be too hard to learn.
Like the actions example they give could be better.
Actions are one Sveltes bread and butter features imo
what really allows you to use any JS libs in svelte 😄
https://svelte.dev/examples/actions
dang even their examples could use some more 😂 (but it does show the power a little)
Btw, I saw a couple of videos talking about Svelte 5 and runes and whatnot... I hate to jump in when there are big breaking changes, similar to what happened with React + hooks and later the context api
Should I go for that directly or does it matter much?
We should probably make a #discussions thread, CDL already sidetracked his own thread but we off the rails hard now lol
Sure no worries, let's close this one I'll open a new one if I have questions. I just wanted to jumpin as I found good info here butit's fine
go for it. because we don't know when 5 will release could be a year, also the old way will not sunset for another few years after that probably
Runes are pretty hype though. I'm curious how they will use the primitives, and maybe magic wrappers/syntax around it.
It's going to be a good thing either way, little more complexity but not really.
What Runes solve is worth the syntax imo. So people complaining are not wrong but at the same time I think they don't want to change is all lol.
Change is hard 😄
One thing I do like about React though is that is pretty close to JS for most things.
I thrive on it, but yea I realize others find it hard 😄
Yea so you would favor Runes probably (signals)
Less compiler magic and just JS
That's what I first liked about Svelte when it started to gain traction
And whatI don't like so much about Vue actually, is that they have their own way of doing things which is why they had to refactor it a bunch of times only to become a React clone 😄
Anyway I'll see how I find it after my nth to-do app
Yea if you know Vue, Svelte will be a snap for you
just less v-stuffs (v-bind === bind:) etc
yeah, they honestly feel very similar
Yeah that throws me off sometimes in Vue
stores makes svelte very much prefered, state management in Vue is a bit of a mess
They make you bring your own too yea? so like Redux?
it does yeah
I've been using it with Laravel with Inertia, and sometimes I feel like going back to good old templating engines. We're going in circles all the way back to the 90's 😂
Honestly compared to Redux, everything is easy so no complains there
vuex isn't the worst, it's just a lot more than you need a lot of the time
Pinia is fine though, much better than Vuex
I'm excited to see how Runes remove the need for Stores
I kinda understand already but ... just more power.. yes please
insert Star Wars gif