katungi / desktop-weather-app-demo

A demo for a Section article about creating desktop application with React.js and electron

Getting Started with Electron with Create React App

Creating Desktop applications has come a long way. With every passing day, developers come up with easy to use options for creating desktop applications. Electron is one of those solutions. It uses web technologies wrapped around Node.js to come up with web technologies. For a more detailed introduction to the whole Electron.Js ecosystem, you can read this article.

Electron uses HTML/CSS and JavaScript traditionally. You can use HTML, CSS and vanilla JavaScript to build Electron applications. Other options available include using React and other JavaScript frameworks. In this article, we will accomplish the following:

• Create a React.js app using Create-React-App
• Install Electron into the application
• Configure Electron in the React.js app
• Finally, create a demo desktop application using Electron and React.

Where to find The article

Hey Stranger, You can read the whole article at Section Engineering blog:

desktop-weather-app-demo's Issues

README mistake

In the instructions of README, you have written "main": "main": "public/electron.js", instead it should be "main": "public/electron.js"

start was working but how I can build?

I tried to start build but did not get any file for desktop

Can't run BROWSER problem

Hey,
i rebuild the app as described on your blog. After running: npm run dev i get:
`npm run dev

[email protected] dev
concurrently -k "BROWSER=none npm start" "npm:electron"

[0] Der Befehl "BROWSER" ist entweder falsch geschrieben oder
[0] konnte nicht gefunden werden.
[0] BROWSER=none npm start exited with code 1
--> Sending SIGTERM to other processes..
[electron] npm run electron exited with code 1`

He can't find BROWSER. Do you have a fix for that?

How can you create a distributables?

Thanks!

Can't run dev

npm run dev

[email protected] dev
concurrently -k "BROWSER=none npm start" "npm:electron"

[0] 'BROWSER' is not recognized as an internal or external command,
[0] operable program or batch file.
[0] BROWSER=none npm start exited with code 1
--> Sending SIGTERM to other processes..
[electron] npm run electron exited with code 1

Can't start

npm run start

[email protected] start
react-scripts start

node:internal/modules/cjs/loader:537
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in C:\Users\Beci\Desktop\ElectronEsReact\desktop-weather-app-demo\node_modules\postcss-safe-parser\node_modules\postcss\package.json
at new NodeError (node:internal/errors:393:5)
at exportsNotFound (node:internal/modules/esm/resolve:292:10)
at packageExportsResolve (node:internal/modules/esm/resolve:628:9)
at resolveExports (node:internal/modules/cjs/loader:531:36)
at Module._findPath (node:internal/modules/cjs/loader:600:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1012:27)
at Module._load (node:internal/modules/cjs/loader:872:27)
at Module.require (node:internal/modules/cjs/loader:1092:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object. (C:\Users\Beci\Desktop\ElectronEsReact\desktop-weather-app-demo\node_modules\postcss-safe-parser\lib\safe-parser.js:1:17) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v19.1.0

Thanks: Bela

Problem to build the app

Hi,
First of all thank you for your tutorial it was really useful. My app is working perfectly for now but i'd like to compile so users can start it easily. I saw some other tutorials to build it but just by building react i notice that there are already some issues:

**> react-scripts build

Failed to compile.

fs.copySync is not a function

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/XXX/.npm/_logs/2022-06-28T07_49_49_642Z-debug.log**

And for the complete log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 info lifecycle [email protected]build: [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/XXX/Documents/MacBookPro/projects/sendinblue/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Library/Apple/usr/bin
9 verbose lifecycle [email protected]build: CWD: /Users/XXX/Documents/MacBookPro/projects/sendinblue
10 silly lifecycle [email protected]build: Args: [ '-c', 'react-scripts build' ]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: null
12 info lifecycle [email protected]build: Failed to exec build script
13 verbose stack Error: [email protected] build: react-scripts build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:376:20)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:376:20)
13 verbose stack at maybeClose (internal/child_process.js:1055:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/XXX/Documents/MacBookPro/projects/sendinblue
16 verbose Darwin 20.6.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v14.17.0
19 verbose npm v6.14.13
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: react-scripts build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Could you help me ?
Thanks