Browse Source

Relates to #blockstack/blockstack-app-generator/pull/67

Signed-off-by: Mary Anthony <mary@blockstack.com>
feat/clarity-updates
Mary Anthony 5 years ago
parent
commit
8ad5e24f92
  1. 56
      _android/tutorial.md
  2. 60
      _browser/blockstack_storage.md
  3. 65
      _browser/hello-blockstack.md
  4. 15
      _browser/todo-list.md
  5. 4
      _develop/zero_to_dapp_2.md
  6. 4
      _develop/zero_to_dapp_2_win.md
  7. 4
      _develop/zero_to_dapp_3.md
  8. 4
      _develop/zero_to_dapp_3_win.md
  9. 15
      _includes/scaffolding.md
  10. 68
      _ios/tutorial.md
  11. 2
      _storage/hello-hub-choice.md

56
_android/tutorial.md

@ -61,19 +61,19 @@ Depending on your network connection, this can take between 15-30 minutes.
![](images/studio-download.png)
### Do you have npm?
### Do you have Node.js?
The Blockstack code in this tutorial relies on the `npm` dependency manager.
Before you begin, verify you have installed `npm` using the `which` command to
verify.
Node.js v10 or higher is recommended the minimum supported version is Node.js v8. 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).
If you don't have these installed, take a moment to install or upgrade as needed.
### Install the Blockstack test rig
@ -120,33 +120,27 @@ In this section, you build an initial React.js application called
cd hello-blockstack
```
3. Use Yeoman and the Blockstack application generator to create your initial `hello-blockstack` application.
3. Use the Blockstack application generator to create your initial `hello-blockstack` application.
```bash
yo blockstack:react
```
$ npx generator-blockstack --react
npx: installed 338 in 13.792s
create package.json
create .gitignore
create webpack.config.js
create netlify.toml
create firebase.json
...
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
> fsevents@1.2.9 install /private/tmp/testymc/node_modules/fsevents
> node install
added 775 packages from 455 contributors and audited 9435 packages in 20.934s
found 0 vulnerabilities
You should see several interactive prompts.
```
```bash
$ yo blockstack:react
==========================================================================
We are constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ Blockstack app │
--------- │ generator! │
( _U_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
|° Y
? Are you ready to build a Blockstack app in React? (Y/n)
Depending on your environment you may have some warnings with the installation. Optionally, you can fix these before continuing to the next section.
```
4. Respond to the prompts to populate the initial app.
@ -163,7 +157,7 @@ In this section, you build an initial React.js application called
5. Run the initial application.
```bash
$ npm start
$ npm run start
> hello-blockstack@0.0.0 start /Users/moxiegirl/repos/hello-blockstack
> webpack-dev-server

60
_browser/blockstack_storage.md

@ -71,59 +71,41 @@ In this section, you build an initial React.js application called Publik.
cd publik
```
3. Use Yeoman and the Blockstack application generator to create your initial `publik` application.
3. Use the Blockstack application generator to create your initial `publik` application.
```bash
yo blockstack:react
```
You should see several interactive prompts.
$ npx generator-blockstack --react
npx: installed 338 in 13.792s
create package.json
create .gitignore
create webpack.config.js
create netlify.toml
create firebase.json
...
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
```bash
$ yo blockstack:react
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ Blockstack app │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? Are you ready to build a Blockstack app in React? (Y/n)
```
> fsevents@1.2.9 install /private/tmp/testymc/node_modules/fsevents
> node install
added 775 packages from 455 contributors and audited 9435 packages in 20.934s
found 0 vulnerabilities
4. Respond to the prompts to populate the initial app.
```
After the process completes successfully, you see a prompt similar to the following:
```bash
[fsevents] Success:
"/Users/theuser/repos/publik/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node"
is installed via remote npm notice created a lockfile as package-lock.json.
You should commit this file. added 1060 packages in 26.901s
```
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.
3. Run the initial application.
```bash
npm start
npm run start
```
The system may prompt you to accept incoming connections.
![Network Connection](./images/network-connections.gif)
6. If it does, choose **Allow**.
2. If it does, choose **Allow**.
7. Your browswer –– Chrome by default –– will open to `http://127.0.0.1:3000/`.
3. Your browswer –– Chrome by default –– will open to `http://127.0.0.1:3000/`.
You should see a simple React app.
@ -747,7 +729,7 @@ process URL paths that contain the `.` (dot) character for example,
2. Restart the application so that the disabling of the `.` (dot) rule takes effect.
```bash
npm start
npm run start
```
3. Point your browser to `http://127.0.01:3000/your_username.id.blockstack` to see the final application.

