How to Create a Cross-Platform Desktop App with React and Electron

🚀 Take your React skills to the next level! In this tutorial, I'll guide you through the process of creating a powerful cross-platform desktop application using React and Electron! 💻🌐
🔧 Whether you're a seasoned React developer or just getting started, this step-by-step guide will break down the process of getting started on building desktop applications with Electron and React.
📌 Key Topics Covered:
1️⃣ Introduction to Electron and its benefits for desktop app development.
2️⃣ Setting up your Webpack Bundle for Electron.
3️⃣ Integrating React into your Electron Desktop App.
4️⃣ Some Tips and Tricks.
👩‍💻 Who is this tutorial for?
React developers looking to expand their skill set into desktop application development.
Beginners eager to learn the fundamentals of Electron and React integration.
Anyone interested in building cross-platform desktop apps with a seamless user experience.

[@CodeTega]

Make sure you npm install @babel/core as well!

[@emperorgaming4942]

Hey I need you help please.

[@ebenezer8694]

That's awesome. Can you also show how to integrate typescirpt. It would be really helpful.

[@yishakabrham5002]

this helps me a lot thank u

[@team_Alpha-307]

thank you, tutorials on electron are really hard to find. and this helped so so much. We're also interested in including tailwinds to the project

[@CodeTega]

I’m posting the video this week. Got a little swamped at work and havnt been able to make it. But making it tomorrow and will have it posted this week. Thank you for the feedback! Really appreciate it

[@CodeTega]

Just posted the video in case you still need it. Skip to 9:30 if you just need the tailwind piece.
ruclips.net/video/SiMIBb20S7c/видео.html

[@congkon5493]

Can you make another video on how to connect to splite3 sequelize ORM?

[@vxlx112]

Definitely would like a guide on how to implement Tailwindcss with this configuration

[@CodeTega]

Will do, working on one today

[@CodeTega]

Just posted the video in case you still need it. Skip to 9:30 if you just need the tailwind piece.
ruclips.net/video/SiMIBb20S7c/видео.html

[@mohammedmusaib6701]

Do you how how to create deep link for linux I now mac and window it working but not in linux😢

[@mohammedmusaib6701]

I want to build electron app with playwrite feature like fill click check unchecked etc. What the step i have to take can u make video regarding this I will very help full 😊

[@RayWang-te2wo]

npm WARN deprecated gar@1.0.4: Package no longer supported. for babel

[@nubcops220]

ty

[@mathewadeyemi5389]

i found this video helpful may God bless you. but what about if we want to implement better-sqlite3 database to perform crud operation

[@CodeTega]

I'll be making a video on SQLite here soon, currently I have one up for a Firebase Database.

[@kevinmackey7061]

What about those of us without git?
npm init electron-app@latest testapp -- --template=webpack
. . .
■ Installing template dependencies
An unhandled rejection has occurred inside Forge:
Error: Command failed: git init
'git' is not recognized as an internal or external command,
operable program or batch file.

[@CodeTega]

You’ll have to install git if it’s not installed already.
Follow the instructions here depending on your device
git-scm.com/book/en/v2/Getting-Started-Installing-Git

[@SimranSingh]

Please make video on how to implement Tailwind CSS with this configuration

[@CodeTega]

Will do! Working on one today

[@CodeTega]

Just posted the video in case you still need it. Skip to 9:30 if you just need the tailwind piece.
ruclips.net/video/SiMIBb20S7c/видео.html

[@emperorgaming4942]

Well can i use node integrations in renderer process

[@CodeTega]

If I understand your question correctly, then generally I wouldn't recommended it due to security issues, but it is possible. If you are going load/execute code from trusted sources then there is very little risk if enabled and possible. Its done quite often, just not the most recommended on some cases.
In Electron, the renderer process runs in the same context as a web page, making it more vulnerable to potential security risks, especially if you load remote content.
If you need to run it, then there is nodeIntegration boolean you can enable in your BrowserWindow promise.
const createWindow = () => {
const mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true, // Enable Node.js integration
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
},
autoHideMenuBar: true,
});
Setting it up might require some testing and research on your end depending on use case, but it is very possible and done quite often with Electron. Hope that helped.

[@emperorgaming4942]

@@CodeTega Thank you I understood. Its just a music app for me just for me. It will be in my colllection. You are good By the way. Very fast response

[@vihangajanith2664]

thank you for the tutorial, how to build the app ?

[@CodeTega]

Anytime, hopefully it was helpful! Thank you for the feedback, I truly appreciate it.

[@Nico-bn9qi]

Very good

[@CodeTega]

Thanks!

[@yinks8770]

This way is not working anymore. There is no webpack.xx.js, no renderer.js file and no main.js installed.

[@yinks8770]

@Lucky-_-luck ah, sry… i fixed it. I use a different console and it works

[@CodeTega]

Glad you got it fixed!