I have problem with connect NeDB to my react-electron app. Now I install NeDB on my project and connect him to electron.js file.
const Datastore = require('nedb');
let db = {};
db.students = new Datastore({
filename:'./students.json',
autoload: true
})
db.students.insert({name : "Putin V.V.", year: 1952});
Now I need connect this db to my app.js file.
How I can manipulate with this file on render part?
GitHub code
You can achive your idea by using ipc at Electron.
I posted an answer before. Please check the below.
how to communicate between react and electron
But here is the pre-requirements.
You should enable the nodeintegration when you are creating the BrowserWindow
So at your code, it should be like this
mainWindow = new BrowserWindow({
width: 1280,
height: 720,
minWidth: 900,
minHeight: 600,
show: false,
icon: "",
webPreferences: {
nodeIntegration: true
}
});
After this, you can use this ipcRenderer at renderer(your react app).
If you don't set this option. Then you will face the similar issue as below
ipcRenderer not receiving message from main process
Related
I'm building a react-electron app. I created a custom window header but I can't access app.quit() & a.*() in my project.
app.js(react):
i tried both type :
1.import electron from "electron";
2.const electron = require('electron')
<div onClick={()=>{
electron.app.quit()
}} </div>
main.js :
const mainWindow = new BrowserWindow({
width: 900,
height: 675,
frame: false,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
mainWindow.loadURL('http://localhost:3000');
i run the app with this script:
"start": "concurrently \"npm run react-start\" \"wait-on http://localhost:3000 && electron .\"",
i got this error :
i found the answer. hope this help someone :
add this to your main.js:
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false
}
and use it in react component like this:
const { ipcRenderer } = window.require('electron');
<img onClick={()=>{ipcRenderer.send('close',[])}} src={""}/>
and use it in main.js like this :
const {ipcMain} = require('electron')
ipcMain.on('close',()=>app.quit())
you need to use the ipc to send message from renderer(React) to main process (Nodejs). For exemple, if you want to close , you can listen the event in main process like this.
this.ipcMain.on('closeApp', () => {
this.win.close();
});
And send the event from renderer like this
window.electron.ipcRenderer.sendMessage('closeApp');
I am working with electron and reactjs and rendering the view with electron js, I am facing an Error: Illegal invocation: Function must be called on an object of type NativeImage after electron version upgrade. I can't downgrade the electron version as some functionality is not working in surface machines.
We have the functionality to capture screenshots but after the package upgrade facing an error while screenshot capture. I am using webview to render view in the electron application.
Here is the code how I am using to load view in webview.
const webview = <webview src="path" class="webview__3kBDE" style="width: 768px; height: 576px; margin-top: 0px; margin-left: auto; margin-right: auto;"></webview>
const rawImage = await webview.capturePage()
const URL = rawImage.toPNG()
When I am printing the rawImage I am getting blank object so while rawImage.toPNG() I am facing an error. If anyone has any idea how to fix this error that would be a great help. Thank you.
The Electron 10 release had major changes and if you are using the Electron 10 > the remote module is now disabled by default. To use the remote module, enableRemoteModule: true must be specified in WebPreferences:
const w = new BrowserWindow({
webPreferences: {
enableRemoteModule: true
}
})
For more details check here https://www.electronjs.org/docs/latest/breaking-changes#default-changed-enableremotemodule-defaults-to-false
I'm trying to use cookies in my electron react app.
At the moment I am completely unable to get it to work.
Requiring electron or importing it in a react component throws "TypeError: fs.existsSync is not a function".
Example code that breaks (in App.js for example):
import { WebContent } from 'electron';
or
const { session } = require('electron');
What I got to work was the following code in the Main.js file:
const { app, BrowserWindow, session } = require('electron');
session.defaultSession.cookies.get({}).then(cookies => {
console.log(cookies)
});
I followed this tutorial Using Electron with React: The Basics to set up my electron react app.
I also followed this answer to a similar question but when i do this:
const { session } = window.require('electron');
console.log(session.defaultSession.cookies);
It says that session is undefined.
I guess, you want to use cookies within the renderer process (the js files used for rendering the UI). Since the cookies are normally only accessible within the main process and 'remote' access is turned off by default since version 10 of electron, this has to be turned on again by setting enableRemoteModule: true in main.js (main process) within the creation of the browser window. For me this looks like that
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
}
});
(Also, nodeIntegration: true is necessary in my case but maybe not in your case to prevent errors of process being undefined.)
Setting that, you can access the session object just by doing
import electron from 'electron';
const {remote} = electron;
const {session} = remote;
console.log(session.defaultSession.cookies);
in your renderer code. Also, you can access all the others objects usually only accessible in the main process via electron.remote.
Cheers.
I'm completely new to this technology and I can't manage to run the InAppBrowser from #ionic-native/in-app-browser. I've installed the respective plugin but it seems not to be working in the actual native app. This is my code:
import { InAppBrowser, InAppBrowserOptions } from "#ionic-native/in-app-browser";
const websiteUrl: string = "https://a-working-url.com"
const options: InAppBrowserOptions = {
zoom: 'no',
location: 'no',
toolbar: 'no',
hidden: 'yes',
hideurlbar: 'yes',
toolbarposition: 'bottom'
}
const browser = InAppBrowser.create(websiteUrl, '_self', options)
browser?.on('loadstop').subscribe(event => {
browser.insertCSS({ code: "body{color: red; padding: 10mm;" });
console.log('loadstop DONE!')
});
I get the following message in the Android log:
Msg: Native: InAppBrowserOriginal is not installed or you are running
on a browser. Falling back to window.open.
What am I missing?
Note: the reason why I don't use Browser from #capacitor/core is that I can't make the browser hide its navigation bar and there is no support for insertCSS which I actually need.
ok the issue is fixed. I noticed that the plugin wasn't installed properly..
I had to reinstall the plugin by:
npm install cordova-plugin-inappbrowser
Sometimes I refresh, and it works. Sometimes it just doesn't work.
I tried changing ganache GUI settings to use port 8545 which I read is the WebSockets port but it still won't connect. ws:127.0.0.1 won't work and neither will http://
This is my truffle config file. The rest of the code is large and won't help much.
// See <http://truffleframework.com/docs/advanced/configuration>
// #truffle/hdwallet-provider
// var HDWalletProvider = require("truffle-hdwallet-provider");
const path = require("path");
var HDWalletProvider = require("#truffle/hdwallet-provider");
module.exports = {
// See <http://truffleframework.com/docs/advanced/configuration>
// to customize your Truffle configuration!
// contracts_directory: "./allMyStuff/someStuff/theContractFolder",
contracts_build_directory: path.join(__dirname, "/_truffle/build/contracts"),
// migrations_directory: "./allMyStuff/someStuff/theMigrationsFolder",
networks: {
ganache: {
host: "127.0.0.1",
port: 7545,
//port: 8545,
network_id: 5777,
//network_id: "*", // Match any network id,
websockets: false, // websockets true breaks TODO: connection not open on send()
// wss
},
},
};
This is some of my code on the actual screen in question.
const options = {
web3: {
block: false,
fallback: {
type: 'ws',
//url: 'ws://127.0.0.1:8546',
url: 'http://127.0.0.1:7545',
},
},
contracts: [MyStringStore],
// polls: {
// accounts: IntervalInMilliseconds,
// },
events: {},
};
I don't understand why sometimes it works and I can see drizzle state and sometimes I can't. React native and web3 is very new to me.
I get errors like this:
00:06 Contract MyStringStore not found on network ID: undefined
Error fetching accounts:
00:06 connection not open
I am having real difficulty setting up drizzle as well. One thing I see is that your
url: 'http://127.0.0.1:7545',
For some reason Drizzle only works with 'ws' as the prefix for such a URL. I am trying to follow this guide by people who got it working.
I think websocket is only available in the command line version.
Try install and use ganache-cli instead of the gui version.