Hosting Svelte Projects on Netlify
So I do have my portfolio hosted via Netlify, but it was awhile ago and I now can't remember how to do it.
All I've done is go on Netlify and add a new site, and host it via Github, selecting my Github repo.
It's failing at the image,
36 Replies
You are not using SvelteKit huh
Any projects going forward (or even this one) even for SPA you should really be doing with all with SvelteKit it is the defacto way to build with svelte period.
Like they even provide a easy
package template for libs its great.
If you are just using ViteI will have to check a few things but post your build error
nah just used vite, i think my portfolio was using sveltekit though
does it build locally, and do you have the right adapter for netlify, if it doesn't use auto?
Honestly I would just start a new Kit project and copy the files into it š
cause then you can use the adapter
Few things you should know either way though
How does it
npm run build (run it local easiest way)
What folder does it build too
then you goto site configuation / build
If its different you need to change it to what matches your step
You don't have any serverside functions and stuff so really it should be that easy as making sure the build command/dirs are correct
sorry was on the phone, 1 min
what did you need, the building list?
do the above first
So you see the error
oh lemme read what you wrote then mb
na that is perfect mate.. .It tells you
and I gave you the solution already
hmmm
So I need to make sure "build" in package.json is "npm run build" ? or do I change netlify to "vite build" ?
run build locally
they look at the output where does it go
what dir/
you can
npm run preview too and if it works you know it works
then you need to change the build step (on Netlify) to the proper dir /dist or what ever its called cause right now its /public and does not exist you get me?
like Kit builds to /build (as you see in my screen shot)I get what you're saying, but I also don't get what you're saying, know what I mean? š
let me check my other project so I can see
well shit. The settings in my other project that I deployed are the exact same as this one, so that doesn't help me at all š¤£
Follow my instructions
https://docs.netlify.com/configure-builds/overview/#build-settings
https://docs.netlify.com/integrations/frameworks/vite/
docs if I'm not clear enough xD
you can make the toml or w/e too I just never bother lol
I'm being very dumb, but I'm really not understanding where the issue is, I've just looked at 4 other projects I've deployed, and they all have the exact same settings as this one. I get it's struggling to find the directory, but it's the public one, I've ran npm run build on vscode, it's logged
ok and what dir is in there?
it looks like it is
/dist from what I remebered too
Public folder in vite was for assets or what not
this should be a folder that is in your .gitignore too
yup
:this:
You are being blinded by thinking its the same as what you did in the past when you need to understand what you are telling it
You have to point it to the right folder to do anything š
My god that was tedious
so all I had to do was change public to dist in publish directory
D:
Yes as I said š
Sorry I'm so frazzled, I couldn't connect the dots
You went on your own little path
Comparing stuff that isn't the same xD
I thought you were saying public is the path and I'm like bro, it's there, it's right there. lol
But understand what its doing right?
Yea I do now
npm run build ... builds the project to /dist
Netlify has to know that is the dir to run the app
yeah got it now, I'm so used to spamming npm run dev then throwing shit up on github, I forgot I actually need to npm run build for this stuff
baseDir is really important too if you do subfolder as root stuff
you running build did nothing but tell you what dir to use though (you can also change this in vite.config)
Now when you push to github* Netlify will build on every push
I typically will make a /dev /pub branch and only publish on pushes to /pub branch
Gotcha, thanks b1
š§āāļø
good work š now you know too
Yup! easy deploying in future
This really plays into most all things in the node build tools world they all work this way
Like if you were using Webpack/parcel/vite w/e this know how transfers
I typically always build locally and preview for bigger projects too, so I'm not wasting build time (which honestly is silly with as much as you get for free lol)