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?
No description
170 Replies
b1mind
b1mind•13mo ago
Use SvelteKit
Jochem
Jochem•13mo ago
even Svelte recommends you use kit
No description
b1mind
b1mind•13mo ago
Yea it's the way you should start any Svelte project, their docs default it now too
CDL
CDL•13mo ago
oh shoot, yeah I see it. I'm so used to vite
b1mind
b1mind•13mo ago
So don't use create vite but instead create Svelte
CDL
CDL•13mo ago
uhh... Sveltekit demo app, skeleton project, library project?
b1mind
b1mind•13mo ago
pnpm create svelte@latest my-app Skeleton
CDL
CDL•13mo ago
ah I see the demo one is just a pre-built to show you, mmka
b1mind
b1mind•13mo ago
I mean you can install a demo and nuke stuff too Package is for making well library packages
CDL
CDL•13mo ago
I'm assuming this is the way
No description
CDL
CDL•13mo ago
(don't know tS)
CDL
CDL•13mo ago
Alrighty lib is holding index.js here, the vite project had it under src with components in lib, so uhh... interesting
No description
CDL
CDL•13mo ago
Perfect Thanks!
b1mind
b1mind•13mo ago
Joy Of Code
SvelteKit Project Structure Explained
Understand how SvelteKit works by creating a SvelteKit project from scratch.
b1mind
b1mind•13mo ago
Yea basically just look on his site 😂 But if you have questions I'm here for ya too
CDL
CDL•13mo ago
all good I forgot how detailed his site was, it should answer most of what I need, thanks b1
b1mind
b1mind•13mo ago
Yea love that my mentor got into Svelte
CDL
CDL•13mo ago
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?
b1mind
b1mind•13mo ago
+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 😂
CDL
CDL•13mo ago
"lib can hold your shared components, utils or library code which can be imported using the $lib alias"
b1mind
b1mind•13mo ago
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.
CDL
CDL•13mo ago
I'll read through the basic sveltekit part of the tutorial to see if it explains it in better detail (than joyofcode did)
b1mind
b1mind•13mo ago
like /sometime/Component.svelte and import it with ./
CDL
CDL•13mo ago
ah ok was just gonna ask, where am I storing all of my components really that's the bit that confused me
b1mind
b1mind•13mo ago
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
Jochem
Jochem•13mo ago
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
b1mind
b1mind•13mo ago
say I wanted $sass or $utils to alias imports from /lib/utils/ agree with Jochem
Jochem
Jochem•13mo ago
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
b1mind
b1mind•13mo ago
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
CDL
CDL•13mo ago
ahh so +page.svelte is my "app.jsx" in react? sorry for the comparisons, just trying to make sure I understand
b1mind
b1mind•13mo ago
don't compare them make a new mental model
Jochem
Jochem•13mo ago
+page.svelte is the page for that route
CDL
CDL•13mo ago
so I could create say... header.svelte, and then export that into +page.svelte
b1mind
b1mind•13mo ago
app.jsx is more like index.html in this case
Jochem
Jochem•13mo ago
for this, you'd use the layout system
b1mind
b1mind•13mo ago
Svelte injects it self into index.html
CDL
CDL•13mo ago
ahhh ok
b1mind
b1mind•13mo ago
React has to use JS cause its "just js bro"
CDL
CDL•13mo ago
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.
b1mind
b1mind•13mo ago
so its app.jsx is really injecting it self into a <div #id="app">
CDL
CDL•13mo ago
gotcha, this makes more sense
b1mind
b1mind•13mo ago
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
CDL
CDL•13mo ago
may aswell just go straight into sveltekit eh
b1mind
b1mind•13mo ago
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)
Jochem
Jochem•13mo ago
even if you're building a SPA with a separate backend, it still makes some sense to use sveltekit
CDL
CDL•13mo ago
yeah that's great thanks chaps ill read the tutorial on sveltekit for setting it up etc thetn ill check out joyofcods video
b1mind
b1mind•13mo ago
warning You might enjoy the experience and not wanna use anything else
CDL
CDL•13mo ago
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
b1mind
b1mind•13mo ago
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 .
Jochem
Jochem•13mo ago
any idea when 5 is coming out btw?
b1mind
b1mind•13mo ago
TBH no rush
Jochem
Jochem•13mo ago
cause depending, CDL may or may not want to spend too much time learning about the reactivity system
b1mind
b1mind•13mo ago
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
CDL
CDL•13mo ago
sounds good, im safe for a bit then ill have built a to-do app by then im sure 💀
b1mind
b1mind•13mo ago
yea you good
Jochem
Jochem•13mo ago
it's not a huge deal until you start doing weird shit, so I wouldn't worry about it too much, just curious 😄
b1mind
b1mind•13mo ago
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
Jochem
Jochem•13mo ago
oh, honestly I can't wait it seems much clearer
b1mind
b1mind•13mo ago
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
CDL
CDL•13mo ago
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
CDL
CDL•13mo ago
I read it as, create about folder inside routes, and add a +page.svelte inside about
Jochem
Jochem•13mo ago
?
No description
CDL
CDL•13mo ago
what the
Jochem
Jochem•13mo ago
I rightclicked the folders instead of using the tiny badly contrasted buttons
CDL
CDL•13mo ago
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
b1mind
b1mind•13mo ago
Which is the way Php gang knows
b1mind
b1mind•13mo ago
SvelteLab
SvelteLab
A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.
b1mind
b1mind•13mo ago
It's a nice playground too if you need something. Stackblitz too (it powers both the tutorial and lab)
CDL
CDL•13mo ago
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
b1mind
b1mind•13mo ago
you can import it from $lib in +layout.svelte
<script>
import '$lib/sass/global.scss';
</script>
<script>
import '$lib/sass/global.scss';
</script>
i.e.
CDL
CDL•13mo ago
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
Jochem
Jochem•13mo ago
I thought the basic template already did that in routes/+layout.svelte
b1mind
b1mind•13mo ago
yea 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 🤣
CDL
CDL•13mo ago
seems the browser doesn't like me doing that
b1mind
b1mind•13mo ago
yea you probably can't inside that tut
CDL
CDL•13mo ago
<script>
import Header from './header.svelte'
import '$lib/global.css';
</script>
<script>
import Header from './header.svelte'
import '$lib/global.css';
</script>
No description
b1mind
b1mind•13mo ago
I wouldn't use that tutorial as a repl
CDL
CDL•13mo ago
this is in vscode
b1mind
b1mind•13mo ago
oh 😂 what you mean browser then?
CDL
CDL•13mo ago
I did a skeleton buld to practise
CDL
CDL•13mo ago
No description
b1mind
b1mind•13mo ago
close and restart vite
CDL
CDL•13mo ago
works, random lol
b1mind
b1mind•13mo ago
😉 always restart Vite first then be like wtf
CDL
CDL•13mo ago
Ok I'm used to the layout of the sveltekit files now simple
b1mind
b1mind•13mo ago
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)
CDL
CDL•13mo ago
I see, I see 'ppreciate the help
b1mind
b1mind•13mo ago
You can always look how my poser arse does things too https://github.com/b1mind?tab=repositories
GitHub
b1mind - Repositories
Full stack or no stack, I enjoy making things for the web. - b1mind
b1mind
b1mind•13mo ago
fullkit labels are my current template I have a basic one and a Prismic one going atm need to update my basic xD
CDL
CDL•13mo ago
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
b1mind
b1mind•13mo ago
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.
CDL
CDL•13mo ago
Great, I'll plough through the tutorial this week and practise some building along the way
b1mind
b1mind•13mo ago
💪
CDL
CDL•13mo ago
Aha, so you have all of your components and styling inside the lib folder
b1mind
b1mind•13mo ago
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
CDL
CDL•13mo ago
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?
b1mind
b1mind•13mo ago
could be a Header in the /src/ with my +layout if its not used in any sub layouts
CDL
CDL•13mo ago
Interesting..
b1mind
b1mind•13mo ago
no its "just js bruh"
CDL
CDL•13mo ago
I think i'll use lib/components, just to keep it nice and neat
b1mind
b1mind•13mo ago
Understanding ESM+CJS imports/exports helps a LOT err ESM CJS is good to know too
CDL
CDL•13mo ago
ill check it out!
b1mind
b1mind•13mo ago
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.
CDL
CDL•13mo ago
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)
b1mind
b1mind•13mo ago
first ask why you would avoid routing? also routing is just file paths in SvelteKit well Folder paths
Jochem
Jochem•13mo ago
you can just use that one +page.svelte as the one page you're making
b1mind
b1mind•13mo ago
yea 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
CDL
CDL•13mo ago
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 😬
b1mind
b1mind•13mo ago
first bit?
CDL
CDL•13mo ago
created Todo.svelte inside src/lib/components/Todo.svelte, tried to import it into +page.svelte, just got a 500 error
Jochem
Jochem•13mo ago
those are usually pretty descriptive
b1mind
b1mind•13mo ago
whats the import look like (code plz)
CDL
CDL•13mo ago
<script>
import Todo from './lib/components/Todo.svelte';
</script>

