Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to run nodejs app as a desktop application using electron

    @gaurav.gautam
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 468
    Comment on it

    Hi All,
    While working on one of my project we had a requirement where we need to run our web application as a desktop application and to do that we found a solution called Electron which can w=be used as an installer and it run on various plate forms like MAC, Windows and Linux.

     

    Now what is Electron and how we can use it to create an installer to run our app as a desktop application on various platform?

    Electron is a tool which come with built-in io.js and Chromium which is built on V8 JavaScript Engine which is an open source JavaScript engine developed by The Chromium Project for the Google Chrome web browser.

    Electron relies on the Squirrel framework and It takes care of creating the actual package, signing it, dealing with updates, and many more things. 

    So the first this you need to have to get started is to install the Electron Packager and to do that you need to open the cmd/terminal (in case of mac) and run the command :

    1. npm run i electron-packager --save -dev

    Bellow is the code for the sample app that you can go ahead and create :

    in Index.html we have :

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>Hello World!</title>
    6.   </head>
    7.   <body>
    8.     <h1>Hello World!</h1>
    9.     We are using node <script>document.write(process.versions.node)</script>,
    10.     Chromium <script>document.write(process.versions.chrome)</script>,
    11.     and Electron <script>document.write(process.versions.electron)</script>.
    12.   </body>
    13. </html>

     

    In the package.json we have :

    1. {
    2.   "name": "electron-quick-start",
    3.   "version": "1.0.0",
    4.   "description": "A minimal Electron application",
    5.   "main": "main.js",
    6.   "scripts": {
    7.     "start": "electron main.js"
    8.   },
    9.   "repository": {
    10.     "type": "git",
    11.     "url": "git+https://github.com/electron/electron-quick-start.git"
    12.   },
    13.   "keywords": [
    14.     "Electron",
    15.     "quick",
    16.     "start",
    17.     "tutorial"
    18.   ],
    19.   "author": "GitHub",
    20.   "license": "CC0-1.0",
    21.   "bugs": {
    22.     "url": "https://github.com/electron/electron-quick-start/issues"
    23.   },
    24.   "homepage": "https://github.com/electron/electron-quick-start#readme",
    25.   "devDependencies": {
    26.     "electron-prebuilt": "^0.37.0" 
    27.   }
    28. }

     

    and to run this we need to navigate to electron-quick-start folder and then run command

    1. npm install

    and than to run the app, you need to run the command

    1. npm start
    nodejs app electron electron-builder electron-packager mean stack
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: