I am trying to make the exe file of my reactjs project with the help of electron.js but i am nota able to create that, its just showing white screen after creation. Any idea, how to do that.
My package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"description": "desc",
"author": "author",
"homepage": "./",
"main": "public/electron.js",
"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",
"preelectron-pack": "npm run-script build",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"ebuild": "npm run build && node_modules/.bin/build",
"dev": "concurrently \"npm start\" \"wait-on http://localhost:3000 && electron .\"",
"start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
"compile": "yarn electron-compile"
},
"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": {
"babel-preset-react": "^6.24.1",
"electron": "^11.3.0",
"electron-builder": "^22.9.1",
"electron-packager": "^15.2.0",
"electron-reload": "^1.5.0",
"nodemon": "^2.0.7",
"nw": "^0.44.1-sdk",
"nw-builder": "^3.5.7"
},
"build": {
"appId": "12340214",
"extends": null,
"win": {
"icon": "Assets/icons/win/icon.ico"
},
"files": [
"build/**/*",
"node_modules/**/*",
"dist/**/*",
"package.json",
"./public/electron.js"
],
"directories": {
"buildResources": "assets"
}
}
}
public/electron.js:
const { app, BrowserWindow } = require('electron');
// const isDev = require('electron-is-dev');
const path = require('path');
// const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width:800,
height:600,
show: false
});
// const startURL = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`;
const startURL = `file://${path.join(__dirname, '../build/index.html')}`;
// mainWindow.loadURL(url.format({
// pathname: path.join(__dirname, 'index.html'),
// protocol: 'file:',
// slashes: true
// }));
mainWindow.loadURL(startURL);
mainWindow.once('ready-to-show', () => mainWindow.show());
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
Whenever i try to run the commands, the setup file is created but it is showing only white screen, and when i try to run it simple i.e normal electron cmd to run the react project in app window it runs successfully.
Related
Here is my package.js file
{
"name": "cabed",
"version": "0.1.0",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"electron-forge": "^5.2.4",
"electron-is-dev": "^2.0.0",
"electron-packager": "^17.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"main": "public/electron.js",
"homepage": "./",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
"electron": "wait-on tcp:3000 && electron .",
"eb": "electron-packager C:/Users/user/cabed cddf --platform=win32 --arch=x64"
},
"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.6.0",
"cross-env": "^7.0.3",
"electron": "^22.1.0",
"wait-on": "^7.0.1"
},
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "stock_trading_app"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin",
"linux",
"win32"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
}
}
The generated exe with electron builder which i ran with
npm run eb
the exe generated by code above
does not render the react app inside the opened windows app.
Here is my app js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div style={{justifyContent:'center',alignContent:'center',alignItems:'center'}}>
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
<p>
Sasdsad
</p>
<p>
Sasdsad
</p>
</div></div>
);
}
export default App;
my electron.js looks like this under public directory.
const path = require('path');
const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// and load the index.html of the app.
// win.loadFile("index.html");
win.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, "./index.html")}`
);
// Open the DevTools.
if (isDev) {
win.webContents.openDevTools({ mode: 'detach' });
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
When running npm start first, then the exe renders react page inside window.
I need some configuration probably but i could not found it yet.
Since you said it works when you start your server first, I assume you're using the localhost URL both in dev and in prod. When your app is packaged, you should load the file in your window and not the local URL:
const { app } = require("electron");
const windowURL = app.isPackaged
? `file://${path.join(__dirname, "./index.html")}`
: "http://localhost:3000/";
mainWindow.loadURL(windowURL);
The path when your app is packaged might be different depending on your file structure and your build/package configurations. Also, don't forget to add "homepage": "./" on your package.json or you may get a blank page.
I need some help with my React project. I can't compile any JSX and I'm completely lost on what to do. Currently this is the error when trying to compile:
I've tried deleting my package.json and node_modules folder and then running npm install. Nothing seems to work. I've tried completely removing node.js and everything relating to it and npm and reinstalling everything. I'm completely lost on what to do. I'm currently running WebStorm if that helps.
package.json:
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.27.2",
"babel": "^6.23.0",
"#babel/preset-react": "7.18.6",
"eslint": "8.22.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-table": "^7.8.0",
"styled-components": "^5.3.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts 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"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC",
"devDependencies": {
"eslint-config-react-app": "^7.0.1"
}
}
I have a babel.config.js in the src directory:
module.exports = {
"presets": ["#babel/preset-env", "#babel/preset-react"]
};
I want to display code coverage for testing React in Cypress
The package.joson look like this
{
"name": "guitesttraining",
"version": "0.1.0",
"private": true,
"jest": {
"collectCoverageFrom": [
"src/components/**/*.js"
],
"coverageReporters": [
"cobertura",
"text"
]
},
"dependencies": {
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"jest-junit": "^13.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"serverless-finch": "^4.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts -r #cypress/instrument-cra start",
"build": "react-scripts build",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
"eject": "react-scripts eject",
"cypress:run": "cypress run --record --key 3339aabe-1bcc-4f8c-8098-d08f47ac0b9b",
"postcypress:run": "npx nyc report --reporter=cobertura",
"cypress:open": "cypress open"
},
"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": {
"#cypress/code-coverage": "^3.9.12",
"#cypress/instrument-cra": "^1.4.0",
"#testing-library/cypress": "^8.0.2",
"#testing-library/jest-dom": "^5.16.2",
"cypress": "^9.5.2",
"cypress-jest-adapter": "^0.1.1",
"nyc": "^15.1.0"
}
}
The cypress/support/index.js
import './commands'
import 'cypress-jest-adapter'
import '#testing-library/cypress/add-commands'
import '#cypress/code-coverage/support'
The cypress/pluging/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config)
return config
}
After I have executed run start "react-scripts -r #cypress/instrument-cra start"
Console do not contain window.coverage object in the "Application under test iframe"
When I run npm run cypress:run I get a error message
- should toggel display and hide of details ⚠️ file /Users/steinko/development/cypresstaining/webtestingtraining/.nyc_output/out.json
has no coverage information Did you forget to instrument your web
application? Read
https://github.com/cypress-io/code-coverage#instrument-your-application
What must I do to instrument the web application?
I toght that running react-scripts -r #cypress/instrument-cra start instrumeneted the web application
I found a issue, instrument-cra still does not support react-scripts v5. After I try react-scripts v4.0.3, it does not work also.
Windows 10x64, Node.js v14.15.1, npm v6.14.8, Google Chrome v87.0.4280.141
Why when I use the npm start command it doesn't refresh the web page when I change the src/index.js file and save the changes? I see it rebuilds the project when I save the changes, but it doesn't refresh web page and I am to press F5 key each time manualy. This is my simple project:
package.json:
{
"name": "w5",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build:dev": "npx webpack --mode development",
"build:prod": "npx webpack --mode production",
"start": "npx webpack serve --mode development --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.5.1",
"webpack": "^5.18.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
}
}
webpack.config.js:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = env => {
const config = {
mode: 'development',
target: ['web','es5'],
context: path.resolve(__dirname, 'src'),
entry: {
main: './index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname,'dist')
},
resolve: {
extensions: ['.js','.json']
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack 5'
})
],
devServer: {
port: 3000,
hot: true
}
}
return config
}
src/index.js:
console.log('Hello world')
What I did wrong?
If I replace target: ['web','es5'] option by target: 'web' then HMR works fine.
I am trying to render my React app through NodeJS and deploy it on Heroku. but I seem to have this problem in the browser
Uncaught SyntaxError: Unexpected token '<'
and the page is a blank white page.
I tried so many solutions but I don't seem to know what is wrong and why won't the homepage show up.
My Package.json in NodeJS
{
"name": "portfolio-app",
"version": "1.0.0",
"description": "a simple app",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
"start": "node app.js",
"client": "cd client && npm run start",
"dev": "concurrently -n 'server,client' -c 'red,green' \"nodemon app.js\" \"npm run client\""
},
"dependencies": {
"body-parser": "^1.19.0",
"concurrently": "^5.2.0",
"create-react-app": "^3.4.1",
"express": "^4.17.1",
"mongoose": "^5.9.6",
"nodemon": "^2.0.2"
},
"engines": {
"node": "10.x"
}
}
my package.json in React App
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"history": "^4.10.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
},
"proxy": "http://localhost:8080"
}
my app.js server file:
const express = require('express'),
app = express(),
bodyParser = require('body-parser'),
nav = require('./routes/navigation'),
path = require('path'),
PORT = process.env.PORT || 8080;
/* Settings */
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
/*Production settings*/
if(process.env.NODE_ENV === "production"){
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}
/* Starting server */
app.listen(PORT, () => {
console.log(`APP IS RUNNING ON PORT ${PORT}`);
});
After research, I found that the problem was in the Heroku builder so I added this builder
to the Heroku app:
https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack
and the problem was solved.
I think the problem with Heroku and I prefer to separate the backend and frontend by pushing your react app to netlify and your node backend to heroku