• PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • PHP Jobs
  • Advertisement
PHP Lift
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Youtube
    • RSS
Convert your website into a Desktop App for Windows, Mac, Linux
Home
Node.js

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

August 19th, 2020 Huzoor Bux Framework, Node.js 0 comments

Facebook Twitter Google+ LinkedIn Pinterest

Your website users can install applications to their PC on Mac, Windows & Linux. Your app can be accessed from the Start menu, desktop, or dock. Its super simple to convert your website into cross-platform desktop applications using JavaScript, HTML, and CSS YES!! JavaScript, HTML and CSS.

Mac App
Windows App

I am using the Electron framework it’s based on Node.js and Chromium.

Installation

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 the 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 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

and many more.

I hope you like this tutorial feel free to share your suggestions in comments.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • chromium
  • cross platform
  • desktop apps
  • electron
  • iOS Apps
  • linux apps
  • node.js
  • windows apps
Facebook Twitter Google+ LinkedIn Pinterest
Next article PHP Contact Form with Google reCAPTCHA V3
Previous article How to Integrate PayPal Payment System in PHP & MySQL

Huzoor Bux

I am a PHP Developer

Related Posts

6 Reasons Laravel is the Top PHP Framework in the Web Development Industry Framework
February 1st, 2021

6 Reasons Laravel is the Top PHP Framework in the Web Development Industry

Laravel vs Codeigniter which is better for Development Framework
September 29th, 2020

Laravel vs Codeigniter which is better for Development

8 Best PHP Frameworks Of 2017 For Developers Framework
January 15th, 2018

8 Best PHP Frameworks Of 2017 For Developers

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Advertisement
Recent Posts
  • Stripe Payment Gateway Charge Credit Card with PHP
  • How to building responsive WordPress theme using Bootstrap
  • 6 Reasons Laravel is the Top PHP Framework in the Web Development Industry
  • 9 Best Programming languages you should learn in 2021
  • 12 Reasons to Choose PHP for Developing Website
Categories
  • API
  • Bootstrap
  • CSS
  • CSS 3
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • WordPress
Weekly Tags
  • PHP
  • api
  • How to
  • PHP Basics
  • Programming Habits
  • HTML5
  • PHP framework
  • Download
  • laravel
  • css
  • About
  • Privacy Policy
  • Back to top
© PHPLift 2020. All rights reserved.