65
_browser/hello-blockstack.md

@ -20,7 +20,7 @@ decentralized, server-less application. You work through the following sections:
For this tutorial, we will use the following tools:
- `npm` to manage dependencies and scripts
- 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
@ -38,16 +38,17 @@ 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.
The tutorial relies on the `npm` dependency manager. Before you begin, verify
you have installed `npm` using the `which` command to verify.
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).
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.
@ -76,44 +77,24 @@ In this section, you build an initial React.js application called `hello-world-t
3. Create your initial `hello-world-tutorial` application.
```bash
$ npm create yo blockstack
npx: installed 15 in 1.482s
```
You should see several interactive prompts.
```bash
$ yo blockstack
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ Blockstack app │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? Are you ready to build a Blockstack app? (Y/n)
```
$ npx generator-blockstack --react
npx: installed 338 in 13.792s
create package.json
create .gitignore
create webpack.config.js
create netlify.toml
create firebase.json
...
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
4. Respond to the prompts to populate the initial app.
> fsevents@1.2.9 install /private/tmp/testymc/node_modules/fsevents
> node install
added 775 packages from 455 contributors and audited 9435 packages in 20.934s
found 0 vulnerabilities
After the process completes successfully, you see a prompt similar to the following:
```bash
...
create public/icon-192x192.png
create public/index.html
create public/robots.txt
create public/manifest.json
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
```
```
Depending on your environment you may have some problems with the `npm` packages. Go ahead and fix these before continuing to the next section.
Depending on your environment you may have some warnings with the installation. Optionally, you can fix these before continuing to the next section.
## Review the basic application structure
@ -158,7 +139,7 @@ and open your browser 'http://localhost:5000'. From the root of your new applic
1. Start the application server.
```bash
npm start
npm run start
```
The first time you run it, your system prompts you to accept incoming connections.

15
_browser/todo-list.md

@ -29,20 +29,23 @@ The application you build is a React application that is completely decentralize
For this tutorial, you will use the following tools:
* your workstation's command line
* `npm` to manage dependencies and scripts
- Node.js v10 or higher is recommended the minimum supported version is Node.js v8.
The basic identity and storage services are provided by blockstack.js. To test the application, you need to have already registered a Blockstack ID.
### Verify you have npm installed
### Verify you have Node.js and its tools installed
The tutorial relies on the `npm` dependency manager. Before you begin, verify you have installed `npm` using the `which` command to verify.
The tutorial relies on Node.js and its `npx` or `npm` tools. 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).
If you don't, make sure they are installed.
### Make sure you have a Blockstack ID
@ -101,7 +104,7 @@ The example application runs in a node server on your local host. In the this se
2. Start the application in your local environment.
```bash
$ npm start
$ npm run start
```
You should see output similar to the following:

4
_develop/zero_to_dapp_2.md

@ -275,7 +275,7 @@ of the key packages `npm` installs for you is the Blockstack Javascript library.
1. Start the Animal Kingdom DApp running on your workstation by entering:
```bash
npm start
npm run start
```
The `npm` program uses the `scripts/start.js` file to package the Animal
@ -303,7 +303,7 @@ of the key packages `npm` installs for you is the Blockstack Javascript library.
<img src="images/kingdom-stop.png" alt="">
You can always start the application again with `npm start` command as you will later in this tutorial.
You can always start the application again with `npm run start` command as you will later in this tutorial.
## Resources for Blockstack developers

4
_develop/zero_to_dapp_2_win.md

@ -288,7 +288,7 @@ of the key packages `npm` installs for you is the Blockstack Javascript library.
1. Start the Animal Kingdom DApp running on your workstation by entering:
```bash
C:\animal-kingdom-master> npm start
C:\animal-kingdom-master> npm run start
```
The `npm` program uses the `scripts/start.js` file to package the Animal
@ -318,7 +318,7 @@ of the key packages `npm` installs for you is the Blockstack Javascript library.
<img src="images/win-kingdom-stop.png" alt="">
You can always start the application again with `npm start` command as you will later in this tutorial.
You can always start the application again with `npm run start` command as you will later in this tutorial.
## Resources for Blockstack developers

4
_develop/zero_to_dapp_3.md

