How to Create a Desktop App using React, Electron, and TailwindCSS

Рет қаралды 3,854

Күн бұрын

Do you want to create a Desktop app using React? Here's how you do it.
In this tutorial, learn how to build a cross-platform desktop application using React, Electron, and TailwindCSS. We'll cover the basics of setting up your development environment, integrating React with Electron, and styling your app with TailwindCSS for a sleek, modern look.
Timestamps:
00:00 Intro
00:30 Start Project
00:50 Initialize Electron
01:59 Install Dependencies
03:40 Install React
09:35 Setup Tailwind
GitHub Repo: github.com/CodeTega/desktopRe...
Don't forget to like, subscribe, and hit the bell icon for more tutorials like this! Let's dive into building powerful desktop apps together.
Let's cooooooode!

Пікірлер: 40

@hesamalavi495 22 күн бұрын

Thanks a billion mate

@gustavo-seedcode 22 күн бұрын

tremendo amigo, te ganaste un suscriptor :)

@user-fm4wm5xx1q 26 күн бұрын

Thanks bro... Tailwind initialization was the thing that was not able to do

@CodeTega 26 күн бұрын

Anytime! Let me know if there is anything related you think I should make a video on! Appreciate the support and feedback, means a lot!

@nubcops220 20 күн бұрын

Can you please upload a short video on how to use the route thing in React with electron? I have been trying for the past 4 hours by watching tutorials and trying to read the react docs and nothing is working. Your tutorials are so easy to understand and directly to the point !

@CodeTega 20 күн бұрын

I’ll get one made for sure!

@nubcops220 20 күн бұрын

@@CodeTega thank you man, I wish I could support you financially I am currently in a 3rd world country we dont even have paypal. Once I get the chance I will you really help lots of people on daily basis much ❤️

@pedrogarateguy3261 29 күн бұрын

Que capo!! 😃👍🏼

@CodeTega 29 күн бұрын

Gracias Hermano!

@aaditya_ai 25 күн бұрын

Great content! Instant subscribed ! Can you make next tutorial on supabase with electron like supabase oauth and basic crud.

@CodeTega 25 күн бұрын

I appreciate that! Thank you! And that’s a great idea, I’ll get on it

@lifesabitch6 Күн бұрын

Thanks a lot! Today is the first time for me to use electron, so this has saved me a lot of pain. Do you have any idea if redux-toolkit would be useable with this setup or if it would need any special configuration to use?

@kpm25 4 күн бұрын

Thanks, what about an Electron and Vue demo... and any other cool UI frameworks/ libraries

@aymericcappelle9104 11 күн бұрын

I have an error when I clone your project, install with npm & start, only on MacOS. "[plugin-webpack] Launching dev servers for renderer process code." The app doesnt launch, do you have an idea? Thanks for the video :)

@CodeTega 11 күн бұрын

I’ll look into it and get a solution

@smilebig3884 5 күн бұрын

Please create a small project on electron.

@cmtg4471 8 күн бұрын

Just a quick question, hav you tried electron-vite? Can we add tailwind css if I built my electron-react app in vite?

@CodeTega 8 күн бұрын

You can, I think the rendering might be different in local, but it should be a similar set up as in this video.

@cmtg4471 8 күн бұрын

@@CodeTega I just made it work on the electron-vite just now, and it looks like its pretty similar on how you installed it, there are some settings that you really need to dig into since it was not present on any documentation and there is hardly no references on the web, thank goodness I found something that work for the project I am working on, and also thanks for the quick response.

@mubeenmubeenfr 27 күн бұрын

Make more videos on electron js project bro...thanks for the explanation

@CodeTega 27 күн бұрын

Appreciate the feedback! Means a lot. I have one coming on connecting databases here soon for electron.

@mubeenmubeenfr 27 күн бұрын

@@CodeTega ohh that's good...iam waiting for that bro

@SmeetBarot 20 күн бұрын

Hello , how can i create exe file ?

@user-cm8cj7ci2s 23 күн бұрын

how to build this app for window and linux

@peterkibet7720 15 күн бұрын

Its cross platform runs on any os, personally using ubuntu

@LakhveerSingh-r7k 7 күн бұрын

please make a tutorial for building an exe file from this setup

@intoellesmind2619 27 күн бұрын

This was a godsend. I was struggling so much trying to connect Tailwind to my already made electron + vitejs project. Any idea why Bootstrap worked for that project, but when installing tailwind it all just went to hell? The main problem was that Electron didn't really recognize that the generated /dist files were for the body in the css case. Then, it tried finding files in C: instead of dist/assets/. I tried using base ref and every solution under stackoverflow and chatgpt, but to no avail.

@CodeTega 27 күн бұрын

Yeah that sound right in line with all the style integrations issues electron has. Ill try to duplicate it and see what I run across. Tailwind is amazing, but the implementation across frameworks is tricky and for sure needs some work on their end.

@sanket4493 12 күн бұрын

Which VS theme is this?

@CodeTega 11 күн бұрын

It’s called Shades of Purple. It’s awesome

@user-pm5rk1bt4h 25 күн бұрын

suggest me how to perform routing in this.. as i have setup the electron react application using this process

@CodeTega 25 күн бұрын

You can npm install react-router-dom Wrap your app in tags Thins in your app handle routing with react router dom library Routes and then Route

@CodeTega 25 күн бұрын

I’ll make a tutorial on this

@user-pm5rk1bt4h 23 күн бұрын

@@CodeTega i did the same, when i am adding a single component in my root.render i am able to see but when i add the following in root.render on npm start it shows just a white screen, i dont know why, plus how to use the fetch, axios and all in the application. please help

@user-pm5rk1bt4h 23 күн бұрын

@@CodeTega please do

@user-pm5rk1bt4h 22 күн бұрын

@@CodeTega any updates?

@Bright-Great Ай бұрын

how can we use database and convert it into an installable software?

@CodeTega Ай бұрын

There are a couple options and I’m going to make a couple videos on them now that you brought it up. You can use an noSql db like firebase if users are going to be required an internet connection and have an authentication service. But if you want an air gapped database style working within your app, then something like SQLlite would be ideal. But that’s a great idea for a video so I’ll make some content on that. Thank you!

@kvazaios5026 Ай бұрын

as @CodeTega said SQLlite would be ideal for an installable software. You can set up an express api inside the main process of the electron app and use Sequalize ORM that has an SQLlite driver. You can still use mysql as well if you think that SQLlite does not satisfy your app's requirements, but then on every installation you should also install mysql on your client's computer. I am pretty sure you can make a custom installer that also contains mysql but it's a bit complicated, especially if the target group has no technical knowledge