<Todo />
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<script>
import Todo from './lib/components/Todo.svelte';
</script>

<Todo />
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
CDL
CDL•13mo ago
No description
b1mind
b1mind•13mo ago
$lib/components/Todo.svelte use the alias cause its nice
CDL
CDL•13mo ago
aha.
b1mind
b1mind•13mo ago
but you need to understand why that don't work too which is the path is wrong
Jochem
Jochem•13mo ago
./lib would be /src/routes/lib
CDL
CDL•13mo ago
oh
b1mind
b1mind•13mo ago
./ is same dir
CDL
CDL•13mo ago
ohhh...
b1mind
b1mind•13mo ago
../ is back up one
CDL
CDL•13mo ago
doh.
b1mind
b1mind•13mo ago
/ is always root
CDL
CDL•13mo ago
I should've known ../, because of cd ..
b1mind
b1mind•13mo ago
yup exactly the same
CDL
CDL•13mo ago
lovely, thanks chaps
b1mind
b1mind•13mo ago
just normal file paths stuffs
CDL
CDL•13mo ago
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
b1mind
b1mind•13mo ago
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
CDL
CDL•13mo ago
yeah I went through that a little with joysofcode
b1mind
b1mind•13mo ago
path 'route/todo/+page.svelte' == domain.com/todo/ (that's it... you know how Kit does routing xD)
CDL
CDL•13mo ago
I think he used layout.svelte as his main page, and +page.svelte as the home/about/contact etc..
b1mind
b1mind•13mo ago
yup basic templating is powerful slots make life nice (even with components, cause pages are just components 😄 well layout is more so
CDL
CDL•13mo ago
might get the hang of using layout from the fly, so I can form a nice habit
b1mind
b1mind•13mo ago
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
CDL
CDL•13mo ago
ill give it a shot, I'll just get the hang of the basics first then ill move it around later
b1mind
b1mind•13mo ago
Svelte templating* is basically handlebars too (popular html template lang) Vue slots are much the same too just tossing that out there
CDL
CDL•12mo ago
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.
Jochem
Jochem•12mo ago
Sveltekit is younger than chatgpt's training data
CDL
CDL•12mo ago
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.
Joao
Joao•12mo ago
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.
b1mind
b1mind•12mo ago
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.
Joao
Joao•12mo ago
Sure, but the accessibility stuff and things like modals, accordions and such is easier when is all handled.
b1mind
b1mind•12mo ago
Oh no doubt! I'm a big fan of the work they are doing at MeltUI
Joao
Joao•12mo ago
You mean that learn.svelte has examples about components?
b1mind
b1mind•12mo ago
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.
Joao
Joao•12mo ago
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.
b1mind
b1mind•12mo ago
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)
Joao
Joao•12mo ago
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?
b1mind
b1mind•12mo ago
We should probably make a #discussions thread, CDL already sidetracked his own thread but we off the rails hard now lol
Joao
Joao•12mo ago
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
b1mind
b1mind•12mo ago
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.
Joao
Joao•12mo ago
Change is hard 😄 One thing I do like about React though is that is pretty close to JS for most things.
b1mind
b1mind•12mo ago
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
Joao
Joao•12mo ago
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
b1mind
b1mind•12mo ago
Yea if you know Vue, Svelte will be a snap for you just less v-stuffs (v-bind === bind:) etc
Jochem
Jochem•12mo ago
yeah, they honestly feel very similar
Joao
Joao•12mo ago
Yeah that throws me off sometimes in Vue
Jochem
Jochem•12mo ago
stores makes svelte very much prefered, state management in Vue is a bit of a mess
b1mind
b1mind•12mo ago
They make you bring your own too yea? so like Redux?
Jochem
Jochem•12mo ago
it does yeah
Joao
Joao•12mo ago
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
Jochem
Jochem•12mo ago
vuex isn't the worst, it's just a lot more than you need a lot of the time
Joao
Joao•12mo ago
Pinia is fine though, much better than Vuex
b1mind
b1mind•12mo ago
I'm excited to see how Runes remove the need for Stores I kinda understand already but ... just more power.. yes please
Joao
Joao•12mo ago
insert Star Wars gif
Want results from more Discord servers?
Add your server