Electron with React JS under 40 min!

More Courses: academy.eincode.com/
Full Course: academy.eincode.com/courses/e...
Github Repo: github.com/Jerga99/electron-r...
Blog Post: eincode.com/blogs/electron-re...
Electron:
If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.
React JS:
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Firebase:
Firebase gives you functionality like analytics, databases, messaging, and crash reporting so you can move quickly and focus on your users.
-- Course Overview --
In the first section, you are going to learn what Electron JS is and what features it offers. We will learn basic concepts like the main and renderer process among many others. The UI part of the application will be handled by React Library, we will install React and we will prepare Webpack which will be responsible for bundling of our source files.
In the second section, we will create multiple views like Home, Chat, Settings views, and many others. We will integrate the routing system so we can navigate between the views. State management of the application will be handled by redux architecture and the data will be stored in the Firestore database. I will show you how to use Firestore queries, how to fetch and manipulate data.
The third section will be dedicated to authentication. We will create a login and register form and I will teach you how to handle errors coming from Firestore. Only logged in users will have full access to our application.
In the fourth section, we will explain redux middleware and we will work on the Notification feature. The application will be able to detect whether the user is offline or online. Connection changes will be displayed by the Notification system.
In the fifth section, we will be working on chat management features. The first one will be chat create functionality. After the chat will be created it will be displayed in the list of available chats. Upon clicking on the join button chat will be joined and added into the list of joined ones. The online status of a user will be displayed when the user will be joined in the chat. A green dot will indicate that the user is online, the gray dot will be reserved for offline status.
In the sixth section, we will be working on the messaging feature. Users will be able to write a message and send it out to our Firestore database. Our Application will be able to detect new messages and display them in the current active chat. Messages will be synchronized amongst many active clients.
Next, we will work on the settings view. Users will be able to change the global settings of our application. Settings will affect mostly the theme of our application and the way how Notifications work. We will store settings in local storage so we are able to retrieve them in the next load of our application.
In the seventh section, we will work on small adjustments in the Electron environment. We will create an application menu with multiple settings. We will add a tray icon to the top or bottom menu of our operating system. We will change the icon of our application and we will start working on the splash screen. The splash screen will be displayed before our main application will be fully loaded. In the last lectures, we will prepare the build configuration and will build up our application into executable files that can run on Windows, Linux, and macOS.
That’s it from the preview. There is much more covered in the lectures. I hope you like the application we are going to work on and I hope to see you in the course.

[@cindy8077919]

TL;DR For people who don't like to type: All the things you'll need to install npm install --save electron react react-dom npm install --save-dev @babel/core @babel/preset-env @babel/preset-react css-loader style-loader sass-loader babel-loader webpack webpack-cli electron-reload For Window 10 users: If you didn't see notifications on button click - check your notification settings & remember to turn off 'Focus Assist'

[@alessandrof.m.9287]

Awesome man, I came here just to run react+electron because i already have some react projects, but you open my mind to electron with this simple notification at the end. Amazing!

[@mikelexp]

Wow, I've learned A LOT of really useful info in just 36 minutes. Amazing work Filip, thanks!!

[@ewertoncassianoxavier3490]

This isn't a simple video, but a masterpiece! Thank you very much for this amazing lesson!

[@giffarialfarizy7310]

Wow, this is great tutorial! Your explanation is not too theoretically but the fundamental is covered in the same time. I also really like that very simple boilerplate. Thank you!

[@jester_x18]

Thanks, man! Over 1 thousand articles, quickstarts and videos, you are the first one who explained electron-react solution and how it should work.

[@mattb3685]

