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

[@muhammadaliawan9672]

Sir this is super amazing. Tutorial i found on youtube

[@amitavroydev]

Thanks for the feedback 👍

[@Lyzeuph]

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

[@amitavroydev]

Glad to help!

[@CodeWithMuhammadAhsan]

perfect everything works on my pc too

[@amitavroydev]

That's great

[@GameskoTV]

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

[@amitavroydev]

@GameskoTV thanks for the support

[@harshmittal63]

♥

[@amitavroydev]

👍

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

[@CodeWithMuhammadAhsan]

amazing,

[@amitavroydev]

Thanks

[@2005bgva]

Advise: For Vite users, it is not necesary to add "homepage": "." to package.json. Instead add "base: './'," to "vite.config.ts"

[@amitavroydev]

Okay, thanks for the information

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

[@ahmedmhmouad7231]

how can i make changes in front end show automatically without rebuild it each time

[@amitavroydev]

You can run it on a server and use that as the URL

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

[@muhammadayyazanjum2130]

do i need to run the command npm run build again again once i make a change is there any other way

[@amitavroydev]

no

[@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: './' })

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

[@francislainycampos2035]

@@amitavroydev I think the question is how to get back to the behaviour we had when the page was loading the changes automatically so that we don't need to keep running the build command to see those changes.

[@richmondxaviergnanhi8611]

next step

[@amitavroydev]

Have uploaded the next video. Do check out

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