Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Electron App Deployment Tutorial

By Gary simon - Nov 29, 2017

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial

 

With our Bitcoin Alert app all finished up, it's now time to deploy it so that others can use our app on multiple operating systems (Windows, Mac and Linux). 

Fortunately, the process of deploying an Electron app is rather straight forward and requires installing a specific package for packaging.

Let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

..video coming soon..

Installing electron-packager

We're going to use a package called electron-packager to create the OS-specific builds of our Electron app. We first have to install it at the command line within the project folder:

$ npm install electron-packager --save-dev

Modifying our Package.json File

The packager uses information such as the name, version, description, etc.. in the package.json file in the root directory.

We're also going to create 3 different scripts, each for packaging the app for the 3 different operating systems (Win, Mac and Linux). These scripts were derived from this great tutorial.

{
  // Other properties removed for brevity

  "scripts": {
    "start": "electron .",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . electron-tutorial-app --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=\"CryptoApp\"",    
    "package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"   
  },

  // Other properties removed for brevity
  }
}

The 3 new scripts are:

  • package-mac
  • package-win
  • package-linux

Also, notice that within each, there's a reference to a graphics file. Since I'm using Windows, I'm going to create the folder and simply copy/paste/rename the /assets/images/btc.png to /assets/icons/win/icon.ico.

Running one of the New Scripts

Once you've updated your package.json file and created the necessary icon files, you're now ready to create a build of your app!

In the console, type:

$ npm run package-win    (or package-mac, package-linux)

If it all goes smoothly, there will be a new folder within your project called release-builds.

Inside of it resides a folder with the name of the app, and then all of the app files, including the actual executable (on Windows, at least).

Run it to ensure the app works.

Here's a look at the project running on my machine (Windows 10) working exactly as it should!

Conclusion

Hopefully, you've learned a lot throughout this beginner's course! Going forward, I will be covering intermediate to advanced topics as it pertains to Electron development.

 

 


Share this post




Say something about this awesome post!