This video has been a lifesaver for me. I've had a ton of trouble for whatever reason, setting up an electron app, setting it up with React, then trying to configure webpack or whatever else, trying to set it up with Sqlite3 and not being able to, then running around trying to download boilerplate templates, Googling errors, additional npm packages... This is my favorite video that I've found on getting started with Electron. Perfect balance between brevity and depth. You clearly have expertise on the subject and on the ecosystem in general, it's not just copied information available everywhere, you explain things just enough rather than leaving things for granted, like you totally get your target audience. Everything works as advertised. I haven't had to go off and troubleshoot or Google additional things because parts of it were outdated. No bloat, no downloading or copying and pasting anything crazy, or deprecated/unmaintained/sketchy (go and add this npm package with

[@louisgirardin2030]

Thx for the detailed walkthrough. It was quite insightful. Made lot of sense and good rhythm.

[@ProjectOceanFloor]

This is the cleanest way to implement your own pure JS scripts into an Electron app with a frontend framework/library that I have found - This process worked in December 2021 even though the first Google search was a medium article implying Electron only worked with TypeScript. Tysm.

[@aenkas]

thats the best tutorial for building pure electron-react app! thanks!

[@reinioyeah5467]

Really really great tutorial👍 The right amount of theory and practice. I just bought the full course because i am sure it will save me a lot of time learning this things.

[@reactnativecoder]

Great boilerplate actually you pointed out from scratch which is amazing

[@amingrateful7661]

You really do have a great grasp on this stuff. I'm kinda jealous!

[@marcosmercedesn]

This video was sharp, straight to the point

[@sadcandy5834]

thans for this great work！ I was complicated with those docs of Electron React Boilerplate until I find this！ finally figure out these settings , ESM stuffs and structure of the project

[@WornOffKeys]

Great tutorial, just purchased your electron course after watching this.

[@shinobigamer3589]

You have saved me so much time with this tutorial. Thank you

[@bilaleme]

Some people simply have art of excellent explanation. And you are one of them. +1

[@otisrancko]

Greeeeaaaat video for Electron basics😉

[@crimps.on.slopers]

Ok so why doesnt this guy have 1 million followers. Very clear and consise. You can tell he knows what hes doing. Everyone could relate to spam clearing console. Made me laugh everytime. And went at a very good pace.

[@Ebizzill]

BROH!! if YOU'RE the reason why i get this gig.... I'm donating to this channel

[@meetpanchal8809]

Thanks for this masterpiece.

[@shubhamp_web]

Thanks for this video 🖥

[@diyshow888]

Still works in 2023 , thank you so much Master

[@rockNbrain]

great job dude! tks a lot!!!

[@kuma4824]

great video :)

[@hmodarres]

nice! super helpful

[@codex1758]

Awesome video man, is it possible to use other modules such as framer-motion and tailwind css??

[@ggyoug]

Real good!!! Thanks!!!

[@julian16180]

Amazing Video so far. What do I need to do different/ watch out for, when I want to use TypeScript with React, not JavaScript?

[@haddadimohamedmanil3999]

man you are awsome, i m a fan

[@Ab-on5dj]

Thanks for this nice tutorial. I have side-topic question if you don't mind. Do you record your voice alongside with the screen at the same time, or you do it seperatly? Thank you

[@rabahmahboulgravity5991]

this is working thank you it wass ammazing

[@mahendranath2504]

Thank you so much 👍🏼🎉🙏❤️

[@enebishsundui6477]

Great video, thank you very much. How can we notify from main to React component?

[@b.c.palmer2824]

Hi @Eincode, the idea of integrating react with electron is pretty new to me, but I followed your instructions twice and I'm getting an error: "Uncaught ReferenceError: reactDOM is not defined". There are only three lines in my index.js, and they look exactly the same as yours, except the id I'm targeting has a different name. I'm on electron 11.1.0 and Node 14.15.2. Any common causes?

[@8ashastiraagavk.g760]

hey mam good thing for writing the boilerplate for the html first install Emmet and write exclamation mark and hit the tab and you will get full boilerplate of html

[@aburk3146]

great tutorial. Once I finish my app, how do I deploy this and have a working app?

[@masterbluecat3416]

very good keep going

[@drjones694]

Wish you packaged this up at the end You showed if dev run this way but when you make do you need to host the react app or does it run local to where ever the app starts?

[@leonh2140]

Cool video, thanks! But I'm wondering how to package the app? Since this is the main reason for using Electron

[@simonplm9718]

thanks!

[@854gabryel]

Do you know if there's another way to solve `Cannot use import statement outside of a module` error without adding webpack?

[@lilcorndog]

Could you do a tutorial on contextBridge/ipcRenderer/Main. Having trouble understanding how to pass my data back to component.

[@mateusteixeira7129]

I'm getting this same problem. Have you already solved?

[@lilcorndog]

@@mateusteixeira7129 sort of. but still have tons of questions. I tried using discord to get help but it seems hard to get a question answered.

[@shahbazshaikh1725]

How to build the project, cant find any suitable answer on the internet. Please help.

[@MyStockz]

Hello! Hope you are well! I got an error on electron.notificationApi.sendNotification part. It says, Cannot read properties of undefined Help!!! Is it a preload.js problem?

[@tkragelj]

Nice tutorial - first one that allowed me to actually get to working electron+react solution (being complete node newbie). However I got stuck at the end, when adding preload stuff - as soon as I do that watch script starts spitting out error: ERROR in ./node_modules/enhanced-resolve/lib/ResolverFactory.js 118:9-26 Module not found: Error: Can't resolve 'pnpapi' in 'C:\Users\Tomaz\Documents\Projekti\Electron eact-test3 ode_modules\enhanced-resolve\lib' I do use newer versions of webpack, though got similar results using the same as in this tutorial... I didn't find any solution on internet, do you have a hint perhaps?

[@cindy8077919]

That's exactly the issue I faced! What worked for me was to remove the line "import { electron } from "webpack" when you typed electron.notificationApi.sendNotification ... react automatically try to find where that electron comes from and import that, remove that line solved the issue for me

[@Ibrahim-oc5ql]

Filip Thanks buds

[@codeswithankit4316]

