{"id":2619,"date":"2023-04-13T21:01:13","date_gmt":"2023-04-13T19:01:13","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2619"},"modified":"2023-04-13T21:01:13","modified_gmt":"2023-04-13T19:01:13","slug":"how-to-build-desktop-applications-with-electron-js","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/04\/13\/how-to-build-desktop-applications-with-electron-js\/","title":{"rendered":"How to build Desktop Applications with Electron.js"},"content":{"rendered":"\n

Electron.js is a popular framework for building desktop applications using web technologies such as JavaScript, HTML, and CSS. Here are the steps to get started with building desktop applications using Electron.js:<\/p>\n\n\n\n

  1. Install Node.js and\u00a0npm<\/code>\u00a0(Node Package Manager) : <\/strong>Electron.js is built on top of Node.js. Therefore, we need to have Node.js installed on our machine. You can download them from the\u00a0official Node.js website<\/a>.<\/li>
  2. Install Electron.js:<\/strong> After installing Node.js, we can install Electron.js by running the following command in our terminal:<\/li><\/ol>\n\n\n\n
    npm install electron --save-dev\r<\/code><\/pre>\n\n\n\n
    This will install the latest version of Electron.js as a development dependency in your project.<\/p>\n\n\n\n
    3.  Create a project directory: <\/strong> Let us create a new directory for our Electron.js project and navigate to that directory in    our terminal.<\/p>\n\n\n\n
    mkdir electron-prj\r\ncd electron-prj<\/code><\/pre>\n\n\n\n
    4. Initialize your project: <\/strong>Run the following command to initialize our project with a package.json file:<\/p>\n\n\n\n
    npm init -y\r<\/code><\/pre>\n\n\n\n
    This will create a package.json file in your project directory.<\/p>\n\n\n\n
    5. Create the main.js file: <\/strong> Create a file named main.js in our project directory. This will be the entry point for our Electron.js application.<\/p>\n\n\n\n
    touch main.js<\/code><\/pre>\n\n\n\n
    6. Add the following code to your main.js file:<\/strong><\/p>\n\n\n\n
    const { app, BrowserWindow } = require('electron')\r\n\r\nfunction createWindow () {\r\n  const win = new BrowserWindow({\r\n    width: 800,\r\n    height: 600,\r\n    webPreferences: {\r\n      nodeIntegration: true\r\n    }\r\n  })\r\n\r\n  win.loadFile('index.html')\r\n}\r\n\r\napp.whenReady().then(() => {\r\n  createWindow()\r\n\r\n  app.on('activate', () => {\r\n    if (BrowserWindow.getAllWindows().length === 0) {\r\n      createWindow()\r\n    }\r\n  })\r\n})\r\n\r\napp.on('window-all-closed', () => {\r\n  if (process.platform !== 'darwin') {\r\n    app.quit()\r\n  }\r\n})\r\n<\/code><\/pre>\n\n\n\n
    This code sets up a basic Electron.js application with a window that loads an index.html file.<\/p>\n\n\n\n
    7. Create the index.html file: <\/strong>Create an index.html file in our project directory. This file will be loaded in the main window of our Electron.js application.<\/p>\n\n\n\n
    The folder structure should look like this: <\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    8.  Add the corresponding HTML, CSS, and JavaScript code to our index.html file.<\/strong><\/p>\n\n\n\n
    9. Update the\u00a0package.json<\/code>\u00a0file with the script below : <\/strong><\/p>\n\n\n\n
    \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\r\n    \"start\": \"electron .\"\r\n  },<\/code><\/pre>\n\n\n\n
    10. Run our Electron.js application: <\/strong>Run the following command to start the Electron.js application:<\/p>\n\n\n\n
    npm start\r<\/code><\/pre>\n\n\n\n
    This will launch our Electron.js application.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Electron.js is a popular framework for building desktop applications using web technologies such as JavaScript, HTML, and CSS. Here are the steps to get started with building desktop applications using Electron.js: Install Node.js and\u00a0npm\u00a0(Node Package Manager) : Electron.js is built on top of Node.js. Therefore, we need to have Node.js installed on our machine. You […]<\/p>\n","protected":false},"author":1,"featured_media":2621,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[364],"tags":[669,671,674,668,670,672,673],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2619"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2619"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2619\/revisions"}],"predecessor-version":[{"id":2622,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2619\/revisions\/2622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2621"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}