Electron - How to add react dev tool - electron

What is the easy way to add react dev tool to electron window? I try add the extension hash
BrowserWindow.addDevToolsExtension('path/to/extension/ade2343nd23k234bdb').15.01
But when the extension update, I had to manually update the string in main.js. I'm looking for a better way.

Here is a Solution for Electron <= 1.2.1 version
1- In your app folder
npm install --save-dev electron-react-devtools
2- Open your electron app, click on (view/toggle developer tools). In the console tab insert the following code and hit enter:
require('electron-react-devtools').install()
3- Reload/refresh your electron app page and you'll see the react dev tools appear.
4- Done!
See screen shots bellow

You can add react devtools directly from your main.js file like this
const installExtensions = async () => {
const installer = require('electron-devtools-installer')
const forceDownload = !!process.env.UPGRADE_EXTENSIONS
const extensions = [
'REACT_DEVELOPER_TOOLS',
'REDUX_DEVTOOLS',
'DEVTRON'
]
return Promise
.all(extensions.map(name => installer.default(installer[name], forceDownload)))
.catch(console.log)
}
app.on('ready', async () => {
if (dev && process.argv.indexOf('--noDevServer') === -1) {
await installExtensions()
}
createWindow()
})

addDevToolsExtension is not an instance method, so you need to call BrowserWindow.addDevToolsExtension('path/to/extension').

Below solution worked for me (https://github.com/MarshallOfSound/electron-devtools-installer#usage) -
npm install electron-devtools-installer --save-dev
or
yarn add electron-devtools-installer -D
import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer';
// Or if you can not use ES6 imports
/**
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
*/
const { app } = require('electron');
app.whenReady().then(() => {
installExtension(REDUX_DEVTOOLS)
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log('An error occurred: ', err));
});

If you see a blank component when launching react-devtools, it's probably because you've installed the package globally as it is recommended in the react-native docs, in the debugging section. What's happening is it doesn't get connected to your app, because it's not your app-specific.
You need to install it locally.
npm install --save-dev react-devtools
or
yarn add -D react-devtools

Related

Connection refused when launching Electron app generated with electron-packager/ electron-builder

I have a React Electron app with Webpack and try to build it into an executable.
I used the CLI commands of electron-packager and electron-builder which ran without errors.
But when I run the exe I get a blank screen and from terminal the error message:
(node:8172) electron: Failed to load URL: http://localhost:3000/main_window with error: ERR_CONNECTION_REFUSED
(Use mixmatch --trace-warnings ... to show where the warning was created)
Running with the option doesn't give any additional information.
Searching the source code for localhost leads to index.js in the webpack directory:
var createWindow = function () {
var preload = path_1.default.join(__dirname, '../renderer/main_window', "preload.js");
exports.mainWindow = new electron_1.BrowserWindow({
// show: false,
webPreferences: {
enableRemoteModule: false,
// nodeIntegration: false, // is default value after Electron v5
preload: preload // use a preload script
}
});
exports.mainWindow.loadURL('http://localhost:3000/main_window');
exports.mainWindow.maximize();
exports.mainWindow.webContents.openDevTools();
};
So I guess a server is being started, which probably is the same for every app, but the app is not allowed to access localhost.
So why does it seem to work easily for everyone else but not for me?
Once the build is created, you need to loadURL from build/index.html.
Replace your code of export.mainWindow.loadURL with this
e.g.
const isDev = require('electron-is-dev');
exports.mainWindow.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
);

How to change Expo entry point properly?

I want to change entry point of my expo app. I have tried these simple steps:
First of all, I have created a simple expo project.
$ expo init test
$ cd test
$ rm App.js
$ mkdir src
$ touch src/App.js
I have changed app.json of my expo based app as follows
{
"expo": {
...,
entryPoint: "./src/App.js",
...
}
}
Then i have filled the App.js as folows
import React from "react";
import { Text } from "react-native";
export default () => <Text>Hello World</Text>;
However, the first trial have been failed. It have shown only splash screen.
Then i have edited the App.js as follows:
import React from "react";
import { Text } from "react-native";
import { registerRootComponent } from "expo";
const App = () => <Text>Hello World</Text>;
registerRootComponent(App);
I have seen "Hello World" text in the screen. However, hotreloading have not been working.
Then i have modified main entry in package.json
"main": "./src/App.js",
In this way hot reloading is working in second save action.
I am wondering
How can i solve hot reloading problem (in first save action)?
What is the difference between app.json's entryPoint and package.json's main field?
I suggest you read this article:
https://docs.expo.dev/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my
and be sure you restarted your whole dev process

