One place for hosting & domains

      How To Create SSH Keys with OpenSSH on macOS, Linux, or Windows Subsystem for Linux


      Introduction

      When setting up a remote Linux server, you’ll need to decide upon a method for securely connecting to it. While passwords are one way of verifying a user’s identity, passwords have multiple vulnerabilities and can be cracked by a brute force attack. Secure Shell keys — better known as SSH keys — are often used instead of passwords, as they offer a more secure method of connecting to remote Linux servers. As part of the Secure Shell cryptographic network protocol, SSH keys also enable users to securely perform network services over an unsecured network, such as delivering text-based commands to a remote server or configuring its services.

      This tutorial will guide you through the steps of creating SSH keys with OpenSSH, a suite of open source SSH tools, on macOS and Linux, as well as on Windows through the use of the Windows Subsystem for Linux. It is written for an audience that is just getting started with the command line and will provide guidance on accessing the terminal on a personal computer. After completing this tutorial, you will have SSH keys that can be used to securely set up a server in the tutorial How To Set Up an Ubuntu 20.04 Server on a DigitalOcean Droplet that is part of the Introduction to the Cloud Curriculum (coming soon).

      If you are already familiar with the command line and looking for instructions on using SSH to connect to a remote server, please see our collection of tutorials on Setting Up SSH Keys for a range of Linux operating systems.

      Prerequisites

      To complete this tutorial, you will need:

      • A local machine running one of the following operating systems: macOS, Linux, or Windows with Windows Subsystem for Linux installed. If you are using Windows, you can find instructions for downloading or updating the Windows Subsystem for Linux on Microsoft’s documentation page. Note that while OpenSSH should work for a range of Linux distributions, this tutorial has been tested using Ubuntu 20.04.

      Note: If you are looking for instructions on how to create SSH keys on a Windows machine that does not have the Windows Subsystem for Linux, please visit our product documentation How to Create SSH Keys with PuTTY on Windows.

      • Some familiarity with working with a terminal and the command line. If you need an introduction to working with terminals and the command line, you can visit our guide A Linux Command Line Primer (coming soon).

      Step 1 — Understanding SSH Keys

      SSH keys are two long strings of characters that can be used to authenticate the identity of a user requesting access to a remote server. These keys are generated by the user on their local computer using a SSH utility. One key is private and stored on the user’s local machine. The other key is public and shared with the remote server or any other entity the user wishes to securely communicate with.

      When a user requests to connect to a server with SSH, the server sends a message encrypted with the public key that can only be decrypted by the associated private key. The user’s local machine then uses its private key to attempt to decrypt the message. If the message is successfully decrypted, the server grants the user access without the need of a password. Once authenticated, users can launch a remote shell session in their local terminal to deliver text-based commands to the remote server.

      In the next step, you will open a terminal on your computer so that you can access the SSH utility used to generate a pair of SSH keys.

      Step 2 — Opening a Terminal on Your Computer

      A terminal allows you to interact with your computer through text-based commands rather than a graphical user interface. The way you access the terminal on your computer will depend on what type of operating system you are using.

      On machines running macOS, the Terminal application is typically located in the Utilities folder inside the Applications folder. You can also find it by searching for “terminal” in the Search Spotlight.

      If you are working on a Linux computer, your distribution’s default terminal application is also typically located in the Utilities folder inside the Applications folder. You can also find it by searching for “terminal” with the Desktop search functionality.

      If you are working on a Windows machine running Windows Subsystem for Linux, a Linux terminal should open immediately after installation. You can also find it by searching for “Ubuntu” with the Desktop search functionality.

      Once you have located your system’s terminal application, open up a new terminal window. Your terminal should display your user name, a dollar sign ($), and a cursor. This is where you will begin to type commands to tell the terminal what to do.

      In the next step, you will enter a text-based command to generate a pair of SSH keys.

      Step 3 — Generating Keys With OpenSSH

      Your macOS or Linux operating system should have the standard OpenSSH suite of tools already installed. This suite of tools includes the utility ssh-keygen, which you will use to generate a pair of SSH keys.

      Type the following command into your terminal:

      You will then be prompted to select a location for the keys. By default, the keys are stored in the ~/.ssh directory with the filenames id_rsa for the private key and id_rsa.pub for the public key. Using the default locations allows your SSH client to automatically find your SSH keys when authenticating, so we recommend accepting these default options. To do so, press ENTER:

      Output

      Generating public/private rsa key pair. Enter file in which to save the key (/home/sammy/.ssh/id_rsa):

      Warning: If you have previously generated a key pair, you will be prompted to confirm that you actually want to overwrite the existing key:

      Output

      /home/sammy/.ssh/id_rsa already exists. Overwrite (y/n)?

      If you choose to overwrite the key on disk, you will not be able to authenticate using the previous key anymore. Selecting “yes” is an irreversible destructive process.

      If you’re certain that you want to overwrite the existing key on disk, you can do so by pressing Y and then ENTER.

      If you choose the default location, your public key will be located in /home/sammy/.ssh/id_rsa.pub and your private key will be located in /home/sammy/.ssh/id_rsa. Note that in your filepath, sammy will be replaced with your username.

      After selecting a location for the key, you’ll be prompted to enter an optional passphrase which encrypts the private key file on disk.

      If you enter a passphrase, you will have to provide it every time you use this key (unless you are running SSH agent software that stores the decrypted key). We recommend using a passphrase, but you can just press ENTER to bypass this prompt:

      Output

      Created directory '/home/sammy/.ssh'. Enter passphrase (empty for no passphrase): Enter same passphrase again:

      Following that final prompt, your system will generate the SSH key pair:

      Output

      Your identification has been saved in /home/sammy/.ssh/id_rsa. Your public key has been saved in /home/sammy/.ssh/id_rsa.pub. The key fingerprint is: a9:49:EX:AM:PL:E3:3e:a9:de:4e:77:11:58:b6:90:26 sammy@203.0.113.0 The key's randomart image is: +--[ RSA 2048]----+ | ..o | | E o= . | | o. o | | .. | | ..S | | o o. | | =o.+. | |. =++.. | |o=++. | +-----------------+

      You now have a public and private key that you can use to authenticate.

      Conclusion

      Congratulations, you have now generated a pair of SSH keys. These keys can be used to securely connect with a remote server and are necessary for the tutorial How To Set Up an Ubuntu 20.04 Server on a DigitalOcean Droplet that follows this tutorial in the Introduction to the Cloud Curriculum (coming soon).

      For a deeper dive on working using SSH, please visit our guide SSH Essentials: Working With SSH Servers, Clients, and Keys.



      Source link

      How To Install and Use Homebrew on macOS


      Introduction

      The command line interface is a non-graphical way to interact with your computer. Instead of clicking buttons with your mouse, you’ll type commands as text and receive text-based feedback. The command line, also known as a shell, lets you automate many tasks you do on your computer daily, and is an essential tool for software developers.

      While the command line interface on macOS has a lot of the functionality you’d find in Linux and other Unix systems, it does not ship with a good package manager. A package manager is a collection of software tools that work to automate software installations, configurations, and upgrades. Package managers keep the software they install in a central location and can maintain all software packages on the system in formats that are commonly used.

      Homebrew is a package manager for macOS which lets you install free and open-source software using your terminal. You’ll use Homebrew to install developer tools like Python, Ruby, Node.js, and more.

      In this tutorial you’ll install and use Homebrew on your Mac.

      Prerequisites

      You will need a macOS computer running High Sierra or higher with administrative access and an internet connection.

      Step 1 — Using the macOS Terminal

      To access the command line interface on your Mac, you’ll use the Terminal application provided by macOS. Like any other application, you can find it by going into Finder, navigating to the Applications folder, and then into the Utilities folder. From here, double-click the Terminal application to open it up. Alternatively, you can use Spotlight by holding down the COMMAND key and pressing SPACE to find Terminal by typing it out in the box that appears.

      macOS Terminal

      To get more comfortable using the command line, take a look at An Introduction to the Linux Terminal. The command line interface on macOS is very similar, and the concepts in that tutorial are directly applicable.

      Now that you have the Terminal running, let’s install some additional tools that Homebrew needs.

      Xcode is an integrated development environment (IDE) that is comprised of software development tools for macOS. You won’t need Xcode to use Homebrew, but some of the software and components you’ll want to install will rely on Xcode’s Command Line Tools package.

      Execute the following command in the Terminal to download and install these components:

      You’ll be prompted to start the installation, and then prompted again to accept a software license. Then the tools will download and install automatically.

      You can now install Homebrew.

      Step 3 — Installing and Setting Up Homebrew

      To install Homebrew, you’ll download an installation script and then execute the script.

      First, download the script to your local machine by typing the following command in your Terminal window:

      • curl -fsSL -o install.sh https://raw.githubusercontent.com/Homebrew/install/master/install.sh

      The command uses curl to download the Homebrew installation script from Homebrew’s Git repository on GitHub.

      Let’s walk through the flags that are associated with the curl command:

      • The –f or --fail flag tells the Terminal window to give no HTML document output on server errors.
      • The -s or --silent flag mutes curl so that it does not show the progress meter, and combined with the -S or --show-error flag it will ensure that curl shows an error message if it fails.
      • The -L or --location flag will tell curl to handle redirects. If the server reports that the requested page has moved to a different location, it’ll automatically execute the request again using the new location.
      • The -o switch specifies a local filename for the file.

      Before running a script you’ve download from the Internet, you should review its contents so you know what the script will do. Use the less command to look at the installation script:

      Once you’re comfortable with the contents of the script, execute the script with the bash command:

      The installation script will explain what it will do and will prompt you to confirm that you want to do it. This lets you know exactly what Homebrew is going to do to your system before you let it proceed. It also ensures you have the prerequisites in place before it continues.

      You’ll be prompted to enter your password during the process. However, when you type your password, your keystrokes will not display in the Terminal window. This is a security measure and is something you’ll see often when prompted for passwords on the command line. Even though you don’t see them, your keystrokes are being recorded by the system, so press the RETURN key once you’ve entered your password.

      Press the letter y for “yes” whenever you are prompted to confirm the installation.

      Once the installation process is complete, you will want to put the directory Homebrew uses to store its executables at the front of the PATH environment variable. This ensures that Homebrew installations will be called over the tools that macOS includes.

      The file you’ll modify depends on which shell you’re using. If you’re using Bash, you’ll use the file ~/.bash_profile:

      However, if you’re using ZSH, you’ll open the file ~/.zshrc.

      Once the file opens up in the Terminal window, add the following lines to the end of the file:

      ~/.bash_profile

      # Add Homebrew's executable directory to the front of the PATH
      export PATH=/usr/local/bin:$PATH
      

      The first line is a comment that will help you remember what this does if you open this file in the future.

      To save your changes, hold down the CTRL key and the letter O, and when prompted, press the RETURN key. Then exit the editor by holding the CTRL key and pressing X. This will return you to your Terminal prompt.

      To activate these changes, close and reopen your Terminal app. Alternatively, use the source command to load the file you modified.

      If you modified .bash_profile, execute this command:

      If you modified .zshrc, execute this command:

      Once you have done this, the changes you have made to the PATH environment variable will take effect. They’ll be set correctly when you log in again in the future, as the configuration file for your shell is executed automatically when you open the Terminal app.

      Now let’s verify that Homebrew is set up correctly. Execute this command:

      If no updates are required at this time, you’ll see this in your Terminal:

      Output

      Your system is ready to brew.

      Otherwise, you may get a warning to run another command such as brew update to ensure that your installation of Homebrew is up to date. Follow any on-screen instructions to fix your environment before moving on.

      Step 4 — Installing, Upgrading, and Removing Packages

      Now that Homebrew is installed, use it to download a package. The tree command lets you see a graphical directory tree and is available via Homebrew.

      Install tree with the brew install command:

      Homebrew will update its list of packages and then download and install the tree command:

      Output

      Updating Homebrew... ==> Downloading https://homebrew.bintray.com/bottles/tree-1.8.0.catalina.bottle.tar.gz ######################################################################## 100.0% ==> Pouring tree-1.8.0.catalina.bottle.tar.gz 🍺 /usr/local/Cellar/tree/1.8.0: 8 files, 117.2KB

      Homebrew installs files to /usr/local by default, so they won’t interfere with future macOS updates. Verify that tree is installed by displaying the command’s location with the which command:

      The output shows that tree is located in /usr/local/bin:

      Output

      /usr/local/bin/tree

      Run the tree command to see the version:

      The version prints to the screen, indicating it’s installed:

      Output

      tree v1.8.0 (c) 1996 - 2018 by Steve Baker, Thomas Moore, Francesc Rocher, Florian Sesser, Kyosuke Tokoro

      Occasionally, you’ll want to upgrade an existing package. Use the brew upgrade command, followed by the package name:

      You can run brew upgrade with no additional arguments to upgrade all programs and packages Homebrew manages.

      When you install a new version, Homebrew keeps the older version around. After a while, you might want to reclaim disk space by removing these older copies. Run brew cleanup to remove all old versions of your Homebrew-managed software.

      To remove a package you’re no longer using, use brew uninstall. To uninstall the tree command, execute this command:

      The output shows that the package was removed:

      Output

      Uninstalling /usr/local/Cellar/tree/1.8.0... (8 files, 117.2KB)

      You can use Homebrew to install desktop applications too.

      Step 5 — Installing Desktop Applications

      You’re not restricted to using Homebrew for command-line tools. Homebrew Cask lets you install desktop applications. This feature is included with Homebrew, so there’s nothing additional to install.

      To use Homebrew to install Visual Studio Code, execute the following command:

      • brew cask install visual-studio-code

      The application will install:

      Output

      Updating Homebrew... ==> Auto-updated Homebrew! Updated 1 tap (homebrew/cask). ==> Updated Casks abstract cacher chirp sipgate-softphone ==> Downloading https://update.code.visualstudio.com/1.48.2/darwin/stable ==> Downloading from https://az764295.vo.msecnd.net/stable/a0479759d6e9ea56afa657e454193f72aef85bd0/VSC ######################################################################## 100.0% ==> Verifying SHA-256 checksum for Cask 'visual-studio-code'. ==> Installing Cask visual-studio-code ==> Moving App 'Visual Studio Code.app' to '/Applications/Visual Studio Code.app'. ==> Linking Binary 'code' to '/usr/local/bin/code'. 🍺 visual-studio-code was successfully installed!

      You’ll find the application in your Applications folder, just as if you’d installed it manually.

      To remove it, use brew cask uninstall:

      • brew cask uninstall visual-studio-code

      Homebrew will remove the installed software:

      Output

      ==> Uninstalling Cask visual-studio-code ==> Backing App 'Visual Studio Code.app' up to '/usr/local/Caskroom/visual-studio-code/1.48.2/Visual St ==> Removing App '/Applications/Visual Studio Code.app'. ==> Unlinking Binary '/usr/local/bin/code'. ==> Purging files for version 1.48.2 of Cask visual-studio-code

      It performs a backup first in case the removal fails, but once the program is fully uninstalled, the backup is removed as well.

      Step 6 — Uninstalling Homebrew

      If you no longer need Homebrew, you can use its uninstall script.

      Download the uninstall script with curl:

      • curl -fsSL -o uninstall.sh https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh

      As always, review the contents of the script with the less command to verify the script’s contents:

      Once you’ve verified the script, execute the script with the --help flag to see the various options you can use:

      The options display on the screen:

      Output

      Homebrew Uninstaller Usage: uninstall.sh [options] -p, --path=PATH Sets Homebrew prefix. Defaults to /usr/local. --skip-cache-and-logs Skips removal of HOMEBREW_CACHE and HOMEBREW_LOGS. -f, --force Uninstall without prompting. -q, --quiet Suppress all output. -d, --dry-run Simulate uninstall but don't remove anything. -h, --help Display this message.

      Use the -d flag to see what the script will do:

      The script will list everything it will delete:

      Output

      Warning: This script would remove: /Users/brianhogan/Library/Caches/Homebrew/ /Users/brianhogan/Library/Logs/Homebrew/ /usr/local/Caskroom/ /usr/local/Cellar/ /usr/local/bin/brew -> /usr/local/bin/brew ==> Removing Homebrew installation... Would delete: ....

      When you’re ready to remove everything, execute the script without any flags:

      This removes Homebrew and any programs you’ve installed with it.

      Conclusion

      In this tutorial you installed and used Homebrew on your Mac. You can now use Homebrew to install command line tools, programming languages, and other utilities you’ll need for software development.

      Homebrew has many packages you can install. Visit the official list to search for your favorite programs.



      Source link

      How To Create Your First Cross-Platform Desktop Application with Electron on macOS


      The author selected the Apache Software Foundation to receive a donation as part of the Write for DOnations program.

      Introduction

      Electron is an open source framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It combines support for building and running applications cross platform on Mac, Windows, and Linux. Many popular desktop applications have been built using Electron, such as Visual Studio Code, WhatsApp, Twitch, Slack, and Figma.

      Electron facilitates designing more complex application features like automatic updates or native menus, which means that developers can focus on the core design of their application. Further, Electron is an open source project maintained by GitHub with an active community of contributors.

      In this tutorial, you’ll first set up a project and install Electron. After that you’ll create your first “Hello World!” application using Electron and customize it. You’ll implement graceful window setup and create new windows for the application. After following all of these steps, you will have an Electron cross-platform desktop application on macOS.

      Prerequisites

      To complete this tutorial, you will need:

      Note: This tutorial was tested on macOS 10.15.3.

      Step 1 — Creating the Project

      First you’ll install Electron to your machine and create the project folder to build the desktop application.

      To start the Electron installation process, create the project folder called hello-world and navigate to the folder with the following commands:

      • mkdir hello-world
      • cd hello-world

      Next, you’ll initiate your project by creating the package.json file.

      The package.json file is an essential part of a Node.js application, it performs the following:

      • Lists the packages that your project depends on.
      • Specifies the package version your project can use.

      To create the package.json file, run the following command:

      You will be asked a series of questions, starting with the package name. You can use the default application name, hello-world, as your package name.

      Then it asks for the version. To use v1.0.0, which comes as default, press ENTER.

      After that, it asks for a description. There you can add a description of your project, something like: hello world application on Electron.js.

      Next, for the entry point, enter main.js.

      The file invoked at the initial run time of application is known as the entry point. In this case, main.js is the entry point of the package.json file.

      For the remaining questions, accept the defaults with ENTER.

      Note: In this tutorial we’re leaving the author and license empty, but you can use your first and last name as the author depending on your project status. The license of your package specifies how others are permitted to use the application, and any restrictions you’re placing on it. The most common licenses are: MIT, BSD-2-Clause, and ISC. For more details, check the full list of SPDX license IDs. From there you can use a preferred license for your project, but this is not mandatory.

      Having followed the prompts you’ll receive the following output:

      Output:

      . . . Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (hello-world) version: (1.0.0) description: hello world application on Electron.js entry point: (index.js) main.js test command: git repository: keywords: author: license: (ISC)

      After that, you’ll be asked to confirm the configuration:

      Output:

      About to write to /hello-world/package.json: { "name": "hello-world", "version": "1.0.0", "description": "hello world application on Electron.js", "main": "main.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes)

      You’ll now have the newly generated package.json file inside your hello-world project directory. Next you’ll install Electron.

      Step 2 — Installing Electron

      Now you’ll implement the configuration of the package.json file and install Electron.

      For that, open the package.json file in your preferred text editor:

      Add the following highlighted line inside the scripts object:

      package.json

      {
        "name": "hello-world",  "version": "1.0.0",
        "description": "hello world application on Electron.js",
        "main": "main.js",
        "scripts": {
          "start": "electron .",
          "test": "echo "Error: no test specified" && exit 1"
       },
        "author": "",
        "license": "ISC"
      }
      

      The scripts property takes an object with as many key/value pairs as desired. Each one of the keys in these key/value pairs is the name of a command that can be run. The corresponding value of each key is the actual command that can be run. Scripts are frequently used for testing, building, and streamlining of the needed commands.

      In this project, you’ll use start as a key and electron . as a value.

      Once you’re done, save and exit the file.

      Next, you’ll install Electron as a development dependency in your project. Run the following command inside your hello-world project directory:

      • npm install --save-dev electron

      After successfully installing the Electron dependency to your project, the package.json file will be similar to this:

      package.json

      {
        "name": "hello-world",
        "version": "1.0.0",
        "description": "hello world application on Electron.js",
        "main": "main.js",
        "scripts": {
          "start": "electron .",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "electron": "^8.2.1"
        }
      }
      

      The dependency property takes an object that has the name and version for each dependency.

      There are two dependency properties dependencies and devDependencies that can be identified with a key difference. The dependencies property is used to define the dependencies that a module needs to run in production. The devDependencies property is usually used to define the dependencies the module needs to run in development. To install the package as devDependencies use the --save-dev flag with your command.

      You’ve installed Electron to your machine and created the project folder to build your application. Now you’ll write your first hello-world application using the Electron framework.

      Step 3 — Writing the “Hello World!” Application

      Let’s start writing your first Electron application.

      Electron operates with two types of processes: the main process (server-side) and the renderer process (client-side). The Electron main process is run on the Node.js runtime.

      For that, you’ll be working with two files: main.js and index.html.

      main.js is your application’s main process and index.html is your Electron application renderer process.

      hello-world
      +-- package.json
      +-- main.js
      +-- index.html
      

      Next, we create a manual browser window and load the content using Electron API calls, which you can use to execute HTML, CSS, JavaScript, and so on.

      First open your main.js file:

      Then add the following line of code to implement the BrowserWindow module:

      main.js

      const { app, BrowserWindow } = require('electron')
      

      This contains two destructuring assignments called app and BrowserWindow, which are required for an Electron module. The Browserwindow module is used to create a new window in your Electron application.

      Next, add the following code to your main.js file:

      main.js

      . . .
      function createWindow () {
        const mainWindow = new BrowserWindow({
          width: 800,
          height: 600
        })
      
        mainWindow.loadFile('index.html')
      }
      
      app.whenReady().then(createWindow)
      

      You add an Electron createWindow function to your hello-world application. In this function, you create a new BrowserWindow renderer process and pass the width and height parameters. The width and height will set the application window size.

      The mainWindow.loadFile() method renders some contents into the BrowserWindow. The index.html file will load the content.

      The main process will be started when the app.whenReady().then(windowName) method is ready. At this point, the main process calls the createWindow function. This function creates a new renderer process, or browser window instance, with a width of 800px and height of 600px. Then the renderer process proceeds to load content using mainWindow.loadFile('index.html') method. In this tutorial, you use index.html as the filename.

      Next add the following events code to your file:

      main.js

      . . .
      app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
          app.quit()
        }
      })
      
      app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow()
        }
      })
      

      You add the two main system events into the project—window-all-closed and activate events:

      • window-all-closed: Quits the application when all windows are closed. On macOS it is common for applications and their menu bar to stay active until the user quits explicitly with CMD+Q.
      • activate: Various actions can trigger this event, such as launching the application for the first time, attempting to re-launch the application when it’s already running, or clicking on the application’s dock (macOS) or taskbar icon.

      After adding these code blocks, your final output of the main.js file will be similar to this:

      main.js

      const { app, BrowserWindow } = require('electron')
      
      function createWindow () {
        const mainWindow = new BrowserWindow({
          width: 800,
          height: 600
        })
      
        mainWindow.loadFile('index.html')
      
      }
      
      app.whenReady().then(createWindow)
      
      app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
          app.quit()
        }
      })
      
      app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow()
        }
      })
      

      Once you’re done, save and exit this file.

      Next, create and open the index.html file:

      Add the following code, which is sent as the final output:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <title>Hello World!</title>
        </head>
        <body
          <h1>Hello World!</h1>
        </body>
      </html>
      

      Here you create a static HTML web page. The Electron application renderer process supports all HTML syntax since Electron uses Chromium for the rendering process.

      Now that you’re done, you can run your application:

      You will get an application window as an output.

      Hello world printed output window of the application

      You’ve created your first cross-platform application with the Electron framework. Next you’ll work with some customizations, which you can add for interactivity.

      Step 4 — Customizing Your “Hello World!”“ Application

      Now you have completed the initial setup of your first cross-platform application using the Electron framework. Let’s see what else you can do to improve the native behavior of the application.

      Electron has a number of built-in features such as dialog boxes, windows options, new windows, menus, shortcuts, notifications, touch bars, session controls, and so on, that improve the user experience of your desktop application. Let’s add some features to customize the hello-world application.

      Graceful Window Setup of the Application

      When you load a page into the window directly, at the startup of your application you may see the page does not load at once. This isn’t a great experience in native applications. Let’s fix this issue in a few steps.

      To do this, you need to hide the BrowserWindow by passing new configuration parameters at the time it gets created.

      For that, open the main.js file:

      Add the show: false parameter to the body of the BrowserWindow object:

      main.js

      const mainWindow = new BrowserWindow({
         width: 800,
         height: 600,
         show: false
       })
      

      Next, you’ll add a new listener to the BrowserWindow instance by adding the highlighted code line inside the createWindow function body. You’ll also add new configuration parameters into the BrowserWindow to change the background color of the initially built window.

      For that, you have to add the following code line of backgroundColor object, inside the BrowserWindow function. Feel free to change the hex color code as you wish.

      backgroundColor: '#Your hex color code'
      

      Add this line like the following highlighted code to your createWindow function:

      main.js

      function createWindow () {
       const mainWindow = new BrowserWindow({
         width: 800,
         height: 600,
         show: false,
         backgroundColor: '#ffff00'
       })
       mainWindow.loadFile('index.html')
      
       mainWindow.once('ready-to-show', mainWindow.show)
      
      }
      

      To reduce the garbage collection, you need to execute this listener one time by using the once keyword. Therefore, the mainWindow.show method executes only once at the run time of this application.

      Now save your file and run your application using the terminal:

      Your application will show with a yellow background.

      Hello world printed output window with the background color of yellow

      Finally, you will see the application window loading gracefully.

      Creating a New Window for the Application

      The use of more than one window is a common feature of basic to advanced applications. Let’s add that feature to your newly created application.

      Electron can create multiple renderer processes (multiple windows) from a single main process.

      First, open main.js:

      Create a new method called secWindow and set the width and height parameters of the newly created window by adding the highlighted code:

      main.js

      function createWindow () {
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        show: false,
        backgroundColor: '#ffff00'
      })
      
      const secWindow = new BrowserWindow({
        width: 600,
        height: 400,
       })
      . . .
      }
      

      Now load content to the newly created BrowserWindow renderer process. At this time you’ll load some remote URL (Website) content.

      In this tutorial, you’re using https://www.digitalocean.com web content for the second window of the application. For that, in the second window initialization secWindow.loadURL, you add the following code line to the body of the createWindow function:

      main.js

       function createWindow () {
       const mainWindow = new BrowserWindow({
         width: 800,
         height: 600,
         show: false,
         backgroundColor: '#ffff00'
       })
      
      const secWindow = new BrowserWindow({
         width: 600,
         height: 400,
       })
      
       mainWindow.loadFile('index.html')
      
       secWindow.loadURL('https://www.digitalocean.com/')
      
       mainWindow.once('ready-to-show', mainWindow.show)
      }
      

      Now save and exit your file and run your application in the terminal:

      You will get your initial window with the yellow background and a new application with the loaded URL.

      New desktop application window of loaded URL with previously hello world printed output window

      You’ve made customizations to your newly created application to make it more interactive for users. Now it’s time to build your Electron application.

      Step 5 — Building Your First Application

      After adding some features to your application, you need to build it for the purpose of distribution. In this section, you will learn how to build the application for various platforms.

      The build process of the Electron application is considered somewhat hard because it needs a lot of tools. However, here you’ll use the electron-builder CLI tool that provides the best way to build your application for any platform.

      First, you’ll install the electron-builder CLI tools globally. To do this run the following command:

      • sudo npm install -g electron-builder

      Note: You can use either npm or yarn to install electron-builder—there are no noted differences in performance. If you intend to develop your application in the long term, the makers of electron-builder recommend yarn to avoid potential compatibility issues. To install using yarn, you’ll need to ensure it’s installed on your computer and then run yarn add electron-builder --dev to install electron-builder with yarn.

      After completing the installation of the electron-builder, you can verify the success of it by running the following command in your terminal:

      • electron-builder --version

      You’ll receive the current version of Electron in your output.

      Now you can build your first cross-platform application. To do this open your terminal and run the following command in your project directory:

      You use the flags -mwl to build applications for macOS, Windows, and Linux respectively.

      Note: Only macOS users can build for all platforms. Windows users can build the application for Windows and Linux platforms only. Linux users can build only for Linux platforms. For more details, you can refer to the documentation.

      To build applications for separate operating systems use the following:

      Build applications for macOS:

      Build applications for Windows:

      Build applications for Linux:

      This process takes some time while dependencies download and your application builds.

      Your project directory creates a new folder called dist. All your built applications and unzip versions of the application are located in that folder.

      As an example, if you build your application for all platforms, your project dist folder is similar to the following file structure:

      hello-world
        +-- hello-world-1.0.0-mac.zip
        +-- hello-world-1.0.0.dmg
        +-- hello-world Setup 1.0.0.exe
        +-- win-unpacked
        +-- mac
        +-- linux-unpacked
        +-- hello-world_1.0.0_amd64.snap
      

      electron-builder builds the Electron app for the current platform and current architecture as the default target.

      • macOS: DMG and ZIP for Squirrel.Mac
      • Windows: NSIS (.exe)
      • Linux: If you build on Windows or macOS, Snap and AppImage for x64 will be the output. Otherwise if you build on Linux, the output will be Snap and AppImage files for the current architecture.

      You’ve now built your application for all platforms.

      Conclusion

      In this tutorial, you created your first cross-platform application with the Electron framework, added native features, and built it for distribution, on macOS.

      To learn more about Electron, you can check out their documentation. Now you can also share your newly created desktop application with anyone by creating an installer.



      Source link