CODEWITHSUNDEEP
node.jselectron
gbz
gbz

Reputation: 138

How can I add web interface to an electron app?

I want to build a desktop app using Electron. I know that Electron handles both the server and the interface part and I am thinking to build the app in such a way that these two parts to be clearly delimited.

What I want to do in the future is to build a website, most likely using React and use the Electron app as a server.

Since Electron is based on NodeJs I don't see why this wouldn't be possible. I plan to expose some APIs and the web app to use them. So a part of the desktop app will be the server for the web app too.

My questions are:

How easy is it to achieve this?

And how does this approach stands in terms of security concerns?

Upvotes: 2

Views: 2408

Answers (1)

joshwilsonvu
joshwilsonvu

Reputation: 2679

How easy is it to achieve this?

Usually, pretty easy. All you need to do is create an electron file that starts your Node.js server on port X, opens a BrowserWindow, and instructs the BrowserWindow to load the server url: http://127.0.0.1:X.

However, a traditional web server usually has a different architecture from an Electron app backend. Web servers often connect to a central database containing data for all users, while an Electron backend only manages one user's data. This has a few implications:

  • Where an Electron app backend may keep persistent data about its one user, a web app backend will probably keep a database of data about all of its users.
  • If an Electron app doesn't keep persistent data but uses the filesystem to read and write files, a web app will probably have to implement virtual filesystems with a database, or else use a sandboxed filesystem with something like the Filesystem API.
  • If an Electron app does neither of the above, consider if your application even needs a backend. It may be possible to create a web app using only static files with something like Gatsby, which would probably be better off as a web page than an Electron app.

And how does this approach stands in terms of security concerns?

It's possible to set up your server to listen on localhost, or 127.0.0.1. This means your data flows solely through the device and not across the network, which prevents outsiders from intercepting it unless they have already compromised the device.

Upvotes: 1

Related Questions