Wait, so svelte has a global state management tool built in that requires no configuration? Svelte with Electron looks like a dream compared to React with Electron. Babale/webpack configs alongside electron-builder is not my favorite experience.
Haha. Yea it is really that easy. It has a similar flow to easy-peasy which is a wrapper over redux. Svelte is not perfect but I really enjoy it. It Can get cluttered but I would say css separation is still very possible if not a little more work. xD thanks for the comment. Good luck with svelte.
Thanks man for the kind words. Personally I enjoy svelte much more than all the other frameworks as it seems a lot nicer to work with personally. But I do have a react electron video if you would rather use electron with that. I am debating whether creating a svelte tutorial series after the electron one is finished since I really think using svelte with electron for a lot of people will be very straight forward and elegant. Let me know if you would like that or if you have any video/series suggestions. Cheers!
Hey, I really enjoiy your videos and I'm happy I could find you! But have you any ideas why there is an error when I do "npm run package" it says "Missing script: "electron-builder" but I did everything like you did in the video. Would love to see a reply. Thank you and have a nice day
Thanks for the kind words. Currently I am still thinking of video ideas and working on a few school and other personal projects. But I am working on finishing the electron-tutorial playlist as well as making svelte tutorials with electron. As crazy as it is I have actually never used tailwind yet xD, However I have wanted to try it since it seems appealing. I'll give it a try.
I love svelte and electron! However I'd love a version of SvelteKit, Electron, and Tailwind together even more. I was able to clone a project that does all three from github but its pretty over my head and a video building that from scratch would be super helpful.
The workaround for hot reloading can be a little complex depending on project structure and whether you also use typescript, However it is very similar to How I implemented it in my video on hot reloading typescript and electron apps. Luckily for strictly UI updates it is actually really straightforward with `electron-reload` on npm
When you do your Svelte/Electron tutorial series can you please do a multipage app with navigation either via left or top nav bars like most real world apps would have and also discuss if it is better to use straight Svelte or SvelteKit for an Electron app and why you would use one or the other. , pros and cons etc... 😁👍
I plan on doing that exact thing. But as a TLDR: Svelte Kit is way overkill and honestly kinda tricky to setup with electron apps. Svelte kit is great but not for electron use in my opinion. For the tutorial series I will be using default svelte and a package called svelte-spa-router for routing between pages. If you have any suggestions on the type of app to be build I would be interested to take those ideas. I am currently trying to decide app ideas that are small, but still feature packed. Cheers hope this rant helped xD
@@tylerlaceby It may be 'overkill' for the routing portion, but its simplicity for routing and plethora of other light-weight yet powerful features not only make it easier to develop in than using a 3rd party router.... but with the baked in goodies on the back end...it is much smoother and scalable.
Thank you for the video. you seem really great at explaining things simply. however, i keep getting an error saying require is not supported. tried changing to import but still says the same thing. I'm sure it's something on my end but I'm just commenting in case soomeone else runs into the same issue and maybe we can find a fix.
Thank. Yes so make sure you are not combining main process code with the frontend code. The code that has access to the dom cannot use require. Similarly the code on the main process can not either. This means they cannot use each other at all without possible issues.
The reason for removing the leading "/" is that with it, you say resolve from Root. If you just bundle Svelte Root is where ever your index is, however if you run through electron your root will be wherever you spawn your electron app from in this case "..../Project/electron". Adding a "." in front should also fix it.
You will use something like electron auto-update. There are packages that work with electron builder to package and help distribute updates to your users.
So the way this is handled with electron apps and SPA apps is typically to have the main process delicate routes when creating a new window. When you create a window have that window send a message to the main process asking which route to use. Then the main process responds with what that windows purpose is. This means the main window will send a message and the main process will say this is like the main route. Then later on if you open a new window for say a settings page. That window will ask what route to render/ use and the main window will notice that a settings page is needed to be opened.
I wish I could help but I cannot without anymore context. I can assure ti that this does still work so I would check your code over for issues. If your still stuck message me on discord
Wait, so svelte has a global state management tool built in that requires no configuration? Svelte with Electron looks like a dream compared to React with Electron. Babale/webpack configs alongside electron-builder is not my favorite experience.
Haha. Yea it is really that easy. It has a similar flow to easy-peasy which is a wrapper over redux.
Svelte is not perfect but I really enjoy it. It Can get cluttered but I would say css separation is still very possible if not a little more work. xD thanks for the comment. Good luck with svelte.
Oh yeah! Hop on board...this train is in full motion! React is the day before yesterday's news.
Looking forward to seeing your Svelte/Electron tutorial series. Your videos and the way you teach are great 😃👍
I have all most of your electron videos!!! Great work. Love it!
Very cool. Do you have any video about auto update?
Oh god, this is EXACLTY what I was looking for.
Thanks for making it simple and helping me a lot
Glad it was able to help out.
Man this was really cool. I wanted to build a desktop app build and I didn't even know it is possible to use Svelte! Gonna give it a try real soon.
Glad I could help with some ideas. xD I'm planning out a svelte electron tutorial series currently. Cheers!
@@tylerlaceby I'm hyped for it, don't forget to add tailwindcss please (just a suggestion though)
nice one dude! the first thing i tried and not ran into 50000 errors. in fact i didnt get one. and you explained it perfectly :)
I like your desktop background
Haha thanks
Thanks for this clever video. I am subscribing your channell. Verry good work
Thanks for the kind words.
Love your vids man keep up the good work! Is there any reason you chose Svelte for this video, instead of React, Vue or some other framework?
Thanks man for the kind words. Personally I enjoy svelte much more than all the other frameworks as it seems a lot nicer to work with personally. But I do have a react electron video if you would rather use electron with that. I am debating whether creating a svelte tutorial series after the electron one is finished since I really think using svelte with electron for a lot of people will be very straight forward and elegant.
Let me know if you would like that or if you have any video/series suggestions.
Cheers!
@@tylerlaceby I would love that kind of video my man, you are IMO one of the few people out there that are doing Electron justice.
@@tylerlaceby, I'll love that it, more svelte, please throw in tailwindcss with few api calls or CRUD functionalities.
Going to Sub.
Hey, I really enjoiy your videos and I'm happy I could find you! But have you any ideas why there is an error when I do "npm run package" it says "Missing script: "electron-builder" but I did everything like you did in the video. Would love to see a reply. Thank you and have a nice day
Wonderful genius!
Nice video , like the creativity behind your tech stack and clarity of explaining.
Any chance you’ll add tailwind to the project ?
Thanks for the kind words. Currently I am still thinking of video ideas and working on a few school and other personal projects. But I am working on finishing the electron-tutorial playlist as well as making svelte tutorials with electron. As crazy as it is I have actually never used tailwind yet xD, However I have wanted to try it since it seems appealing. I'll give it a try.
@@tylerlaceby, I encourage you to try, working with tailwindcss is actually fun
@@tylerlaceby Okay awesome , thanks ! Keep it up.
I love svelte and electron! However I'd love a version of SvelteKit, Electron, and Tailwind together even more. I was able to clone a project that does all three from github but its pretty over my head and a video building that from scratch would be super helpful.
I don’t see myself doing one with sveltekit but I would assume that it would have to ship with a local server too ?
Helpful tutorial. Thank you for sharing! Is there a way to do hot reloading or do you have to always restart the app when you make any changes?
The workaround for hot reloading can be a little complex depending on project structure and whether you also use typescript, However it is very similar to How I implemented it in my video on hot reloading typescript and electron apps.
Luckily for strictly UI updates it is actually really straightforward with `electron-reload` on npm
When you do your Svelte/Electron tutorial series can you please do a multipage app with navigation either via left or top nav bars like most real world apps would have and also discuss if it is better to use straight Svelte or SvelteKit for an Electron app and why you would use one or the other. , pros and cons etc... 😁👍
I plan on doing that exact thing. But as a TLDR: Svelte Kit is way overkill and honestly kinda tricky to setup with electron apps. Svelte kit is great but not for electron use in my opinion. For the tutorial series I will be using default svelte and a package called svelte-spa-router for routing between pages.
If you have any suggestions on the type of app to be build I would be interested to take those ideas. I am currently trying to decide app ideas that are small, but still feature packed.
Cheers hope this rant helped xD
@@tylerlaceby It may be 'overkill' for the routing portion, but its simplicity for routing and plethora of other light-weight yet powerful features not only make it easier to develop in than using a 3rd party router.... but with the baked in goodies on the back end...it is much smoother and scalable.
@@brandongibbs5880 Do you have a setup for that running that you can share?
Thank you for the video. you seem really great at explaining things simply. however, i keep getting an error saying require is not supported. tried changing to import but still says the same thing. I'm sure it's something on my end but I'm just commenting in case soomeone else runs into the same issue and maybe we can find a fix.
Thank. Yes so make sure you are not combining main process code with the frontend code. The code that has access to the dom cannot use require. Similarly the code on the main process can not either. This means they cannot use each other at all without possible issues.
The reason for removing the leading "/" is that with it, you say resolve from Root. If you just bundle Svelte Root is where ever your index is, however if you run through electron your root will be wherever you spawn your electron app from in this case "..../Project/electron". Adding a "." in front should also fix it.
If there were updates in the app, how to distribute to client computers??
You will use something like electron auto-update. There are packages that work with electron builder to package and help distribute updates to your users.
how can i achieve multiple windows in a electron svelte application with routing
Wow!!! nice and short!!! I am interested in something similar. Can you please make a follow up video to show how to handle routing.
So the way this is handled with electron apps and SPA apps is typically to have the main process delicate routes when creating a new window.
When you create a window have that window send a message to the main process asking which route to use. Then the main process responds with what that windows purpose is.
This means the main window will send a message and the main process will say this is like the main route.
Then later on if you open a new window for say a settings page. That window will ask what route to render/ use and the main window will notice that a settings page is needed to be opened.
trying to use svelte-spa-router in electron but i always get a blank page when i navigate to the page i clicked
I wish I could help but I cannot without anymore context. I can assure ti that this does still work so I would check your code over for issues.
If your still stuck message me on discord
@@tylerlaceby ok can you share your discord tag?