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/.
- This is my first reactjs app, and one of my first nodejs apps, so I'm not sure how to debug this. I'm not super clear on all the build steps because I used some boilerplates and tutorials that didn't explain anything.
- The command I used to get started initially was from create-react-appp, specifically
npx create-react-app creative-ontology-editor - The react portion works fine when I run it with
npm startandnpm run electron-dev. from there I tried to get electron working using this tutorial and this package example among other things. - I'm considering making the project public if that will help troubleshoot it.
Source code
index.html
Here'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.json
And 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"
}
}
An abbreviated directory tree looks like this
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"
}
