Menu
I'm trying to build a desktop app using react & electron. I can build the project with npm start build but when I run the executable, I get a node app with a white screen because the app can't find the resources it needs.
those errors are:
Failed to load resource: net::ERR_FILE_NOT_FOUND /F:/static/css/main.056419ee.chunk.css:1
Failed to load resource: net::ERR_FILE_NOT_FOUND 2.eba76f4b.chunk.js:1
Failed to load resource: net::ERR_FILE_NOT_FOUND main.175818bb.chunk.js:1
F: is the right drive, but I don't think Electron should be looking for the static directory at the drive root. I don't know what's causing that, or why there'd be a leading /. Additionally, I don't know why it'd be looking for the other two chunk files in a different directory; all three files are in ./build/static/js/.
npx create-react-app creative-ontology-editor
npm start and npm run electron-dev. from there I tried to get electron working using this tutorial and this package example among other things.index.htmlHere's the html the built electron app brings up: (note: I prettified but left the minified js in a single line so that the rest of it can be easily seen)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
<link rel="manifest" href="/manifest.json"/>
<title>Creative Ontology Editor</title>
<link href="/static/css/main.056419ee.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script>
<script src="/static/js/2.eba76f4b.chunk.js"></script>
<script src="/static/js/main.175818bb.chunk.js"></script>
</body>
</html>
package.jsonAnd here's my project's package.json. I am aware that I've probably got my dev and normal dependencies all mixed up, but I doubt that's part of the issue/
{
"name": "creative-ontology-editor",
"version": "0.1.0",
"author": "Joe Bush",
"description": "An applied ontology organization tool",
"private": true,
"main": "public/electron.js",
"dependencies": {
"concurrently": "^4.1.0",
"cross-env": "^5.2.0",
"electron-is-dev": "^1.0.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8",
"typescript": "^3.4.1",
"wait-on": "^3.2.0"
},
"scripts": {
"react-build": "react-scripts build",
"react-test": "react-scripts test",
"react-eject": "react-scripts eject",
"react-start": "react-scripts start",
"electron-build": "electron-builder",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"electron-dev": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
"dist": "build"
},
"build": {
"appId": "creative-ontology-editor",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "public"
},
"linux": {
"target": [
"AppImage",
"deb"
]
},
"win": {
"target": "NSIS",
"icon": "build/icon.ico"
}
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"electron": "^4.1.3",
"electron-builder": "^20.39.0"
}
}
đź“‚creative-ontology-editor
|-- đź“‚build
| |-- đź“‚static
| | |-- đź“‚csss
| | +-- đź“‚js
| | |-- 2.eba76f4b.chunk.js
| | |-- 2.eba76f4b.chunk.js.map
| | |-- main.175818bb.chunk.js
| | |-- main.175818bb.chunk.js.map
| | |-- runtime~main.a8a9905a.js
| | |-- runtime~main.a8a9905a.js.map
| |
| |-- asset-manifest.json
| |-- electron.js
| |-- index.html
| |-- manifest.json
| |-- precache-manifest.825 ... .js
| +-- service-worker.js
|
|-- đź“‚dist
| |-- đź“‚win-unpacked
| |-- builder-effective-config.yaml
| |-- creative-ontology-editor Setup 0.1.0.exe
| |-- creative-ontology-editor Setup 0.1.0.exe.blockmap
|
|-- đź“‚node_modules
|-- đź“‚public
| |-- electron.js
| |-- index.html
| +-- manifest.json
|
|-- đź“‚src
| |-- đź“‚Components
| |-- App.css
| |-- App.js
| +-- index.js
|
+-- package.json
./build/asset-manifest.json{
"main.css": "/static/css/main.056419ee.chunk.css",
"main.js": "/static/js/main.175818bb.chunk.js",
"main.js.map": "/static/js/main.175818bb.chunk.js.map",
"runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
"runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
"static/js/2.eba76f4b.chunk.js": "/static/js/2.eba76f4b.chunk.js",
"static/js/2.eba76f4b.chunk.js.map": "/static/js/2.eba76f4b.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.82521987a6df63b594987c0f56a4cbb9.js": "/precache-manifest.82521987a6df63b594987c0f56a4cbb9.js",
"service-worker.js": "/service-worker.js",
"static/css/main.056419ee.chunk.css.map": "/static/css/main.056419ee.chunk.css.map"
}
./build/manifest.json{
"short_name": "COE",
"name": "Creative Ontology Editor",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
313
asked Apr 04 '19 21:04
From Kitze's article, there was one line missing from my package.json:
"homepage": "./"
and he even explained it:
One last thing:
Set “homepage” in the package.json, otherwise the packaged app won’t find the .js and .css files.
61
answered Nov 14 '22 14:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With