@ -270,7 +270,7 @@ your keyboard.
9. Back in a terminal window, restart your application.
```bash
$ npm start
$ npm run start
```
10. After the application starts, navigate to the **Territories** page and look for your `Westeros` territory.
@ -348,7 +348,7 @@ with a Netlify account.
Before you begin, you need to build a site that is ready to deploy.
1. In your terminal, press `CTRL-C` on your keyboard to stop your `npm start` build.
1. In your terminal, press `CTRL-C` on your keyboard to stop your `npm run start` build.
2. Build a website from your code by entering the `npm run build` command:
```bash

4
_develop/zero_to_dapp_3_win.md

@ -279,7 +279,7 @@ your keyboard.
9. Back in a terminal window, restart your application.
```bash
c:\animal-kingdom-master> npm start
c:\animal-kingdom-master> npm run start
```
10. After the application starts, navigate to the **Territories** page and look for your `Westeros` territory.
@ -357,7 +357,7 @@ with a Netlify account.
Before you begin, you need to build a site that is ready to deploy.
1. In your terminal, press `CTRL-C` on your keyboard to stop your `npm start` build.
1. In your terminal, press `CTRL-C` on your keyboard to stop your `npm run start` build.
2. Build a website from your code by entering the `npm run build` command:
```bash

15
_includes/scaffolding.md

@ -7,7 +7,7 @@ You use `npm` to install Yeoman and Blockstack App Generator. Yeoman is a generi
npm install -g yo generator-blockstack
```
You can use the generator to create scaffolding for a starter application. The generator can create scaffoling for any of these frameworks:
You can use the generator to create scaffolding for a starter application. The generator can create scaffolding for any of these frameworks:
<table class="uk-table">
<tr>
@ -16,20 +16,17 @@ You can use the generator to create scaffolding for a starter application. The g
</tr>
<tr>
<td>Plain Javascript</td>
<td><code> blockstack</code></td>
</tr>
<tr>
<td>Webpack</td>
<td><code> blockstack:webpack</code></td>
<td><code> npx generator-blockstack --plain</code></td>
</tr>
<tr>
<td>React</td>
<td><code> blockstack:react</code></td>
<td><code> npx generator-blockstack --react</code></td>
</tr>
<tr>
<td>Vue</td>
<td><code> blockstack:vue</code></td>
<td><code> npx generator-blockstack --vue
</code></td>
</tr>
</table>
For example, to install a Vue scaffolding, use the `npm create yo blockstack:vue` command.
For example, to install a Vue scaffolding, you would use the `npx generator-blockstack --vue` command.

68
_ios/tutorial.md

@ -59,19 +59,19 @@ environment.
Follow the installation instructions to [download and XCode](https://developer.apple.com/xcode/) for your operating system.
Depending on your network connection, this can take between 15-30 minutes.
### Do you have npm?
### Do you have Node.js?
The Blockstack code in this tutorial relies on the `npm` dependency manager.
Before you begin, verify you have installed `npm` using the `which` command to
verify.
Node.js v10 or higher is recommended the minimum supported version is Node.js v8. 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).
If you don't have these installed, take a moment to install or upgrade as needed.
### Install the CocoaPods 1.6.0.beta.1 dependency manager
@ -121,50 +121,32 @@ In this section, you build an initial React.js application called
cd hello-blockstack
```
3. Use Yeoman and the Blockstack application generator to create your initial `hello-blockstack` application.
3. Create your initial `hello-world-tutorial` application.
```bash
yo blockstack:react
```
You should see several interactive prompts.
```bash
$ yo blockstack:react
==========================================================================
We are constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ Blockstack app │
--------- │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? Are you ready to build a Blockstack app in React? (Y/n)
```
$ npx generator-blockstack --react
npx: installed 338 in 13.792s
create package.json
create .gitignore
create webpack.config.js
create netlify.toml
create firebase.json
...
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
> fsevents@1.2.9 install /private/tmp/testymc/node_modules/fsevents
> node install
added 775 packages from 455 contributors and audited 9435 packages in 20.934s
found 0 vulnerabilities
4. Respond to the prompts to populate the initial app.
After the process completes successfully, you see a prompt similar to the following:
```
```bash
[fsevents] Success:
"/Users/theuser/repos/hello-blockstack/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node"
is installed via remote npm notice created a lockfile as package-lock.json.
You should commit this file. added 1060 packages in 26.901s
```
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.
```bash
npm start
npm run start
> hello-blockstack@0.0.0 start /Users/moxiegirl/repos/hello-blockstack
> webpack-dev-server

2
_storage/hello-hub-choice.md

@ -94,7 +94,7 @@ and open your browser `http://localhost:5000`. From the root of your new applic
1. Start the application server.
```bash
npm start
npm run start
```
2. Choose **Allow**.

Loading…
Cancel
Save