SAFE Web App Tutorial

In this tutorial we will create a SAFE Web application which uses the Web API to interact with the SAFE Authenticator, and to connect with the SAFE Network.

In this tutorial we use the SAFE Web App quick start boilerplate, which is single page webapp compiled via Node.js.

The boilerplate implements a simple single page application using Vue.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, libpng-dev might be needed. Please install it with Synaptic Package Mgr., or with apt from a shell console: $ sudo apt-get install libpng-dev

Install a SAFE Browser

Since this is a SAFE webapp, we first need to have an instance of the SAFE Browser installed to be able to load our application.

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 OSX. 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"

You can now launch the browser (make sure you launch it from the same console where you just set the NODE_ENV variable), please create an account from the Authenticator. You can enter any string when you are requested for the “Invitation token”.

After you finished creating your account, please keep the browser open and logged in your account before proceeding with next steps.

Create basic skeleton

We first clone the boilerplate repo using git onto a local folder named safe_examples:

$ git clone https://github.com/maidsafe/safe_examples safe_examples

And then install its dependencies:

$ cd safe_examples/safe_web_app_quic