It’s one BIG mesh of state: Identity => Blockchain =>Browser =>DApp

In other words, when an identity (dapp user) authenticates (sends private data) to a decentralized application, that information is temporarily stored in the Browser. It’s only temporary. A page refresh clears the authentication information only stored in the Browsers DOM.

To persist an authenticated decentralized session you might use LocalStorage or a storage library like RxJS (with 🤗 streams)to manage data.

By persisting state within the Browser’s LocalStorage and/or using ServiceWorkers to fetch data the decentralized authentication verification information can still be accessed even after a page refresh.

For example if you have a website, which is NOT a single page application you probably fetch pages from a backend server one at a time (or maybe with async magic) and need to maintain the ability to pass DOM state from one HTML Document to the next.

LocalStorage is your friend.

Smart Contracts — Just An Option

W don’t use Truffle’s ability to easily compile and deploy smart contracts, but the folder structure is in place. In other words, if you want to experiment with uPort and also smart contract deployment, you totally can!

However, for this project we won’t have to worry about the contracts and migrations folder, because it’s not in the scope of the current project.

We don’t recommend deleting the files (for future reference) but if you feel the need to keep folder structure as minimal as possible, we understand completely.

/src/contracts <= Solidity ready to be compiled

/src/migrations <= Smart Contract deployment settings

The truffle.js and truffle-config.js files control the build and deployment process of Ethereum Smart Contracts. However, since we’re not reviewing smart contract development in this tutorial, these files can be left unaltered (or deleted for the sake of being meticulous).

The Webpack Configuration

Finally, the config folder contains the Webpack configuration files. The config folder contains both the development and production Webpack configuration files.

If you ever want extend the boilerplate (or update to Webpack 4 for extra fast compiling times) starting by reviewing the existing Webpack configuration files.

/src/config/webpack.config.dev.js <= Webpack Development Server

/src/config/webpack.config.prod.js <= Webpack Build Process

The Package.json Settings

The standard package.json file contains both the production/development dependencies, plus the script commands (in case you forget ‘npm run start’).

It’s Time To Celebrate!

You just launched a decentralized application — Congratulations!

give yourself a high five — you deserve it!

It wasn’t easy (ok…it kind’of was, but that’s the point) but we learned a lot!

We learned how to utilize Truffle Boxes, register a new ÐApp with uPort’s AppManager and also consume verified attestations directly from a smartphone — without every having to query a “centralized” database.

Together we’ve successfully transferred “state” across a variety of technology stacks, pieces of hardware and global networks…

Tight!

The best part was the ability to include decentralized technology solutions using the public Ethereum Blockchain and emerging solutions like the interplanetary file system (IPFS).