Zero-to-DApp 2 of 4 for MacOS/Linux (or Windows)
In this part, you learn how the Blockstack platform lowers the barriers to building with blockchain technology. You’ll set up all the prerequisites you need to build a typical web DApp. Finally, you’ll build and run your own version of the Animal Kingdom DApp introduced in part 1. This part has the following topics:
- A blockchain platform without pain
- Get prerequisites and set up your environment
- Get the Animal Kingdom code
- Build the sample in development mode
- Start your Animal Kingdom DApp
- Resources for Blockstack developers
A blockchain platform without pain
Blockstack’s mission is to bring about a new internet where users control the access to their data and how it is used. With this mission in mind, Blockstack Public Benefit Corp. (PBC) started development of the Blockstack platform in 2017.
The platform’s development philosophy followed two simple principles. First, create backend services that allow decentralized applications to be both performant and scalable. Second, provide simple, familiar development interfaces to blockchain technology. The result of this philosophy is a technology platform that allows you to:
- Access the Blockstack’s Naming System (BNS). The system has over 90K users that can immediately start using your application.
- Scale quickly to large, performant production systems. Blockstack’s Gaia storage system gives fast, scalable performance on a level comparable to Amazon S3, Google Drive, or Azure.
Using Blockstack’s technology you can start building immediately on the blockchain with the knowledge you have today. You won’t need to spend time or effort developing additional knowledge of specialized languages or technologies.
Get prerequisites and set up your environment
To follow the procedures in the rest of this tutorial, you need the following:
- A Blockstack ID (identity) to test your Animal Kingdom.
- Access to the a terminal window and some familiarity with the command line it provides.
- On Mac, an installation of the XCode command-line tools to support Node Package Manager (
- The Node Package Manager package manager.
Follow the procedures in this section to install these components.
Confirm or get a Blockstack ID
Confirm you have a Blockstack ID also known as an identity;
is an example of an identity.
If you have an existing ID, log into the Blockstack Browser in your browser.
Logging in confirms you have a valid ID with the required secret recovery key or magic recovery code. The secret recovery key is a 12 or 24 word phrase you recorded when you created the ID. The magic recovery code is a string of characters Blockstack emailed to you when you created your identity. You can confirm your identity with either.
If you do not yet have a Blockstack ID, create one through the Blockstack Browser.
Instructions for creating an ID are available in this documentation.
Ensure command-line access
If you are using a Mac, you can find the terminal in the Application > Launchpad > Other folder.
If you don’t often use the command line, take a moment to test some common commands.
|Command||What it does|
||Print the name of the working directory; the current directory your command line is in.|
||Lists the files and directories in the current directory.|
||Change directory to navigate to locations in your file system.|
Install XCode Command Line tools
The Command Line Tool package gives Mac terminal users many commonly used tools, utilities, and compilers. Some of the contents installed by NPM require XCode.
- Open a terminal window on your system.
$ xcode-select --install
A software update dialog displays:
Click Install to confirm.
You are prompted to agree to the terms of service.
Agree to the terms of services.
The tools are installed. This is fairly quick depending on your connection speed.
Install Node Package Manager (NPM)
Open source developers from every continent use NPM to share software components
called packages. The Animal Kingdom uses React, Babel, and many other
components. You’ll use the
npm command to install these packaged components.
- Open a terminal window on your system.
Verify you have installed
whichreturns the command’s location in your environment.
npmcommand is not in your system, install it using the instructions for your operating system.
Installing the NPM tool can take several minutes depending on your connection speed.
Get the Animal Kingdom code
In this section, you copy the code for Animal Kingdom to your workstation.
In your browser (Chrome is recommended), open the Animal Kingdom code repository.
The AnimalKingdom code is kept in a public GitHub repository.
Click the Clone or download button.
If you have a GitHub account you can choose to clone the original repository or fork it and then clone it. These instructions assume you are downloading the code.
Choose the Download ZIP for Animal Kingdom.
- Check your download directory for the
- Copy the download zip file to a directory where you keep code projects.
Unzip the file.
After unzipping the file you should have the
In your terminal change directory into the top of the directory by entering:
$ cd animal-kingdom-master
pwdcommand to confirm which directory you are in.
$ pwd /Users/manthony/animal-kingdom-master
Take a minute review the files and subdirectories in your Animal Kingdom project.
lscommand to list directory contents.
Contains a quick reference for building and running Animal Kingdom.
An NPM project file and a corresponding
Files that are copied into the root of the site you are building.
Files to support cross-origin request configuration.
React source code for the site. This contains configuration files.
Build the sample in development mode
You can build and run the Animal Kingdom on your local workstation. Before you
can run the program you use NPM to get install all the dependent packages. One
of the key packages
Make sure you are in the root directory of the project.
cd ~/animal-kingdom-master pwd /Users/manthony/animal-kingdom-master
npm installto get the software components Animal Kingdom needs.
$ npm install > firstname.lastname@example.org install /Users/manthony/animal-kingdom-master/node_modules/fsevents > node install node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.4/fse-v1.2.4-node-v67-darwin-x64.tar.gz node-pre-gyp WARN Pre-built binaries not found for email@example.com and firstname.lastname@example.org (node-v67 ABI, unknown) (falling back to source compile with node-gyp) SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o In file included from ../fsevents.cc:6: ... added 1390 packages from 766 contributors and audited 15238 packages in 16.11s found 1 high severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details $
This command creates a
node_modulessubdirectory to your project code and installs all the code libraries you need for your Animal Kingdom project.
lscommand to list the contents of your project directory to verify
Start your Animal Kingdom DApp
Start the Animal Kingdom DApp running on your workstation by entering:
npm run start
npmprogram uses the
scripts/start.jsfile to package the Animal Kingdom application. Once the code is packaged, the DApp opens Animal Kingdom running at the
http://localhost:3000URL in your browser.
From the initial Animal Kingdom screen, choose an animal person and a territory.
Press Done at the bottom of the page.
The Animal Kingdom makes a call to the Gaia hub to store your selection. After a brief pause, the DApp returns you to the Your Kingdom page. If you have problems, refresh the page and click Your Kingdom in the menu.
Spend a little time exploring the application.
For example, you could edit your animal or visit the other pages such as Animals or Territories.
- Go back to your terminal where you started your application is running.
CTRL-Cto stop the application.
You can always start the application again with
npm run start command as you will later in this tutorial.
Resources for Blockstack developers
Blockstack provides several resources that help developers who are building on the Platform. Take a moment to investigate these resources:
- Visit the Blockstack forum. This is a valuable resource to learn about the questions that other developers have now or have had in the past.
- Visit the Blockstack Community website to learn about events that may be coming to your area.
- Join the Blockstack Slack channel which you can join by filling in the following form.
Where to go next
In this section, you learned about the Blockstack platform and why it makes Blockchain development a painless process by encapsulating the complexity of the blockstack backend. You also set up a typical development environment for developing a Blockstack web application. Finally, you started and ran the Animal Kingdom application locally.
In the next section, you explore the application code and learn which recorded elements in a DApp make it eligible for App Mining. Continue to Zero-to-DApp, 3 of 4.