How to create a basic Electron app with Vite and React

Рет қаралды 77,553

Күн бұрын

Пікірлер: 84

@zamer_1234 3 ай бұрын

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.

@luissantiago8887 2 ай бұрын

How can I do this but instead TS use JS

@zamer_1234 Ай бұрын

@@luissantiago8887 ts is better than js that make it easier for security and checking that all your conditions check if something is correctly checked. Typing is really a better coding way. That can prevent to do shit like using number instead of string in a variable that need string and also know what is exactly needed for a function instead giving juste any types.

@Rick-mf3gh Жыл бұрын

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

@allhailalona 5 ай бұрын

at last... I was looking so long for such a video! thank you very much!!

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

@neilzedd8777 3 ай бұрын

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

@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

@youngsinatra2916 Жыл бұрын

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

@Stephane-w8l 15 күн бұрын

Nice video, thanks. If you want to use code that is common to electron and react Like models or service where do you put that code?

@ehrengrenlund 9 күн бұрын

Anything that is specifically front end should go into the src folder. Anything that is specific to Electron should go into the electron folder. If you have code that is used between the two processes (i.e. types or util functions) I would highly recommend making a Shared folder of sorts and putting that stuff in there!

@ChrisOndrovic 5 ай бұрын

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

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

@slatanek Жыл бұрын

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

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

@NhanNguyen-tl9mh Жыл бұрын

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

@2ghost-f4x 10 ай бұрын

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 10 ай бұрын

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.

@alvarobyrne 8 ай бұрын

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

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

@PacLevkov 7 ай бұрын

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?

@fonte1184 2 ай бұрын

how do you package the app

@jcruz6888 11 ай бұрын

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.

@wildonnoronha12 Жыл бұрын

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

@MarathiMulgaInUK 3 ай бұрын

I want make executable using react builder but when i try to execute it. it is showing blank screen. Any solutions for this ?

@ehrengrenlund 3 ай бұрын

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.

@malakbabymama5802 Жыл бұрын

Thanks for sharing!

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

@AbhishekGupta-je5ni Жыл бұрын

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

@rfryanfavour4369 8 ай бұрын

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

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

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

@shreyassonu3305 Жыл бұрын

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

@Silasmatala 9 ай бұрын

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

@ehrengrenlund 9 ай бұрын

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

@infowizard_ Жыл бұрын

excellent video :)

@brr3534 Жыл бұрын

Thanks a lot!

@hoangtranvietdev Жыл бұрын

how to setup nestjs into it?

@cakemeat Жыл бұрын

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

@HrithikDas-v4i 5 ай бұрын

how to add auto updates in an electron app while using this

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

@marekchoinski5431 6 ай бұрын

Thank you!!!!

@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

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