Building Electron app can't find resources files - reactjs

I have an electron react app (built with create-react-app) which runs fine in development mode, but when I use electron-packager to publish it both the .css and .js files have the error "Failed to load resource: net::ERR_FILE_NOT_FOUND".
Looking in the developer tools network tab I can see it is looking for the files at file:///static/js/main.83d4505c.js and file:///static/css/main.00ef8ad8.css while the file/folder structure is:
build
static
js
main.83d4505c.js
css
main.00ef8ad8.css
App-darwin-x64
App (The executable app)
public
src
...
I use the below code for my main window:
mainWindow.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
);
I have tried adding "homepage": "./", to the package file as suggested on https://github.com/electron/electron/issues/1769 but it doesn't help.
Package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
},
"homepage": "./",
"main": "public/electron.js",
"directories": {
"buildResources": "build",
"app": "build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#emotion/core": "^11.0.0",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.8.5",
"#mui/styled-engine-sc": "^5.8.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^13.2.1",
"chokidar": "^3.5.3",
"electron-is-dev": "^2.0.0",
"electron-reload": "^2.0.0-alpha.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.0"
},
"devDependencies": {
"concurrently": "^7.2.2",
"electron": "^19.0.4",
"electron-builder": "^23.0.3",
"electron-packager": "^15.5.1",
"prettier": "1.17.0",
"wait-on": "^6.0.1"
}
}

Related

Deploying React App to GitHub Pages only showing README.md file

I've been trying to deploy a React App to Github Pages, and have followed a few tutorials, however I can't seem to find the gh-pages branch that the site gets built from, only the master branch shows up.
When I deploy the app, only the README.md file shows up, or I get a 404 error. My package.json looks like this:
{
"name": "portfolio",
"homepage": "https://samarqureshii.github.io/",
"version": "2.0.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.6.2",
"#mui/material": "^5.6.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"ajv": "^8.11.0",
"classnames": "^2.2.6",
"moment": "^2.29.4",
"node-forge": ">=1.3.0",
"object-path": "^0.11.8",
"postcss": "^8.4.14",
"postcss-normalize": "^10.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"sass": "^1.54.5",
"typescript": "^4.7.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^4.0.0"
}
}

React: stuck at wait-on at localhost:3000

I have been trying to implement electron and react together ,with the below package.json
{
"name": "loader",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"cross-env": "^7.0.3",
"electron-is-dev": "^2.0.0",
"react": "^18.2.0",
"react-countup": "^6.3.1",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-idle-timer": "^5.4.2",
"react-loader-spinner": "^5.3.3",
"react-rnd": "^10.3.7",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"react-spring": "^9.5.3",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"main": "public/main.js",
"homepage": "./",
"scripts": {
"react-start": "react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test --env=jsdom",
"react-eject": "react-scripts eject",
"electron-build": "electron-builder",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000/ && electron .\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^7.5.0",
"electron": "^21.2.3",
"electron-builder": "^23.6.0",
"wait-on": "^6.0.1"
}
}
It is clear that concurrently is being used to run all the commands together at same time. Now when I do yarn start, all commands are executed along with the react-start, but even after the react is available at http://localhost:3000 the wait-on never executes further and is stucked, eventually the electron never starts.
If tested without wait-on then all commands are executed well along with the electron.
Can someone guide on this?
I had the same issue.
All I needed to do was to change it from wait-on http://localhost:3000 to wait-on http://127.0.0.1:3000.
Hope that helps!

TailwindCSS classes arent showing up (React) when deployed via Netlify, where did I go wrong?

