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

Поділитися
Вставка
  • Опубліковано 8 лют 2025

КОМЕНТАРІ • 66

  • @nubcops220
    @nubcops220 6 місяців тому +8

    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
      @CodeTega  6 місяців тому +5

      I’ll get one made for sure!

    • @nubcops220
      @nubcops220 6 місяців тому +1

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

    • @EngraversNearMe
      @EngraversNearMe 2 місяці тому

      you use hashRouter not reactrouter

    • @noddymedia
      @noddymedia Місяць тому

      @@EngraversNearMe when I use a hash route it keeps on reloading the page, evry time I change anything on the renderer side of the react app

  • @r7verape
    @r7verape 28 днів тому

    Thanks brother, excellent video!

  • @ParthPtl-w8o
    @ParthPtl-w8o 7 місяців тому +4

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

    • @CodeTega
      @CodeTega  7 місяців тому +1

      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!

  • @Sebon32
    @Sebon32 5 місяців тому

    Thanks a lot for the video, great material !

  • @gustavo-seedcode
    @gustavo-seedcode 6 місяців тому +1

    tremendo amigo, te ganaste un suscriptor :)

  • @timothyelems1357
    @timothyelems1357 5 місяців тому

    Thanks for the tutorial!!
    You had 420 subs and I'm sorry I messed that up
    😅

  • @hesamalavi495
    @hesamalavi495 6 місяців тому +1

    Thanks a billion mate

  • @aaditya_ai
    @aaditya_ai 7 місяців тому +1

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

    • @CodeTega
      @CodeTega  7 місяців тому

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

  • @sevenmixedfeelings
    @sevenmixedfeelings 13 днів тому

    Thank you. I followed your tutorial and it works. But I have seen that when the app starts it shows the index.html for a split second. And it also happens when you are changing routes(pages). Any idea how to change that?

  • @mubeenmubeenfr
    @mubeenmubeenfr 7 місяців тому +2

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

    • @CodeTega
      @CodeTega  7 місяців тому

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

    • @mubeenmubeenfr
      @mubeenmubeenfr 7 місяців тому

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

  • @pedrogarateguy3261
    @pedrogarateguy3261 7 місяців тому +1

    Que capo!! 😃👍🏼

    • @CodeTega
      @CodeTega  7 місяців тому +1

      Gracias Hermano!

  • @eea8888
    @eea8888 24 дні тому

    Can we use it with next js 14 ?

  • @lifesabitch6
    @lifesabitch6 6 місяців тому

    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?

  • @arpstek205
    @arpstek205 4 місяці тому

    Hi Bro Could you please make a video that include configuration of tailwind & React Routes.

  • @yishakabrham5002
    @yishakabrham5002 6 місяців тому

    thank u sir

  • @smilebig3884
    @smilebig3884 6 місяців тому

    Please create a small project on electron.

  • @diyproject7950
    @diyproject7950 3 місяці тому

    Please can you shed some light on how to use sqlite database with electron 😢

  • @kpm25
    @kpm25 6 місяців тому

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

  • @progress5779
    @progress5779 2 місяці тому

    I wish you will notice me, can you create a video for electronjs+nextjs+tailwind

  • @caseywittrock4314
    @caseywittrock4314 3 місяці тому

    No postcss.config.js file? Mine looks for one and throws an error if it's not there.

  • @kalanaCoder
    @kalanaCoder 6 місяців тому

    teach me about its do with next js + electron

  • @intoellesmind2619
    @intoellesmind2619 7 місяців тому

    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
      @CodeTega  7 місяців тому +1

      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.

  • @Ruan-y8f
    @Ruan-y8f 4 місяці тому

    Hi -- how could I creat the distros?

  • @BhavinKalsariya
    @BhavinKalsariya 7 місяців тому +1

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

    • @CodeTega
      @CodeTega  7 місяців тому

      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
      @CodeTega  7 місяців тому +1

      I’ll make a tutorial on this

    • @BhavinKalsariya
      @BhavinKalsariya 7 місяців тому

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

    • @BhavinKalsariya
      @BhavinKalsariya 7 місяців тому

      @@CodeTega please do

    • @BhavinKalsariya
      @BhavinKalsariya 6 місяців тому

      @@CodeTega any updates?

  • @LakhveerSingh-r7k
    @LakhveerSingh-r7k 6 місяців тому

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

  • @cmtg4471
    @cmtg4471 6 місяців тому +1

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

    • @CodeTega
      @CodeTega  6 місяців тому

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

    • @cmtg4471
      @cmtg4471 6 місяців тому

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

  • @hamtaroyt
    @hamtaroyt 3 місяці тому +1

    When I try to init the electron app, I do not get the webpack files. I included the webpack template and there was nothing. Is this out of date even though it is 3 months old??

    • @EngraversNearMe
      @EngraversNearMe 3 місяці тому

      same here can't even follow the video without it.

    • @blckops712
      @blckops712 Місяць тому

      Man you are going to have a rough time coding. I had the same issue. 1 google search is all it took.
      npx create-electron-app@latest my-new-app --template=webpack

  • @kalanaCoder
    @kalanaCoder 6 місяців тому

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

  • @Joey-pw9fm
    @Joey-pw9fm 6 місяців тому

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

  • @weeaix
    @weeaix 3 місяці тому

    I'm curious about the "app/src" path mentioned at 12:11. What files typically reside in this path? I can't seem to find it in the current Electron Forge structure.

    • @yzee4
      @yzee4 Місяць тому

      use const path = require("path")

  • @ZvikomboreroMasike
    @ZvikomboreroMasike 5 місяців тому

    If anybody is having problems with the custom template (i.e. the webpack files aren't appearing after doing the command "npm init electron-app@latest my-new-app -- -template=webpack"), instead put in "npx create-electron-app my-new-app -- -template=webpack".

    • @ZvikomboreroMasike
      @ZvikomboreroMasike 5 місяців тому

      It seems that there was an update to the npm that causes the old command not to work.

  • @Bright-C-Web-Developer
    @Bright-C-Web-Developer 7 місяців тому +2

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

    • @CodeTega
      @CodeTega  7 місяців тому +4

      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
      @kvazaios5026 7 місяців тому

      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

  • @aymericcappelle9104
    @aymericcappelle9104 6 місяців тому +1

    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
      @CodeTega  6 місяців тому

      I’ll look into it and get a solution

    • @dzyik2827
      @dzyik2827 4 місяці тому

      @@CodeTega did u ever find out

  • @sanket4493
    @sanket4493 6 місяців тому +1

    Which VS theme is this?

    • @CodeTega
      @CodeTega  6 місяців тому

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

  • @NikhilKorane
    @NikhilKorane 7 місяців тому +2

    how to build this app for window and linux

    • @peterkibet7720
      @peterkibet7720 6 місяців тому +1

      Its cross platform runs on any os, personally using ubuntu

  • @SmeetBarot
    @SmeetBarot 6 місяців тому

    Hello ,
    how can i create exe file ?

    • @NgocVuNgo1
      @NgocVuNgo1 4 місяці тому

      npm run make and check folder out 😆