diff --git a/_browser/blockstack_storage.md b/_browser/blockstack_storage.md index 02d00b2d..4608c346 100644 --- a/_browser/blockstack_storage.md +++ b/_browser/blockstack_storage.md @@ -142,7 +142,7 @@ In this section, you build an initial React.js application called Publik. You should see a simple React app. - ![](images/initial-app.gif) + ![](images/initial-app.png) 8. Choose **Sign In with Blockstack**. diff --git a/_browser/hello-blockstack.md b/_browser/hello-blockstack.md index a59f9334..344f821b 100644 --- a/_browser/hello-blockstack.md +++ b/_browser/hello-blockstack.md @@ -57,16 +57,38 @@ helps users rapidly start new projects and streamline the maintenance of existing projects. -1. Install Yeoman. +1. Use `npm` to install Yeoman and the Blockstack generator ```bash - npm install -g yo + npm install -g yo generator-blockstack ``` -2. Install the Blockstack application generator. - ```bash - npm install -g generator-blockstack - ``` +You can use the generator to create starter applications for these frameworks: + + + + + + + + + + + + + + + + + + + + + + +
FrameworkUse this command to install
Plain Javascript blockstack
Webpack blockstack:webpack
React blockstack:react
Vue blockstack:vue
+ +For this example, you will use plain Javascript. ## Generate an initial Blockstack application @@ -84,10 +106,11 @@ In this section, you build an initial React.js application called `hello-world-t cd hello-world-tutorial ``` -3. Use Yeoman and the Blockstack application generator to create your initial `hello-world-tutorial` application. +3. Create your initial `hello-world-tutorial` application. ```bash - yo blockstack + $ npm create yo blockstack + npx: installed 15 in 1.482s ``` You should see several interactive prompts. @@ -131,7 +154,7 @@ The initial application you create is a generic Javascript application you run with a local express node. Before you continue, take a moment to examine the structure of this generic application structure. In the `/` (root) of the generated sample you have the following files: -| File | Description | +| File/directory | Description | |------------------|-----------------------------------| | `.editorconfig` | Sets universal values for editor. | | `.gitignore` | Git configuration file. | @@ -139,6 +162,9 @@ structure of this generic application structure. In the `/` (root) of the genera | `package.json` | Specifies required packages. | | `requires.js` | A Javascript module loader. | | `server.js` | Simple static server configuration.| +| `node_modules` | Package files installed by `npm`.| +| `public` | Starter web app code.| + In the `public` folder you find these files: @@ -147,8 +173,7 @@ In the `public` folder you find these files: | `app.css` | Contains application styles. | | `app.js` | Main application file. | | `bootstrap.min.css` | Minified css for production. | -| `favicon.ico` | Website icon. -| `icon-192x192.png` | Application icon. | +| `favicon.ico` | Web app site icon. | | `index.html` | Single page. | | `manifest.json` | Tells the browser about the application and how it should behave.| | `robots.txt` | Configures crawling and indexing. | @@ -179,7 +204,7 @@ and open your browser 'http://localhost:5000'. From the root of your new applic You should see a simple application: - ![](images/initial-app.gif) + ![](images/initial-app.png) 4. Choose **Sign In with Blockstack**. @@ -293,7 +318,7 @@ user home screens. The contents are very simple: "start_url": "localhost:5000", "description": "A simple demo of Blockstack Auth", "icons": [{ - "src": "https://helloblockstack.com/icon-192x192.png", + "src": "favicon.ico", "sizes": "192x192", "type": "image/png" }] diff --git a/_browser/images/initial-app.gif b/_browser/images/initial-app.gif deleted file mode 100644 index 9c932f51..00000000 Binary files a/_browser/images/initial-app.gif and /dev/null differ diff --git a/_browser/images/initial-app.png b/_browser/images/initial-app.png new file mode 100644 index 00000000..f2c689fe Binary files /dev/null and b/_browser/images/initial-app.png differ diff --git a/_browser/images/login.gif b/_browser/images/login.gif index c2626b50..9aea9ad7 100644 Binary files a/_browser/images/login.gif and b/_browser/images/login.gif differ