Convert your website into a Desktop App for Windows, Mac, Linux

  • Home
  • Blog
  • Convert your website into a Desktop App for Windows, Mac, Linux
About

Convert your website into a Desktop App for Windows, Mac, Linux

in Only Happened In India, Php, Tips and Tricks

1, Node.js from here: https://nodejs.org/en/download/

2, Install git from here: https://git-scm.com/downloads

Clone this sample project:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

It will download a sample project in your computer and “npm install” to install the required node modules in the project.

main.js

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadURL('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

Whatever you do in this HTML file it will be included in your application.

Now how to convert a website into an app:

mainWindow.loadURL('https://phplift.net/')

This will open your website in the application you can give it to your users to install in computers.

Commands to generate software build

Mac: electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds,
Windows: electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Webview",
Linux: electron-packager . --overwrite --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds,

Edit options as per your requirements.

This is just a simple application demo you can do a lot of things with this framework some amazing demos are available here: https://github.com/hokein/electron-sample-apps

Some desktop apps created on electron framework almost all developers use them is:

1. VS Code

2. Whatsapp Desktop app

3. Slack Desktop app

Leave a Reply