From 8ad5e24f924717fdd61b1b56a81cd8e361d0fcab Mon Sep 17 00:00:00 2001 From: Mary Anthony Date: Thu, 26 Sep 2019 11:20:15 -0700 Subject: [PATCH] Relates to #blockstack/blockstack-app-generator/pull/67 Signed-off-by: Mary Anthony --- _android/tutorial.md | 56 +++++++++++++--------------- _browser/blockstack_storage.md | 60 +++++++++++------------------- _browser/hello-blockstack.md | 65 ++++++++++++-------------------- _browser/todo-list.md | 15 +++++--- _develop/zero_to_dapp_2.md | 4 +- _develop/zero_to_dapp_2_win.md | 4 +- _develop/zero_to_dapp_3.md | 4 +- _develop/zero_to_dapp_3_win.md | 4 +- _includes/scaffolding.md | 15 +++----- _ios/tutorial.md | 68 +++++++++++++--------------------- _storage/hello-hub-choice.md | 2 +- 11 files changed, 118 insertions(+), 179 deletions(-) diff --git a/_android/tutorial.md b/_android/tutorial.md index 15536483..b551f110 100644 --- a/_android/tutorial.md +++ b/_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 diff --git a/_browser/blockstack_storage.md b/_browser/blockstack_storage.md index 80b22978..76c8d26f 100644 --- a/_browser/blockstack_storage.md +++ b/_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. diff --git a/_browser/hello-blockstack.md b/_browser/hello-blockstack.md index d3414645..feb0dbfa 100644 --- a/_browser/hello-blockstack.md +++ b/_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. diff --git a/_browser/todo-list.md b/_browser/todo-list.md index 4d79806f..b098f1a7 100644 --- a/_browser/todo-list.md +++ b/_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: diff --git a/_develop/zero_to_dapp_2.md b/_develop/zero_to_dapp_2.md index f2952db4..c9bb0c29 100644 --- a/_develop/zero_to_dapp_2.md +++ b/_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. -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 diff --git a/_develop/zero_to_dapp_2_win.md b/_develop/zero_to_dapp_2_win.md index 24958a5b..a67a0e14 100644 --- a/_develop/zero_to_dapp_2_win.md +++ b/_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. -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 diff --git a/_develop/zero_to_dapp_3.md b/_develop/zero_to_dapp_3.md index 56ecddf4..a93ce863 100644 --- a/_develop/zero_to_dapp_3.md +++ b/_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 diff --git a/_develop/zero_to_dapp_3_win.md b/_develop/zero_to_dapp_3_win.md index e9d679c2..c66c0f28 100644 --- a/_develop/zero_to_dapp_3_win.md +++ b/_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 diff --git a/_includes/scaffolding.md b/_includes/scaffolding.md index cb10b0be..827eb8d0 100644 --- a/_includes/scaffolding.md +++ b/_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: @@ -16,20 +16,17 @@ You can use the generator to create scaffolding for a starter application. The g - - - - - + - + - +
Plain Javascript blockstack
Webpack blockstack:webpack npx generator-blockstack --plain
React blockstack:react npx generator-blockstack --react
Vue blockstack:vue npx generator-blockstack --vue +
-For example, to install a Vue scaffolding, use the `npm create yo blockstack:vue` command. \ No newline at end of file +For example, to install a Vue scaffolding, you would use the `npx generator-blockstack --vue` command. \ No newline at end of file diff --git a/_ios/tutorial.md b/_ios/tutorial.md index 96512c38..4c90fba6 100644 --- a/_ios/tutorial.md +++ b/_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 diff --git a/_storage/hello-hub-choice.md b/_storage/hello-hub-choice.md index 73d254ba..9fd55344 100644 --- a/_storage/hello-hub-choice.md +++ b/_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**.