Running 'Get App information' from Electron API demo. (Or "Where is the render process?")


#1

Hi,
I just started with Electron and apologize if this question is extremely trivial. I’m trying to run the simplest Electron app. I want it to do exactly what the API demo for ‘App info’ does. Which is basically a button, and when it’s pressed it returns the current app folder.

For the life of me, I can’t figure out where the code from the render process should go, and would appreciate it if someone would explain it to me like to a 5-year-old.
Thanks.

Render Process:

const ipc = require('electron').ipcRenderer

const appInfoBtn = document.getElementById('app-info')

appInfoBtn.addEventListener('click', function () {
  ipc.send('get-app-path')
})

ipc.on('got-app-path', function (event, path) {
  const message = `This app is located at: ${path}`
  document.getElementById('got-app-info').innerHTML = message
})

Main process:

const app = require('electron').app
const ipc = require('electron').ipcMain

ipc.on('get-app-path', function (event) {
  event.sender.send('got-app-path', app.getAppPath())
})

#2

Hi!

I can’t figure out where the code from the render process should go

Renderer process code can go inside the HTML file itself. As you would for adding JavaScript to a website you can put it in between two script tags <script></script>. You can also put it in a separate file and require it using Node requires: <script>require('./my-file.js')</script>. Lastly you can bring it in as you would an external JavaScript file on a website: <script src="my-file.js"></script>


#3

Many thanks! It works!