02 React CRA inisde Electron JS desktop app and how to run the production build static files

#reactjs #javascript #nodejs
0:00 Intro and installing React CRA and running inside Electronjs
1:28 Running the dev build of React inside Electronjs
2:10 Running the prod build of React inside Electronjs
3:40 Open the dev console when the Electronjs app starts
To handle the UI requirement of our desktop app, we would use React. Now, while doing the development, we can use the React CRA localhost URL and do the development. We will get a fast development flow, hot reloading, and all the other niceties of CRA. But, when we want to deploy the desktop app, how do we use the final build?
In this video, we are going to show you just that.
You can find me on:
Code: my-lnk.com/3186169894
Twitter: / amitavroy7​
Discord: / discord

[@Lyzeuph]

Finally! Thank you, sir! I wish I would have found your videos sooner!

[@amitavroydev]

Glad to help!

[@muhammadaliawan9672]

Sir this is super amazing. Tutorial i found on youtube

[@amitavroydev]

Thanks for the feedback 👍

[@abhidev488]

Hey thanks for series. And I can see there is no node_modules folder under your app directory how did you do that ? I mean, in my code there is two node_modules folders one in the root and another inside app/

[@amitavroydev]

I do have the node_modules folder. I have one config in VS code which hides the node_modules folder from the folder list

[@snowin_jj]

Hey, for some reason the app doesn't works well. I cloned your repo. and installed the dependencies and build the react app and updated the loadURL in main.js. When I ran my app I am seeing a black page. I 've checked the file paths in build index.html file. What are solution I can try? I am using Windows 11.

[@amitavroydev]

Quite possible a node version issue. Why don’t you delete the package lock file and run a fresh install

[@GameskoTV]

Thanks!!! for vite is this export default defineConfig({ plugins: [vue()], base: './' })

[@amitavroydev]

@GameskoTV thanks for the support

[@p.p526]

WIth Angular it's not working, when we directly use localhost it's working but from dist (similar to build in Angular) it's not working.

[@amitavroydev]

how are you loading the dist files?

[@kartikekishore8089]

Can you tell me how to package the app for distribution. I want the user not to see my source code. Maybe an ASAR, I came across electron builder but facing some problem. Can you help me?

[@amitavroydev]

So sorry, even I have not done that yet. My team members have done it. Let me see if I can do that and make a video

[@KhaledGhallabPro]

I do not use CRA I use Vite instead .. Please help in solving a problem "homepage": ".",

[@amitavroydev]

I haven't used vite outside of the default Laravel setup.

[@henriquedelimapessoa6135]

same problem =(

[@GameskoTV]

export default defineConfig({ plugins: [vue()], base: './' })

[@richmondxaviergnanhi8611]

next step

[@amitavroydev]

Have uploaded the next video. Do check out

[@arshu0.720]

But every time we want build😢

[@amitavroydev]

Why so? First you will do the development and then create the build

[@arshu0.720]

@@amitavroydevno auto loading

[@amitavroydev]

@@arshu0.720 sorry, I am not able to understand your problem

[@shubhamchaudhary9468]

When trying to loadFile using "path.join(__dirname, "./electron-react/build/index.html"", it is throwing error "Not allowed to load local resource: file:///C:/[FolderPath]/build/index.html"

[@amitavroydev]

The path doesn’t seem to be correct