How to create a basic Electron app with Vite and React

In this video I go over using the vite-electron boilerplate for creating a basic Electron app with Vite and React!
If you want to join my discord for more personalized help, feel free to join:
/ discord
As always, support is appreciated so I can make better content for you all! Remember to like, comment, and subscribe for more videos!
Website: www.ehrengrenlund.com
Check out my forums where I post lessons and other coding projects!
www.forums.ehrengrenlund.com
Thank you all for watching!

[@Rick-mf3gh]

Finally! A guide to setting up Electron+React that actually works! Thank you.

[@youngsinatra2916]

You talk about important topics! Thank you! You have my sub:)

[@MEGAFOXTERRIER]

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!

[@Imaginativeone_DF]

Would love to see this video add: SQLite3 and Unit Testing of Components.

[@ehrengrenlund]

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!

[@MEGAFOXTERRIER]

@@ehrengrenlund I also would like to see SQLite3 added

[@malakbabymama5802]

Thanks for sharing!

[@dave28lax]

Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling...

[@oweneaster7899]

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...

[@AbhishekGupta-je5ni]

Awesome ! , and this my first comment to any of the youtube video I watch !!.

[@brr3534]

Thanks a lot!

[@NhanNguyen-tl9mh]

Hope i can see more episodes about Electron Vite Reactjs app.

[@infowizard_]

excellent video :)

[@PacLevkov]

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?

[@marekchoinski5431]

Thank you!!!!

[@slatanek]

Good video 👍🏻 FYI it's spelled Veet (french for speed)

[@alvarobyrne]

excelent content which would be be much more excellent if font size were bigger! thank you very much!

[@wildonnoronha12]

Im getting default preload screen when i run development. How can I change it to index file

[@user-cj6te2oj4m]

Thanks

[@cakemeat]

love this video, but when I do this I get problems with 'node:fs' and 'node:path'

[@_3_-qi9em]

Nice vid. How did you set all the css files as .scss initially? i thought you need to npm i sass in the project

[@ehrengrenlund]

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.

[@personal3314]

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.

[@ehrengrenlund]

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

[@personal3314]

@@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.

[@SeekVeracity]

Thank you for this!! I have a question: Is it possible to use tailwindcss with this?

[@ehrengrenlund]

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

[@aashrith9680]

@@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 .

[@ehrengrenlund]

@@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!

[@techlightdev]

Great

[@augustine_codes]

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.

[@ehrengrenlund]

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.

[@sechomaro1011]

very good video thank you very much, can you help me by integrating tailwindCss

[@jcruz6888]

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.

[@shreyassonu3305]

is there any way with react js app ?? it is ts btw

[@devchri]

Would it be possible to package this into an executable using Electron-Forge?

[@ehrengrenlund]

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.

[@hoangtranvietdev]

how to setup nestjs into it?

[@rfryanfavour4369]

$ 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 😭 😭

[@AnoNymOuS-mg9oj]

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...

[@ehrengrenlund]

I’ll for sure make a video on that. IPC can definitely be a daunting task if you have never played with it before

[@Lemberg_1715]

@@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.

[@ehrengrenlund]

@@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?

[@Lemberg_1715]

@@ehrengrenlund I somehow missed it, will check it out.

[@sjonniesjonnie4378]

Could this also be done with SolidJS? And if so, how would I go about it?

[@ehrengrenlund]

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

[@sjonniesjonnie4378]

@@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)

[@divyanshm.2276]

mooooon!!!, haoooon!!, chwaooon!!

[@Eragon09]

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?

[@ehrengrenlund]

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

[@Eragon09]

@@ehrengrenlund great i try see it thanks

[@MMhb-dj1hj]

Please zoom unto your screen or use bigger font. I can't see things without a microscope.

[@Silasmatala]

Pls how can I setup the same application with JavaScript instead of typescript?

[@ehrengrenlund]

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

[@thehero9]

how is this video free.... legend

[@tidalauralien7984]

There is way to write code in jsx not in tsx ???

[@ehrengrenlund]

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

[@Fancazista]

make more videos!

[@ehrengrenlund]

Currently have a video in the works :)

[@ozgurNY]

The boilerplate is very complicated

[@KajiTetsushi]

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.

[@thefool733]

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.

[@muhammedshahanashussain2181]

but i can't open in the browser

[@jcruz6888]

no shit It's electron, it's not a web app.

[@fantevandam8676]

its more like "Veet" and not "Vait"

[@user-en8vt7wo7l]

Good idea.🤣

[@momocraft365]

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

[@sarahjeannexd]

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 😅

[@ikosuke]

Discord command related videos

[@ehrengrenlund]

I will definitely be uploading one of these very soon!

[@sgares6741]

Gotta be one of the worst vids out there “uhh” “uhh”. Lmao.