Transform Any Website into Desktop App via Electron
By Yangyu
- 2 minutes read - 380 wordsEnd Result
How it looks (in Ubuntu) in Startup Menu:
How it looks when opened as an App (electron-apps-ubuntu.png)
Motivation
I recently started using a Ubuntu Desktop. However, quite a few apps are missing in Ubuntu.
Therefore, I have to use their web version.
Tools
- ElectronJS: https://www.electronjs.org/
- Unity Launchers And Desktop Files: https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles
How to Setup
Install Electron Globally
Electron runs chrome internally, but we can run it like a desktop app. ()
Firstly, you need to make sure that you have electron installed globally. For my case (I use yarn), I do:
yarn global add electron
then make sure that it’s in your path. For my case, it’s:
➜ which electron
/home/songyy/.yarn/bin/electron
Create Electron Executable Folder
Let’s take Feedly(https://feedly.com/) for example.
Create Folder
Create a separate folder, let’s call it feedly
. Let’s say we created the app in path
/home/songyy/fast/desktop-apps/feedly
.
Create JS File
Then, create an index.js
file within this folder:
'use strict';
const {app, BrowserWindow} = require('electron')
function createWindow() {
const win = new BrowserWindow({
webPreferences: {
}
})
win.loadURL('https://www.feedly.com/')
}
app.whenReady().then(createWindow)
depends on what your target webapp is, you might want to put the URL in win.loadURL
differently.
Run it with Electron
in the folder where you’ve created the index.js
file, run:
electron .
The electron app would run without problem, loading the target website
Create a Desktop Launcher
Make Sure Launcher Folder Exist
In Ubuntu, a desktop launcher is defined via a .desktop
file. A good location is ~/.local/share/applications/
.
If this location doesn’t exist in your Ubuntu machine, you can create it via:
➜ mkdir -p ~/.local/share/applications/
Find a good Icon
You need to find a good icon for the Desktop App, so that it’s easy to identify the App. For the case of Feedly, you can
simply search for feedly icon png
, and you’ll be able to find some good result.
Copy this file into your feedly folder for the Electron execution. For my case, it’s in path
/home/songyy/fast/desktop-apps/feedly/icon.png
Create Desktop Launcher
After that, create the desktop file in the launcher folder:
➜ cat > ~/.local/share/applications/Feedly.desktop
[Desktop Entry]
Version=0.1
Name=Feedly
Comment=Feedly Website
Exec=/home/songyy/.yarn/bin/electron /home/songyy/fast/desktop-apps/feedly
Icon=/home/songyy/fast/desktop-apps/feedly/icon.png
Terminal=false
Type=Application
Categories=Utility;Application;
Note that you need to change accordingly, under the Exec
part
All Done
Congrats, now you have an super light-weighted desktop app for the web app now.