8

I've been trying to convert a small webapp into an electron application. It's working perfectly, except I need to load a bunch of files (.html) into the main DOM. In the webapp, I just used $.get, but how can I do it in electron? I try looking at the DOC but I cannot find an easy way to do that, beside an IPC pipe (and I don't quite get it).

Could anyone point me to the right direction?

Edit

I'll clarify here. I have a main process that start a BrowserWindow

mainWindow = new BrowserWindow({width: 800, height: 600})

and then, in a js file imported via a <script> tag, I want to get load and attach some file inside a dialog:

$('.dialog').load('pages/hello.html', {})

Kind regards

2
  • Can you provide any example (code, actually) of what you're doing in the web app and what you're trying to do in Electron?
    – xsh.7
    Oct 6, 2018 at 11:18
  • Edited @naeramarth7. I don't know if it's the right approach, maybe I should just migrate the js code inside the main file. Oct 6, 2018 at 12:39

3 Answers 3

2

On the Electron side you will have this code starting with the electron library. With ES6 destructuring you can pull the app property off. The app object represents the overall running process on your machine.

const electron = require('electron');
const { app } = electron;

Then you want to add on an event handler:

app.on('ready', () => {
      console.log('app is ready');
});

Once you have this running successfully. You have pulled the app property which is the underlying process. You have successfully added your event based function using the app object.

So you then want to create a new browser window to show content to the user, you pull off another property called BrowserWindow, pass it an empty object with your configuration.

const electron = require('electron');
const { app, BrowserWindow } = electron;

app.on('ready', () => {
  const mainWindow = new BrowserWindow({width: 800, height: 600});
});

You can then load the HTML document by calling the method loadURL() passing ES6 template string:

const electron = require('electron');
const { app, BrowserWindow } = electron;

app.on('ready', () => {
  const mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(`file://${__dirname}/index.html`);
});
1
  • 2
    This works in dev but not in the prod build for me.
    – sudo
    Aug 11, 2020 at 4:47
2

In Electron you can do it with fs.readFile

So :

const fs = require('fs');
const { promisify } = require('util');
const path = require('path');
const readFile = promisify(fs.readFile);

async function loadHTML(html){
    const render = await readFile(path.join(__dirname, html), 'utf-8');
    const parser = new DOMParser();
    const childrenArray = parser.parseFromString(render,'text/html').querySelector('body').childNodes;
    const frag = document.createDocumentFragment();
    childrenArray.forEach(item => {
        frag.appendChild(item);
    });
    document.body.appendChild(frag);
};

loadHTML('/path/to/my/index.html');

If I don't have a Typo, it should work. it reads the file as a string so you need to parse this String with the DOMParser.

1
  • 1
    Thanks :) The thing is I am trying to do that from the js file imported from the html, which is maybe not the best approach. Oct 6, 2018 at 12:33
1

Load like this:

`file://${path.join(__dirname,"/../../../../../../src/offline.html")}`

Let's try to understand each part:

Reason
file we will be accessing file protocol, not HTTP directly
__dirname comes with node integration in electron, everyone should set it to true
path.join else navigating up won't happen actually, it will be simple string concatenation
why all those nav up? maybe it's development dependant, for my case I had to log and find that src directory

About that navigating up, I tried on different OS and PC, most of the cases were the same. Except for one exception. Which also had a different config. And I didn't dare to change that, as the config is working.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.