First Steps - Navigation / HTML Imports / Template Engine?

Hi all,

I’m just taking my first steps with electron and it’s awesome.
I’m also looking forward to getting deeper into the whole thing.

But I’m facing a big problem right now.
I would like to create a menu navigation, as in the electron-api-demos example. However, I get the following error (tried it with the help of this tutorial: https://www.christianengvall.se/electron-app-navigation/ ):

[Deprecation] HTML Imports is deprecated and will be removed in M73, around March 2019. Please use ES modules instead. See https://www.chromestatus.com/features/5144752345317376 for more details.

While searching the internet for alternatives, I came across the following:


But even this solution doesn’t work for me and unfortunately I don’t know why.

Now I wanted to ask if you could help me and know how I could implement it.
I would like to have a main page with header/navbar and footer. The content, however, should be changed according to which “menu” I am in. I would like to pack the individual content pages into own html files.

Something like this:

  • /app/gui/index.html
  • /app/gui/section/content1.html
  • /app/gui/section/content2.html
  • /app/gui/section/content3.html

Running on:

  • node 12.0.0
  • Chrome 73.0.3683.121
  • Electron 5.0.2

Thanks for your help. :slight_smile:

While you can make an Electron application that’s just a set of HTML pages, that’s not really what it’s built for. If you’re trying to learn how to use Electron well, I would recommend learning about Single-Page Applications and picking a JavaScript framework to study (I know how to use React the best, so that’s what I can tell you about). If you think that you truly want to use separate HTML files, I think your best bet is to use an iframe.

1 Like

Oh… thanks for the wiki link. I think I get it know…
All this time, when people talk about a single page apps, I thought that it meant a big page where you just scroll down without a navigation (as well as the whole landing pages for products on the web). :rofl::sweat_smile:

I have only briefly browsed the wiki page, but I have no problem bringing everything into one page… actually I thought about it all the time.

The only thing I’m trying to achieve is a navigation that displays a different content as soon as the user clicks on “start”, “about”, “another menu”, etc. I would then show and hide the individual sections/content with jquery. According to which link was clicked.

But I would like to write the pages/contents in their own html files for my own clarity and finally integrate/include them into a single page app.

Is that possible?
I would like to avoid writing a “huge” html file in the development process.

Thank you so much for your help. :smiley:

There is a very comprehensive UI framework here which I’m now using for similar purposes in Electron app (although note that this comes free for development usage but at a price for commercial usage).

There is a node.js version.

Run the command …
npm info jqwidgets-framework

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework

and in your Electron app root directory run …

npm install jqwidgets-framework

Note that the entire framework is then installed in your node_modules folder but you can eject some unused widgets and demos later.

npm framework.

Some Showcase Demos.

I would then start by focussing on Angular demos.

Of course there are several other UI frameworks around (search “node MVC”) , but this is the most comprehensive I have found for my needs.

1 Like

That’s one use, yeah. Think about what Twitter and Pinterest do: as you perform navigation actions, the page you’re on changes without you having to actually go to a different location on the server. Sometimes, the URL will change, but unless you click on a hypertext link (in a tweet or a post) that tells your browser to make a new page request, most actions (expanding a tweet thread, scrolling down, clicking on a Pin) just ask the server for new data and rewrite the DOM to display it.

You don’t need fancy code to rewrite the DOM. You can do it with vanilla JavaScript. Any newbie coder can make a single-page application with a button and a function that calls document.append(), if all you want is to drop new elements into a page. You don’t get much functionality that way, so it can help to use a library that already knows how to make the changes you’re going to need. React, Angular, Vue, Aurelia, JQuery, and others all tackle this same goal: how to process your data and keep your page updated.

But I would like to write the pages/contents in their own html files for my own clarity and finally integrate/include them into a single page app.

Sure. You can always use fs to read your HTML files and then insert their contents into the elements you create in JavaScript.

1 Like

Perhaps I was jumping too far ahead to suggest an advanced framework such as jqwidgets.
This tutorial might help you understand DOM basics.

1 Like

Hehe, thank you all so much.
Yeah I know how to manipulate, change my content with javascript (or rather with jquery).
My problem with this is the complexity of my HTML structure in one file, or the entanglement of javscript and html in a single file.
I remember the time when you wrote php and html in a single file.
That was awfull. :smiley:

So I understand the logic behind this.
You call a website (or in my case the electron app).
The default page loads/shows up with every section/site in the background.

Now, the user clicks on a link, or another section.
With jquery the content is exchanged with the already loaded content, or possible AJAX returns.
I know how to do that (even if only primitive :smiley: ).

But I’ve read a lot about the angular you mentioned in my research. Just found it too extensive for what I would like to achieve. I will read myself in there more precisely. :slight_smile:

And that’s what I’d like to prevent and would like to split in different files, even if they are loaded together in a single call:

<body>
<main role="main">

    <section id="main_page">
        ...
    </section>
    
    <section id="page2">
        ...
    </section>

    <section id="page3">
        ...
    </section>

    <section id="page4">
        ...
    </section>

    <section id="page5">
        ...
    </section>

</main>
</body>

Actually, although I know it departs from usual electron practices, I am right now using PHP include to concatenate multiple markdown files into a single index.php for rendering. PHP still has its uses. I can then dynamically set the index.php content. But this is for my dev setup.

You might explore this …

https://www.w3schools.com/w3js/w3js_html_include.asp

1 Like

Ah sorry, please don’t misunderstand.
I actually used PHP, too. :slight_smile:
But in PHP I use a template engine with which I can do exactly what I want.
I can “separate” my content pages from the header and footer and pack them into single files.
As soon as my page is loaded, the templates are merged.

Thank you for the link: https://www.w3schools.com/w3js/w3js_html_include.asp
I think this is what I’m looking for. :smiley:

But right now I’m reading myself deeper into Angular and I think this will be right for me.

1 Like