Ionic App - SQLite error "plugin_not_installed" only when running app in iOs devices

I builded an hybrid app using Ionic3+AngularJS and it uses the SQLite database.
When I run the app in Android's devices it works perfectly but when I try to run it in an iPhone or iPad I get the following error: plugin_not_installed. It happens when the app tries to create the database.
This is how it's creating the database:
public getDB(){
return this.sqlite.create({
name: 'namedatabase.db',
location: 'default'
}).catch( error => this.showError(error));
}
The catch() is called and it shows the error message "plugin_not_installed".
SQLite installed using:
$ ionic cordova plugin add cordova-sqlite-storage
$ npm install --save #ionic-native/sqlite
Any ideas?
I'm getting the same issue when I run my app in an android emulator using
ionic cordova run android -lc
When the app start, everything is ok. But after a couple of changes in my code and a save command, the app reload and show in my console
console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins / and reinstalling them.
console.warn: 'Native: tried accessing the SQLite plugin but it's not installed.
console.warn: Install the SQLite plugin: 'ionic cordova plugin add cordova-sqlite-storage'
console.log: err "plugin_not_installed"
Even if I followed what the console asked me to do, I'm still getting the same error and it cannot create my SQLite database
What I did next is to re-run the app using the run command above, but it waste a lot of time for me to wait for the app to get started again... and again :(
createDBFile() {
this.sqlite.create({
name: DB_NAME,
location: 'default'
}).then((db: SQLiteObject) => {
this.db = db;
console.log('BDD cree')
this.stockageLocal.get('dbstatus').then(opened => {
if (opened) {
console.log('DB deja ouvert');
}
else {
console.log('create all table')
this.createTables();
}
})
}).catch(err => {
console.log(' err', JSON.stringify(err))
});
}
I had the same problem: plugin_not_installed.
I resolved putting console.log check after the promise errors and seeing that the table didn't exist.
The code:
this.sqlite.create({
name: 'ionicdb.db',
location: 'default'
})
.then((db: SQLiteObject) => {
db.executeSql('create table if not exists MY_SQLITE_STORAGE(key VARCHAR(32) PRIMARY KEY, value VARCHAR(32))', [])
.then(() => {
console.log('Executed Create table if not exists');
this.toastCtrl.create({
message: 'Table created ',
duration: 5000,
position: 'center'
}).present();
}).catch(e => console.log('error: '+JSON.stringify(e)));
}).catch(e => console.log('error: '+JSON.stringify(e)));

Check if running phonegap or apk

I have a code that will not run if the app is running via Phonegap (it will completly stop the script), will only run as an apk (needs to be built). How can I create an if that will check if its in phonegap or a standalone apk?
I test my apps using IIS (localhost). I use to check if the url contained "localhost", later found out about checking window.cordova to determine if the app is running as Cordova App.
Example:
function isRunningLocalhost() {
if (window.cordova) {
console.log('runningLocalhost() - False In Cordova');
return false;
}
else {
console.log('runningLocalhost() - True Running Localhost');
return true;
}
}
if (isRunningLocalhost() === true)
{
//Not running as an APK
}

Using electron-boilerplate to create an .exe for windows. It needs to run a .bat file. Once it's packaged, it doesn't run

Using the electron-boilerplate to create an .exe for windows, it needs to run a .bat file. However, using npm start it works but when it gets packaged with npm run release, it doesn't run the .bat
This is my code for the function
const spawn = require('child_process').spawn;
const bat = spawn('cmd.exe', ['/c', 'Install.bat']);
bat.stdout.on('data', (data) => {
var str = String.fromCharCode.apply(null, data);
addLog(data);
console.info(str);
});
bat.stderr.on('data', (data) => {
var str = String.fromCharCode.apply(null, data);
addLog(data,"error");
console.error(str);
});
bat.on('exit', (code) => {
console.log(`Exit ${code}`);
});
Already checked for child-process
When you run electron via npm start it will typically set the current working directory to the folder for the app (containing your package.json). So it will look for cmd.exe in that folder.
After you build the app and run it, the current working directory might be somewhere else, for example C:\\ (on Windows). You can find the current working directory with process.cwd().
To find the app folder regardless of how the app is running, Electron provides electron.app.getAppPath().
So you can use it like this:
const path = require('path');
const cmdPath = path.join(electron.app.getAppPath(),'cmd.exe');
const bat = spawn(cmdPath, ['/c', 'Install.bat']);

Resources