NodeJs
Web

SAFE Desktop App Tutorial

In this tutorial, we will create an Electron application. Electron allows you to create and build cross-platforms desktop applications using JavaScript.

To create this app, we will use the @maidsafe/safe-node-app npm package which exposes the safe-app-nodejs API that we need not only to interact with the SAFE Authenticator, but also to connect and interact with the SAFE Network.

We are going to use the SAFE App Electron quick start boilerplate, which is based on the Electron quick start boilerplate. If you would like additional information on creating Electron applications, visit the Electron tutorial site.

The boilerplate implements a simple single page application using Angular.js for rendering the UI components and the data. The application implements a trip planner, showing the list of trips planned by the user, allowing him/her to add or remove trips from the list. In this tutorial, we will be adding the implementation to store (and retrieve) the list of planned trips in the SAFE Network.

Pre-requisites

First you need to make sure you have the following tools installed to be able to work with this tutorial:

  • Git: to be able to clone the boilerplate code
  • Node.js v8.11.1 (which comes with npm v5.6.0) to be able to run the application since it's a Node.js application. All the steps in this tutorial are explained using npm, if you otherwise prefer to use yarn, please make sure you install v1.6.0. Note that the use of yarn is not required and totally optional
  • If you are using Ubuntu or Debian 9 as OS, libgconf-2-4 and/or build-essential dependencies might be missing. Please install them with Synaptic Package Mgr., or with apt from a shell console: $ sudo apt-get install libgconf-2-4 build-essential
  • If you are using Windows, run npm install --global --production windows-build-tools.
  • If you decide to use yarn and are using Windows, run yarn config set child-concurrency 1 because yarn attempts to build modules concurrently with multiple child processes, which causes intermittent timing issues on Windows.

Install a SAFE Browser

Since the application will be authorising with the Authenticator to get the credentials needed to then connect to the SAFE Network, we first need to have an instance of the SAFE Browser installed.

You can find the links to download the SAFE Browser package from MaidSafe's website, or directly from the SAFE Browser GitHub releases repository. It's recommended to always use the latest available version.

Note that there are packages for each of the supported platforms, i.e. Linux, Windows and macOS. Also note there are two type of packages for each of the supported platforms:

  • safe-browser-<version>-<platform>.zip: SAFE Browser package built to use the live SAFE Network
  • safe-browser-mock-<version>-<platform>.zip: SAFE Browser package built to use the mock routing. This will create a local temporary file and you won't need to connect to the live network.

In this tutorial we will be using the SAFE Browser package that is built to work with the mock network. So please go ahead and download the one corresponding for your platform, and unzip the package in your PC. Before we launch it let's go ahead and set the NODE_ENV environment variable set to dev to have our browser to effectively use the native libraries for mock routing:

$ export NODE_ENV=dev

If you are using Windows you can set it with the following commands instead: Command prompt

$ set NODE_ENV=dev

Powershell

$ $env:NODE_ENV = "dev"