How to run a web app on your desktop

2016-04-19

379 words, ~3min reading time

code desktop electron linux web

Running a web app or a website on your desktop is nowadays much easier thanks to GitHub's Electron.

Why would someone want this?

Well... This is a good question. For me there are only two reasons: you can start it from your launcher and it's handled as its own application. But thats not why I'm writing this guide. My motvation is simple: It works.

Installing required software

For this guide you need npm and git. Search the wide web for installation instructions for your operating systems.

You need also a editor. Choose one you like. The lines of code you're gonna write are just a few.

Cloning the GitHub Repo

Fire up a terminal and clone the GitHub quickstart repo of Electron.
= your-web-app=
and change into that directory
= your-web-app=

Installing dependencies

Next install the npm dependencies with
= install=
and test the quick start app
= start=
Normally you should see a window with the dimension 800x600 and on the left side a line of text, on the right the developer console.

Editing the main.js

First were editing the JavaScript file to disable the developer console showing on startup.

Open the main.js file in the editor of your choice and search for the following line (around line 21 in the createWindow() function):

mainWindow.webContents.openDevTools();

and comment it out:

// mainWindow.webContents.openDevTools();

Now we're makeing the application window a little bit heighter and wider. Search for the line (around line 15 in the createWindow() function):

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

and add to both values 200px so it looks like this:

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

Run now again npm start and enjoy the cleaner and bigger window.

Editing the index.html

Now open the index.html file delete everything and paste the following lines in there:

<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
  <head>
    <meta charset="UTF-8">
    <title>Your Title</title>
  </head>
  <body style="width: 100%; height: 100%;">
    <webview src="https://your-web-app.com" style="width: 100%; height: 100%;" allowpopups plugins>
  </body>
</html>

Change the title and the src to match the web app you want to bring to your desktop.

Now run your app with npm start and here you have a web app on your desktop.

Installing electron

For creating a desktop application install electron:
= install -g electron=
Now you can start your app with electron .

Creating a launcher

Create now a file your-web-app.desktop and open it in your editor:

[Desktop Entry]
Encoding=UTF-8
Version=1.0
Name=Your Web App
Comment=A comment about your web app
Exec=electron /path/to/your/app
Icon=appname.png
Type=Application
Categories=Network;
Terminal=false

Search and download now the icon for your application. The higher the resolution the better. Make sure you get a png of svg.

Now move the icon to ~/.local/share/icons/ and the .desktop file to ~/.local/share/applications/.

Now the icon should appear in your launcher (if not log out and in again). If you click on it the web app should start.

I would like to hear what you think about this post. Feel free to write me a mail!

Reply by mail