personnaly i prefer the method to generate the electron vite react repository with the official vite create command. that make all the functionnaly of vite include. like the reload each time we change the electron files,etc.. There is the command: npm create vite@latest my-electron-vite-project After select Others->create-electron-vite->React.
Setting up Unit tests is an important part of production apps and I couldn't agree more with creating a video on them! Thanks for the ideas! I will be sure to credit you in the video!
And mexico is pronounced me-hi-co... it's called an Endymion, and Vite is legally the correct pronunciation when speaking English. Otherwise we'd all be pulling french accents every 10th word we say since so many of our words are taken from French already...
@@oweneaster7899 Those aren't the same. French loanwords turning into English happens over tens, if not hundreds of years. There isn't the same expectation for it to be pronounced as a French word, becauase it isn't anymore, its an English word, even if spelt the same. When products like Vite are titled, there is an intention to how it should be pronounced, so there is a correct way to pronounce it. French people dont say "Snap-sha", they say "Snapchat". Happens in every language, not just English.
Thank you so much. I spend hours of trying to do this, after find this video, I managed to do it. Do you have a video of building and installing for production?
After trying to set an App Icon, my app displays just a white screen on the production build. How can we set the app icon without encountering issues? In the meantime, Thanks for this video, it helped me build an app in a very fast time.
Are there any errors that pop up in your console? You should just have to replace the favicon.ico file with your own. Regular PNG files wont work and etc. has to be a .ico file as far as I am aware.
How do you actually build the app and create an .exe file using electron build with react vite ts? What configuration changes would need to be made? Think a vid tutorial on that would be very helpful.
Yeah I can definitely make a video on building the vite applications. In this specific project, you should just have to run "npm run build". I recommend this only for development builds since there will need to be extra things added for production ready builds. Something to get you headed in the right direction at least. Hope this is helpful
@@ehrengrenlund great, cheers. Also would be useful learning about integrating a local database along with this tech stack, one that allows you to store the database file on your c drive in a folder of your choice.
You can use a tool called debugtron, and start the executable with that and it will give you an output of the logs and you can then figure out why it might not be working.
Yes, so you will need to do npm i -D sass to get scss files to work. Vite does all the configuration for you so there isn't anything you have to do there.
$ npm install npm WARN cleanup Failed to remove some directories For some reason i keep getting this error, both yarn and npm, and there isnt any package lock json to delete 😭 😭
in the setup command and the beginning of the video. you will just use javascript instead of typescript. anywhere i use types, you will just omit those
Yes it is possible. i’m not entirely sure of the steps to do it currently, but if you look up implementing tailwindcss with react, it will be the same steps. i do plan to make a video on this topic soon since it’s been requested many times. i’m just really busy with freelance work at the moment
@@ehrengrenlund Bro I tried adding tailwindcss to the setup like the same way we add in react but strangely its not working . Do you have any idea what can be the issue or can you please make a video on this .
@@aashrith9680 My most recent video goes over setting up Tailwind CSS with react. I don’t go super in depth, but there is a video there that will get you started with getting styles imported and actually working so you can use it. Hope that helps!
Yes! Electron forge has a plug-in that supports vite. Electron Forge has a specific section under Built-In templates that covers Vite as well as under Forge Configuration -> Plugins -> Vite Plugin. The packaging steps should be the same.
They should either go into a dist folder or a build folder in your project directory. if they are not, make sure your command is completing and there are no errors in the output
@@ehrengrenlund i was trying to learn electron by making my app but got stuck on my main js file and render js file communication. Tried using IPC with preload js file. But it just doesn`t work and I don`t know why. Definitely waiting for detailed video on that.
@@Lemberg_1715 If you haven't checked out my latest video, it explains IPC more in depth than this video. If you have checked it out, are you getting any errors trying to register IPC handlers within ipcMain?
Hey there. It seems that there are two ways to go about quickly scaffolding the project. The most conflicting part of this is how both methods exist in the GitHub org that hosted them. You: npm create electron-vite: via a separate scaffolding CLI repo on their org They: npm create @quick-start/electron: via their official CLI repo, also on their org So... Why should we pick this CLI over the official one? Does it do anything better than the official? Why would the authors fragment their userbase like this? ---- *EDIT* : You know what, I didn't read carefully. It seems the tool you used is not the official way to go about it, and the community has created a small org around electron-vite that appears to authentically represent electron-vite. Somehow. The author of electron-vite was not involved in the development of that alternate CLI. It's still feels fragmented.
npm create @quick-start/electron grants additional configurations to the initial project set up, for instance I don't use TypeScript and by default the npm create electron-vite adds TypeScript configurations.
There seems to be a plugin that you can use called vite-plugin-solid that you can add to the vite config under plugins and that should allow you to use solid with vite. Then you would just go about adding in solid as you normally would in your projects. Im not familiar with SolidJS so I cant give you a super detailed answer, but its something I could research and make a future video on if you would like
@@ehrengrenlund Ah, thanks! That worked! I think I'm good now with setting things up ;) But if you ever wanted to make a tutorial creating a basic app with it (like making some features and such, that would also be greatly appreciated! Only if you have the time tho, I'll try and figure things out as I go)
In that boilerplate when you initialize it, you can select what language you want to use. in this video i selected typescript, but you can select javascript if that’s what you want to use
personnaly i prefer the method to generate the electron vite react repository with the official vite create command. that make all the functionnaly of vite include. like the reload each time we change the electron files,etc..
There is the command: npm create vite@latest my-electron-vite-project
After select Others->create-electron-vite->React.
How can I do this but instead TS use JS
Finally! A guide to setting up Electron+React that actually works! Thank you.
Would love to see this video add: SQLite3 and Unit Testing of Components.
Setting up Unit tests is an important part of production apps and I couldn't agree more with creating a video on them! Thanks for the ideas! I will be sure to credit you in the video!
@@ehrengrenlund I also would like to see SQLite3 added
Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling...
And mexico is pronounced me-hi-co... it's called an Endymion, and Vite is legally the correct pronunciation when speaking English.
Otherwise we'd all be pulling french accents every 10th word we say since so many of our words are taken from French already...
@@oweneaster7899 Those aren't the same. French loanwords turning into English happens over tens, if not hundreds of years. There isn't the same expectation for it to be pronounced as a French word, becauase it isn't anymore, its an English word, even if spelt the same. When products like Vite are titled, there is an intention to how it should be pronounced, so there is a correct way to pronounce it. French people dont say "Snap-sha", they say "Snapchat". Happens in every language, not just English.
at last... I was looking so long for such a video! thank you very much!!
Good video 👍🏻
FYI it's spelled Veet (french for speed)
You talk about important topics! Thank you! You have my sub:)
Couldn't get React Native for Windows to work
Not sure I would be aware of this tool if it wasn't because of your video.
Thank you so much. I spend hours of trying to do this, after find this video, I managed to do it.
Do you have a video of building and installing for production?
nice video, do you have one to get debugging setup correctly in vscode, I have followed a couple but they don't seem to work properly
Great video! It was just what I was looking for! I subbed and can't wait for more content from you, keep up the good work!
Hope i can see more episodes about Electron Vite Reactjs app.
After trying to set an App Icon, my app displays just a white screen on the production build.
How can we set the app icon without encountering issues?
In the meantime, Thanks for this video, it helped me build an app in a very fast time.
Are there any errors that pop up in your console? You should just have to replace the favicon.ico file with your own. Regular PNG files wont work and etc. has to be a .ico file as far as I am aware.
excelent content which would be be much more excellent if font size were bigger! thank you very much!
Awesome ! , and this my first comment to any of the youtube video I watch !!.
How do you actually build the app and create an .exe file using electron build with react vite ts? What configuration changes would need to be made? Think a vid tutorial on that would be very helpful.
Yeah I can definitely make a video on building the vite applications. In this specific project, you should just have to run "npm run build". I recommend this only for development builds since there will need to be extra things added for production ready builds. Something to get you headed in the right direction at least. Hope this is helpful
@@ehrengrenlund great, cheers. Also would be useful learning about integrating a local database along with this tech stack, one that allows you to store the database file on your c drive in a folder of your choice.
I want make executable using react builder but when i try to execute it. it is showing blank screen.
Any solutions for this ?
You can use a tool called debugtron, and start the executable with that and it will give you an output of the logs and you can then figure out why it might not be working.
Nice vid. How did you set all the css files as .scss initially? i thought you need to npm i sass in the project
Yes, so you will need to do npm i -D sass to get scss files to work. Vite does all the configuration for you so there isn't anything you have to do there.
Thanks for sharing!
Please zoom unto your screen or use bigger font. I can't see things without a microscope.
excellent video :)
Thank you!!!!
Thanks a lot!
Im getting default preload screen when i run development.
How can I change it to index file
how is this video free.... legend
love this video, but when I do this I get problems with 'node:fs' and 'node:path'
$ npm install
npm WARN cleanup Failed to remove some directories
For some reason i keep getting this error, both yarn and npm, and there isnt any package lock json to delete 😭 😭
how do you package the app
Pls how can I setup the same application with JavaScript instead of typescript?
in the setup command and the beginning of the video. you will just use javascript instead of typescript. anywhere i use types, you will just omit those
Thank you for this!! I have a question: Is it possible to use tailwindcss with this?
Yes it is possible. i’m not entirely sure of the steps to do it currently, but if you look up implementing tailwindcss with react, it will be the same steps. i do plan to make a video on this topic soon since it’s been requested many times. i’m just really busy with freelance work at the moment
@@ehrengrenlund Bro I tried adding tailwindcss to the setup like the same way we add in react but strangely its not working . Do you have any idea what can be the issue or can you please make a video on this .
@@aashrith9680 My most recent video goes over setting up Tailwind CSS with react. I don’t go super in depth, but there is a video there that will get you started with getting styles imported and actually working so you can use it. Hope that helps!
how to add auto updates in an electron app while using this
Would it be possible to package this into an executable using Electron-Forge?
Yes! Electron forge has a plug-in that supports vite. Electron Forge has a specific section under Built-In templates that covers Vite as well as under Forge Configuration -> Plugins -> Vite Plugin. The packaging steps should be the same.
hello bro my app work well on comand npm run dev. But when i building the app not finding the files you know about that?
They should either go into a dist folder or a build folder in your project directory. if they are not, make sure your command is completing and there are no errors in the output
@@ehrengrenlund great i try see it thanks
What is the process for ipc communication in electron react... actually i wanted to write some backend stuff in electron and send it to react...
I’ll for sure make a video on that. IPC can definitely be a daunting task if you have never played with it before
@@ehrengrenlund i was trying to learn electron by making my app but got stuck on my main js file and render js file communication. Tried using IPC with preload js file. But it just doesn`t work and I don`t know why. Definitely waiting for detailed video on that.
@@Lemberg_1715 If you haven't checked out my latest video, it explains IPC more in depth than this video. If you have checked it out, are you getting any errors trying to register IPC handlers within ipcMain?
@@ehrengrenlund I somehow missed it, will check it out.
mooooon!!!, haoooon!!, chwaooon!!
is there any way with react js app ?? it is ts btw
Hey there. It seems that there are two ways to go about quickly scaffolding the project. The most conflicting part of this is how both methods exist in the GitHub org that hosted them.
You: npm create electron-vite: via a separate scaffolding CLI repo on their org
They: npm create @quick-start/electron: via their official CLI repo, also on their org
So... Why should we pick this CLI over the official one? Does it do anything better than the official? Why would the authors fragment their userbase like this?
----
*EDIT* : You know what, I didn't read carefully. It seems the tool you used is not the official way to go about it, and the community has created a small org around electron-vite that appears to authentically represent electron-vite. Somehow. The author of electron-vite was not involved in the development of that alternate CLI.
It's still feels fragmented.
npm create @quick-start/electron grants additional configurations to the initial project set up, for instance I don't use TypeScript and by default the npm create electron-vite adds TypeScript configurations.
Thanks
Could this also be done with SolidJS? And if so, how would I go about it?
There seems to be a plugin that you can use called vite-plugin-solid that you can add to the vite config under plugins and that should allow you to use solid with vite. Then you would just go about adding in solid as you normally would in your projects. Im not familiar with SolidJS so I cant give you a super detailed answer, but its something I could research and make a future video on if you would like
@@ehrengrenlund Ah, thanks! That worked! I think I'm good now with setting things up ;)
But if you ever wanted to make a tutorial creating a basic app with it (like making some features and such, that would also be greatly appreciated! Only if you have the time tho, I'll try and figure things out as I go)
very good video thank you very much, can you help me by integrating tailwindCss
how to setup nestjs into it?
There is way to write code in jsx not in tsx ???
In that boilerplate when you initialize it, you can select what language you want to use. in this video i selected typescript, but you can select javascript if that’s what you want to use
Great
The boilerplate is very complicated
its more like "Veet" and not "Vait"
Good idea.🤣
but i can't open in the browser
no shit
It's electron, it's not a web app.
thank you! fyi - Vite is pronounced Veet like as in French for quickly // I'm sure it doesn't matter much I just wanted to let you know 😅
tutorial great and all BUT FOR SOME REASON VS CODE IS LIKE NAH BRO YOU AINT GETTING ANY MAIN.TS OR ANYTHING LIKE THAT WORKING edit: fixed it
make more videos!
Currently have a video in the works :)
Discord command related videos
I will definitely be uploading one of these very soon!
Gotta be one of the worst vids out there “uhh” “uhh”. Lmao.