Hi Ive been racking my brain on what Ive been doing wrong. Locally the formatting is correct, but when I push it to Netlify, Tailwindcss decides to not work. Am I purging wrong? I have a tailwind css file in my dist and src folders.
package.json
{
"name": "bgg_version_3",
"keywords": [
"design, graphic design, art, illustration, web design, Virginia, Massachusetts, Boston, Newport News"
],
"homepage": ".",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^5.0.2",
"framer-motion": "^4.1.17",
"isomorphic-unfetch": "^3.1.0",
"next": "^11.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-beta.4",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-tsparticles": "^1.33.2",
"react-visibility-sensor": "^5.1.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"build:tailwind": "tailwindcss build -i src/tailwind.css -o src/tailwind.output.css",
"prestart": "npm run build:tailwind",
"prebuild": "npm run build:tailwind",
"start": "craco start",
"build": "react-scripts build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"sass": "^1.36.0"
}
}
tailwind.config.js
module.exports = {
purge: ["./src/*.{js,jsx,ts,tsx}", './src/*.{scss,css}',"./src/components/*.{js,jsx,ts,tsx}","./src/components/*.{scss,css}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Any clue as to why it wont seem to work when deployed or what I did wrong?
Normally the devDependecies in your package.json would look somthing like this when using tailwindcss:
"devDependencies": {
"autoprefixer": "^10.3.1",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.7"
}
So I would suggest you redo the process of installing tailwindcss and remember the --save flag on every install

electron and react with expressjs build issues

I have an app almost ready to package, I've been using express, react, bootstrap and electron. I can run the app file using npm start, But i cant package it. Build completes and when i run application file electron open but neither react runs on localhost nor express.
My directory structure is as follows
- api
- containes expressjs (package.json)
- client
- containes react and electron (package.json)
*let me know if you need more detailed structure
This is my procfile
react: npm run react-start
electron: npm run electron-start
express: npm start --prefix ../api/
This is my package.json
{
"name": "POSifier",
"version": "0.1.0",
"description": "system",
"private": true,
"homepage": "../",
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/pickers": "^3.2.10",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#wojtekmaj/react-datetimerange-picker": "^3.0.0",
"bootstrap": "^4.5.2",
"canvasjs": "^1.8.3",
"custom-electron-titlebar": "^3.2.5",
"date-fns": "^2.16.1",
"jquery": "^3.5.1",
"jsbarcode": "^3.11.3",
"moment": "^2.29.1",
"mysql": "^2.18.1",
"pouchdb": "^7.2.2",
"pouchdb-authentication": "^1.1.3",
"pouchdb-browser": "^7.2.2",
"pouchdb-find": "^7.2.2",
"pouchdb-react-native": "^6.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-bootstrap-date-picker": "^5.1.0",
"react-dom": "^16.13.1",
"react-fade-in": "^1.1.1",
"react-native": "^0.63.2",
"react-pouchdb": "^2.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"web-vitals": "^0.2.4"
},
"build": {
"appId": "com.Posifier.app",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
"scripts": {
"start": "nf start -p 3000",
"electron-start": "node src/wait-for-react",
"electron-pack": "build --em.main=build/electron.js",
"preelectron-pack": "yarn build",
"react-start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"new":"react-scripts build && electron-builder --publish=always"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"electron": "^11.1.1",
"electron-builder": "^22.9.1",
"foreman": "^3.0.1"
},
"main": "public/electron.js"
}

Heroku ReactJS app renders blank page but works fine locally

I deployed a ReactJS + ExpressJS app on heroku and it renders the index.html but without the React App in it. This is the package.json:
{
"name": "spotifyproj",
"version": "0.1.0",
"private": true,
"homepage": "https://whispering-caverns-57172.herokuapp.com",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.2",
"compression": "^1.7.4",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"morgan": "^1.10.0",
"path": "^0.12.7",
"querystring": "^0.2.0",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"react-spotify-player": "^1.0.4",
"spotify-web-api-js": "^1.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
It works fine locally but wont render the app when its deployed...
Solved it in server.js
You gotta tell express to use the build path and not the src or public directory
app.use(express.static(path.join(__dirname, 'build')))
.use(cors())
.use(cookieParser());

Resources