No video :(

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

Подписаться 417

Просмотров 4,6 тыс.

50% 1

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/Cod...
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!

Опубликовано:

14 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 44

@nubcops220 Месяц назад

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 Месяц назад

I’ll get one made for sure!

@nubcops220 29 дней назад

@@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 ❤️

@user-fm4wm5xx1q Месяц назад

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

@CodeTega Месяц назад

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!

@kpm25 13 дней назад

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

@yishakabrham5002 6 дней назад

thank u sir

@lifesabitch6 11 дней назад

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?

@gustavo-seedcode Месяц назад

tremendo amigo, te ganaste un suscriptor :)

@kalanaCoder 4 дня назад

teach me about its do with next js + electron

@aaditya_ai Месяц назад

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

@CodeTega Месяц назад

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

@hesamalavi495 Месяц назад

Thanks a billion mate

@mubeenmubeenfr Месяц назад

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

@CodeTega Месяц назад

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

@mubeenmubeenfr Месяц назад

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

@smilebig3884 14 дней назад

Please create a small project on electron.

@kalanaCoder 4 дня назад

can i install shadcn ui, react router dom, framer motion etc ? please tell

@Joey-pw9fm 7 дней назад

When i create the app, for some reason it doesnt make the web pack folders. can anyone help?

@LakhveerSingh-r7k 16 дней назад

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

@aymericcappelle9104 21 день назад

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 20 дней назад

I’ll look into it and get a solution

@cmtg4471 18 дней назад

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

@CodeTega 18 дней назад

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

@cmtg4471 18 дней назад

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

@user-cm8cj7ci2s Месяц назад

how to build this app for window and linux

@peterkibet7720 24 дня назад

Its cross platform runs on any os, personally using ubuntu

@pedrogarateguy3261 Месяц назад

Que capo!! 😃👍🏼

@CodeTega Месяц назад

Gracias Hermano!

@intoellesmind2619 Месяц назад

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 Месяц назад

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 21 день назад

Which VS theme is this?

@CodeTega 20 дней назад

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

@user-pm5rk1bt4h Месяц назад

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

@CodeTega Месяц назад

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 Месяц назад

I’ll make a tutorial on this

@user-pm5rk1bt4h Месяц назад

@@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 Месяц назад

@@CodeTega please do

@user-pm5rk1bt4h Месяц назад

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