diff --git a/_android/tutorial.md b/_android/tutorial.md index b551f110..0ab19518 100644 --- a/_android/tutorial.md +++ b/_android/tutorial.md @@ -92,12 +92,6 @@ Blockstack. 2. Install the version appropriate for your operating system. - -### Use npm to install Yeoman and the Blockstack App Generator - -{% include scaffolding.md %} - - ## Build the Blockstack hello-world In this section, you build a Blockstack `hello-world` application. Then, you @@ -105,6 +99,8 @@ modify the `hello-world` to interact with the Android app via a redirect. ### Generate and launch your hello-blockstack application +{% include scaffolding.md %} + In this section, you build an initial React.js application called `hello-blockstack`. diff --git a/_browser/blockstack_storage.md b/_browser/blockstack_storage.md index 76c8d26f..f6163661 100644 --- a/_browser/blockstack_storage.md +++ b/_browser/blockstack_storage.md @@ -25,9 +25,7 @@ This tutorial does not teach you about authentication. That is covered in depth The storage application you build with this tutorial is a React.js application that is completely decentralized and server-less. While not strictly required -to follow along, basic familiarity with React.js is helpful. - -When complete, the app is capable of the following: +to follow along, basic familiarity with React.js is helpful. When complete, the app is capable of the following: - authenticating users using Blockstack - posting new statuses @@ -37,27 +35,32 @@ When complete, the app is capable of the following: The basic identity and storage services are provided by `blockstack.js`. To test the application, you need to have already [registered a Blockstack ID](ids-introduction). -The tutorial relies on the `npm` dependency manager. Before you begin, verify -you have installed `npm` using the `which` command. + +For this tutorial, you will use the following tools: + +- Node.js v10 or higher is recommended the minimum supported version is Node.js v8. +- `blockstack.js` to authenticate the user and work with the user's identity/profile information + + +Before you begin, verify you have the correct version of Node.js and its tools installed. ```bash -$ which npm +$ node -v +v12.10.0 +$ which npm npx /usr/local/bin/npm +/usr/local/bin/npx ``` -If you don't find `npm` in your system, [install -it](https://www.npmjs.com/get-npm). Finally, if you get stuck at any point -while working on the tutorial, the completed [source code is available for -you](https://github.com/yknl/publik) to check your work against. You can also -try out the [live build](https://publik.test-blockstack.com) of the app. +If you don't have these installed, take a moment to install or upgrade as needed. Also, make sure you have [created at least one Blockstack ID]({{ site.baseurl }}/browser/ids-introduction.html#create-an-initial-blockstack-id). You'll use this ID to interact with the application. -## Use npm to install Yeoman and the Blockstack App Generator - -{% include scaffolding.md %} +Finally, if you get stuck at any point while working on the tutorial, the completed [source code is available for you](https://github.com/yknl/publik) to check your work against. You can also try out the [live build](https://publik.test-blockstack.com) of the app. ## Generate and launch the public application -In this section, you build an initial React.js application called Publik. +{% include scaffolding.md %} + +In this section, you build an initial React application called Publik. 1. Create a the `publik` directory. @@ -93,7 +96,7 @@ In this section, you build an initial React.js application called Publik. Depending on your environment you may have some warnings with the installation. Optionally, you can fix these before continuing to the next section. -3. Run the initial application. +4. Run the initial application. ```bash npm run start @@ -103,9 +106,9 @@ In this section, you build an initial React.js application called Publik. ![Network Connection](./images/network-connections.gif) -2. If it does, choose **Allow**. +5. If it does, choose **Allow**. -3. Your browswer –– Chrome by default –– will open to `http://127.0.0.1:3000/`. +6. Your browswer –– Chrome by default –– will open to `http://127.0.0.1:3000/`. You should see a simple React app. diff --git a/_browser/hello-blockstack.md b/_browser/hello-blockstack.md index f8dea94c..5cea1e12 100644 --- a/_browser/hello-blockstack.md +++ b/_browser/hello-blockstack.md @@ -18,10 +18,9 @@ decentralized, server-less application. You work through the following sections: ## About this tutorial and the prerequisites you need -For this tutorial, we will use the following tools: +For this tutorial, you will use the following tools: - Node.js v10 or higher is recommended the minimum supported version is Node.js v8. -- `browserify` to compile node code into browser-ready code - `blockstack.js` to authenticate the user and work with the user's identity/profile information The application you build is a React.js application that is completely @@ -51,15 +50,13 @@ $ which npm npx If you don't have these installed, take a moment to install or upgrade as needed. Finally, make sure you have [created at least one Blockstack ID]({{ site.baseurl }}/browser/ids-introduction.html#create-an-initial-blockstack-id). You'll use this ID to interact with the application. - -## Use npm to install Yeoman and the Blockstack App Generator -{% include scaffolding.md %} +## Generate an initial Blockstack application +{% include scaffolding.md %} -## Generate an initial Blockstack application -In this section, you build an initial React.js application called `hello-world-tutorial`. For this example, you will use plain Javascript scaffolding. +In this section, you build an initial React.js application called `hello-world-tutorial`. For this example, you will use the React scaffolding. 1. Create the `hello-world-tutorial` directory. diff --git a/_includes/scaffolding.md b/_includes/scaffolding.md index 827eb8d0..cac3413f 100644 --- a/_includes/scaffolding.md +++ b/_includes/scaffolding.md @@ -1,13 +1,4 @@ -You use `npm` to install Yeoman and Blockstack App Generator. Yeoman is a generic scaffolding system that helps users rapidly start new projects and streamline the maintenance of existing projects. - - -1. Use `npm` to install Yeoman and the Blockstack generator - - ```bash - npm install -g yo generator-blockstack - ``` - -You can use the generator to create scaffolding for a starter application. The generator can create scaffolding for any of these frameworks: +You use the Blockstack App Generator to create scaffolding for a starter application. The generator can create scaffolding for any of these frameworks: diff --git a/_ios/tutorial.md b/_ios/tutorial.md index 4c90fba6..851c0103 100644 --- a/_ios/tutorial.md +++ b/_ios/tutorial.md @@ -95,10 +95,6 @@ If you don't have the CocoaPods beta version, install it: sudo gem install cocoapods -v 1.6.0.beta.2 ``` -### Use npm to install Yeoman and the Blockstack App Generator - -{% include scaffolding.md %} - ## Build the Blockstack hello-world In this section, you build a Blockstack `hello-world` application. Then, you @@ -106,6 +102,8 @@ modify the `hello-world` to interact with the iOS app via a redirect. ### Generate and launch your hello-blockstack application +{% include scaffolding.md %} + In this section, you build an initial React.js application called `hello-blockstack`. @@ -143,7 +141,7 @@ In this section, you build an initial React.js application called Depending on your environment you may have some warnings with the installation. Optionally, you can fix these before continuing to the next section. -5. Run the initial application. +4. Run the initial application. ```bash npm run start @@ -170,20 +168,20 @@ In this section, you build an initial React.js application called At this point, the browser is running a Blockstack server on your local host. -6. Navigate to `http://localhost:8080` with your browser to display the +5. Navigate to `http://localhost:8080` with your browser to display the application. ![](images/blockstack-signin.png) This local instances is for testing your applications only. -7. Choose **Sign in with Blockstack** +6. Choose **Sign in with Blockstack** The system displays a prompt allowing you to create a new Blockstack ID or restore an existing one. ![](images/create-restore.png) -8. Follow the prompts appropriate to your situation. +7. Follow the prompts appropriate to your situation. If you are restoring an existing ID, you may see a prompt about your user being nameless, ignore it. At this point you have only a single application