Electron Build Desktop Apps HTML\CSS\JS | Dialog, Sessions and Cookies 03

List Of Content





In this tutorial, we are going to cover opening dialogs from the renderer process so we can open files or show popup messages to the users, also how we can use cookies for setting them and fetching them so we can save data between multiple sessions and for those of you are wondering of a way to show web pages inside your app, you can user WebViews so we will cover them deeply.

if you do not know about main and render processes check out the last Tutorial.

Opening Dialogs

There a specific Electron's module for opening and managing dialog popups, if you need to access it from the rendering process make sure to require it from the remote module 

const remote = require('Electron').remote;
const dialog = remote.dialog;

 It contains very self-explained methods that will easily allow to open and interact with your dialogs, so let say we need to open a simple Message Box

Dialog.showMessageBox({message: "I'm a Dialog Message Box", title: 'Hello World'},() => {
   //the callback going to be triggered once the OK Button is pressed, so you can do something
Run the Application you should see a message box popsup

and it is as simple as that you can open and manage dialogs, please consider reading the DOCS, for more detailed information.

you can also open (Open File Dialogs or Saving Dialogs).

Sessions and Cookies

When you run your Electron app a default Session is going to initialized on startup so you can use for managing your sessions data or create cookies for multiple sessions usage, or you can create a custom sessions for specific windows, so we are going to get the default session and access the cookies

let session = remote.session;
//Default Session
let mainSession = session.defaultSession;
//The we can either set or fetch cookies, since no cookies we are going to set them
        name: "foo",
        value: "bar",
        url: "http://localhost/"
    err => {
        if (err) console.log("Error ", err);
//Name, value and url are required for setting a cookie, if not an error is going to be thrown
//then there is a callback when the cookie is created 

Open the devtools to check if any error message has been thrown while setting cookies, if no errors so you have successfully created a cookie with the Specified Parameters, you can get the cookies and filter through them using the get() method

session.defaultSession.cookies.get({}, (err, cookies) => {
    if (err) console.error(err);
//Here we are getting all the cookies without filtering, if need to just pass in the name or value or any other parameter to the Empty Object, then on the Callback we get an Array of Cookies

And as you can see it is Super easy to get and manipulate Sessions and Cookies.

Web Views (load Web Pages)

Sometimes you need to grab a webpage let's say for (exp: http://electronjs.org) therefore there is a specific module for that 

//We Initialize a New View
let view = new BrowserView({
    webPreferences: {
        nodeIntegration: false

let mainWindow = remote.getCurrentWindow(); ///< We get the Main Window
mainWindow.setBrowserView(view); ///< Then We Set the View
///< Also we can Set the Width and Height and Position of the View on the Window
view.setBounds({ x: 0, y: 0, width: 400, height: 300 });  
//Lastly we load the URL

Just Start your application, wait for a second and you should see the Electron's Home Page Loaded into the Upper corner of your window, you can use it for more complicated Usage

What's Next

We have covered the basic things about electron and the modules that will allow you create applications very easily, but still some topics to cover before finishing.

In the Next one, we will see how we can customize Menu Bar for our own settings and configurations Also How we can Package/Build and Ship our App so it can be installed on target Platforms Linux, Windows, and MAC OS X

Share Tutorial

Made With By

Ipenywis Founder, Game/Web Developer, Love Play Games