CODEWITHSUNDEEP
javascriptjquerynode.jsgetelectron
Prem P.
Prem P.

Reputation: 412

Creating an Electron Application with Node.js Logic

I've been practicing using Electron for a few months now, and I was wondering how to convert a Node.js webpage project that I made a while ago into an Electron app. In my Node.js webpage, I used functions like 

app.get('/' function(req, res){
    res.render('loginpage');
}
app.post('/loginCredentials', function(req, res){
    /*Make sure req.body.username and req.body.password are valid*/
    res.render('home');
}

Also in my Node.js application, whenever the user wants to see the database results, I query the database in the Node.js webpage and send the variables to the webpage when they're rendered.

But in Electron, I don't know how to handle such requests.If I wanted to make an Electron application, would I have to deal all of this in the webpage files themselves, or does Electron have some app.get/app.post methods?

Alternatively, is there a way to make my Node.js webpage load in a browser window like an Electron application?

Thank you in advance

UPDATE 1; ipcMain Module function:

In my electron main.js file, I have the following code:

const {ipcMain} = require('electron')
ipcMain.on('hello', (event, arg) => {
    console.log(arg)
    event.returnValue = 'pong'
})

And in my webpage, that is located in the './views' directory, I have the following code: (it is a pug file and it renders correctly)

input(type ='submit', value ='Submit', onclick = "handleClick()")
...
script.  
    const {ipcRenderer} = require('electron')
    function handleClick(){    
        var x = ipcRenderer.sendSync('hello', 'ping')
        console.log(x) 
    }

I kept getting an error (it is shown at the bottom of the question) before made the following changes. I changed:

const ipcMain = require('electron')

to 

const {ipcMain} = require('electron')

Apparently, the brackets are required to be around the module for it to be imported correctly.

Error that existed but was fixed:

Uncaught TypeError: ipcRenderer.sendSync is not a function
    at handleClick (loginpage.pug:64)
    at HTMLInputElement.onclick

ipcMain is a useful aspect in Electron that mimics the app.get/app.post in Node.js

Upvotes: 1

Views: 1262

Answers (1)

tskittles
tskittles

Reputation: 136

While it is technically possible to make Node.js your backend for an Electron app, it would be a heavy handed solution and is not recommended.

Instead of post/get requests, instances of Electron's EventEmitter class are typically used for communicating between the front and backend. Use the ipcMain module on the backend, and ipcRenderer on your frontend to exchange any sort of data. In fact, messages can be sent either synchronously or asynchronously.

For example, from Electron's documentation:

// In main process.
const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg)  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg)  // prints "ping"
  event.returnValue = 'pong'
})

// In renderer process (web page).
const {ipcRenderer} = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

Upvotes: 3

Related Questions