Great

[@davidpaley2865]

Hey bro, how can i enable nodeintegration to run my node js scripts, when i set nodeintegration to true and contextisolation to false, webpack stops working. And how can i build app?

[@Ouchie]

Electron crashed when making changes in the main.js file with electron-reload with isDev variable if (isDev) { require('electron-reload')(__dirname, { electron: path.join(__dirname, 'node_modules', '.bin', 'electron') }) } The error: Uncaught exception: Error: spawn node_modules\.bin\electron ENOENT Using windows 10

[@vudinhcong]

I can't use webpack, reactjs with puppeteer ?, How to use it ? Thanks

[@wenn-1234]

Hi, how do I build this project to an exe file using Electron builder?

[@csfx69]

i need to know this too

[@TheNamesJT]

I keep getting this when running npm start " To run a local app, execute the following on the command line: $node_modules\electron\dist\electron.exe path-to-app"

[@Harikanth]

I am getting error "supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17." My react version is 18.2.0. How to fix this? Any help is appreciated.

[@csfx69]

How to build the app at the end?

[@tradecate]

How to add tailwind to project?

[@abdulqureshi7108]

Hey bro, how to build this app with react. in the build, react not working.

[@sergheigarau514]

Hi thanks for the video, very interesting. I tried to integrate react-bootsrap-table, both the new and the old version. Unfortunately there are problems, it does not work and it is difficult to understand why. Could you make a video where you try this electron + react + react-bootstrap-table setup? Thank you

[@Akash-xv5sk]

How to logout a user when i click window close button?

[@geek7807]

If bundle loaded from "./build/js/app.js" and "./src/js/App.js" return error, how I can use live reloaded?

[@MyStockz]

Hey! Did you found a solution?

[@psol1001]

sorry, I have some troubles using electron-reload library, this is not workin, I don't know what to do :(

[@kwabenaboateng7405]

But how do you create a multi-page app with this?

[@orhanabbasov6870]

Couple questions: 1. How to send ipc from main to renderer 2. How to compile it? Which files need to build and which files no need. And the tutorial is great. I've already built a Electron app from scratch, but without react. It's on production already.

[@Eincode]

Hello Han, congratz to your application! You can expose ipc in preload.js as explained in the video. You need to build only JS files included in src folder.

[@mohammadsaquib3373]

contextIsolation : true gives error for require file

[@ArvindSingh-wj7vy]

require("electron-reload")(__dirname, { electron: path.join(__dirname, "node-modules", ".bin", "electron"), }); This line is throwing error, help please/

[@novandosantosa3621]

after i change my index.js with ReactDOM.render(, document.getElementById('root')). My app can't be updated. It keep showing "Hello React App". It should be "I am app component", even i refreshed the page hundred times. Could you help me please?

[@hassanmanaii8914]

I don't know why but you need to run watch before run start

[@kuma4824]

development mode causes an error in the console, because the development code produces code with the eval function and this is against the Content Security Policy. How could i fix it? or I just use the "production" mode.

[@Eincode]

Hello Kurma, you can place 'unsafe-eval' option into index.html in development,

[@kuma4824]

@@Eincode keeps popping up: "Electron Security Warning". In webpack there is a section on how to enable csp, but I don't really understand how to add "__webpack_nonce__". Hopefully you can read it, maybe you do understand. Still, thank you, you are one of the few people who really uses (or tries) good practices with this framework.

[@vivekreddy8864]

babel will be able

[@codiumyt]

Why do you say every noun as plural? Terminals, editors etc...

[@nerdion1911]

Don't be karen

[@codiumyt]

@@nerdion1911 I was just curious…

[@nerdion1911]

@@codiumyt just kidding, no worries. His tutorial saved my life yesterday

[@BO-nn9up]

kinda habit at least he speaking english.. just thanks for that

[@stancobridge]

Module not found: Error: Can't resolve 'react Module not found: Error: Can't resolve 'react-dom' I did npm i --save-dev @babel/core @babel/preset-env @babel/preset-react css-loader style-loader sass-loader sass webpack webpack-cli I don't know what am missing

[@stancobridge]

Fixed by instaling react and react-dom

[@priyankamore1458]

babel will be able..🤣🤣🤣🤣🤣🤣🍹..

[@user-ju8bs8co1t]

CSS DOESNT WORK!

[@muhammadsanjarafaq914]

You should skip useless details like terminal (mkdir) and meta tags. Could have just use !(bang) to write HTML. Makes the video longer.

[@malikcatyes656]

React 18 introduces new root API ( ReactDOM.createRoot ) In src/js/index.js to avoid some errors from react. import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./index.scss"; const container = document.getElementById("root"); const root = ReactDOM.createRoot(container); root.render();

[@waleedkhan-cw2vy]

npm install --save-dev @babel/core @bable/preset-env @bable/preset-react css-loader style-loader sass-loader sass webpack webpack-cli