{"_id":"5608e4e7c5cff70d007d00d8","parentDoc":null,"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","__v":84,"category":{"_id":"5605f2bba4574a0d00811365","__v":26,"pages":["5608e4d6c5cff70d007d00d5","5608e4e7c5cff70d007d00d8","5608e4fbc5cff70d007d00da","5608e5096d8c440d000c79f3","5608e5156d8c440d000c79f6","5608e52331beb60d001b6558","5608e8248aedf50d0004cf98","5608e87e8aedf50d0004cf9b","5609bf4f9f85a70d00908530","562822dd5cfea90d00ddc5d7","562831c40653060d00a2f750","563d2732260dde0d00c5eab1","5660d2bee163310d006b19c1","567bb35b93919f0d00c97b1c","567bba643241c20d00b730de","567bbc14b56bac0d0019d933","567bc0473241c20d00b730e5","568b6bd8fe6fcc0d006dc8f7","56a427125fb2530d00421b67","56a42a5194ec0a0d00b3a012","56a42aaa545bc50d000e3ada","56ddff97bea78e20003a778f","56de00ab26744429006648ba","56de12a33168720e00c11b02","56e37f388b32a10e00f79755","56e73362e622c90e00dc55b3"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-26T01:19:55.795Z","from_sync":false,"order":2,"slug":"installation-and-launch","title":"Installation and Launch"},"version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":["560c758e2982120d004dc507","5887f3c580dfc2390016f790"],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T06:57:43.771Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"[block:html]\n{\n  \"html\": \"This entry covers:\\n<ul>\\n\\t<li><a href=\\\"#InstallingCLI\\\">Installing the Command-Line Interface</a></li>\\n\\t<li><a href=\\\"#npmFixes\\\">Known Issues</a></li>\\n\\t<li><a href=\\\"#InstallVideo\\\">Video Demo</a></li> \\n<!-- <li><a href=\\\"#Register_jspm\\\">Registering the jspm Instance</a></li> -->\\n</ul>\\n  \\n<h2><A NAME=\\\"InstallingCLI\\\"></a>Installing the Command-Line Interface</h2>\\n\\nThe first step toward developing on Stencil is to install the Stencil CLI (command-line interface). You can do this via the following command:\\n<br><p></p>\\n\\n<pre>npm install -g :::at:::bigcommerce/stencil-cli</pre>\\n\\n<!-- <A NAME=\\\"npmFixes\\\"> </a>\\n[orange callout] (!) Notes-->\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"You will occasionally receive a command-line prompt to repeat the above step when you restart your Stencil server. Such required updates are rare; they occur when BigCommerce publishes a critical fix in Stencil CLI, to resolve an issue like a newly discovered security exploit.\",\n  \"title\": \"Reinstallation Prompts\"\n}\n[/block]\n## <span id=\"npmFixes\"> Known Issues </span>\n\n* The command above requires <a href=\"https://www.npmjs.com/\">npm</a> to be installed in your local development environment.\n\n* In Windows, this <span class=\"inline-code\">npm</span> command's execution might at times appear to freeze. However, the installer is running. \nGive it several minutes to complete installation.\n\n* On Mac OS machines with installed xcode, version 5.x, this <span class=\"inline-code\">npm</span> command has generated errors of the form: \n<span class=\"inline-code\">npm ERR! invalid: string_decoder</span>. The workaround is to upgrade xcode to the latest stable xcode version \n(7.3.1 as of this page's last revision). \n\n* If you receive a file-permissions error, and you did not install Node.js via <a href=\"https://github.com/creationix/nvm#installation\">nvm</a> (Node Version Manager), \nthen either install nvm now, or follow one of the workarounds on this external page: \n  [https://docs.npmjs.com/getting-started/fixing-npm-permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions)\n[block:html]\n{\n  \"html\": \"<!-- Out 7/20/17, `sudo` is inadvisable:\\nIf you receive a file-permissions error, and you did not install Node.js via <a href=\\\"https://github.com/creationix/nvm#installation\\\">nvm</a> (Node Version Manager), \\nthen either install nvm now, or precede the <span class=\\\"inline-code\\\">npm</span> command with <span class=\\\"inline-code\\\">sudo</span>:\\n\\n    <pre>sudo npm install -g @bigcommerce/stencil-cli</pre>\\n\\n    (If you do resort to <span class=\\\"inline-code\\\">sudo</span> here, you might be prompted for credentials when you later issue Stencil CLI commands.)\\n-->\"\n}\n[/block]\n* Stencil CLI requires Handlebars version 3.0.1 or higher, and installs a compatible version.\n\n* Once the <span class=\"inline-code\">npm install</span> command executes, you can ignore any deprecation warnings that begin with: \n`npm WARN deprecated...` . (This includes warnings about the <a href=\"https://github.com/hapijs/good-reporter\">good-reporter</a> interface.)\n[block:html]\n{\n  \"html\": \"<h2><A NAME=\\\"InstallVideo\\\"></a> Video Demo </h2>\\n\\nWatch Stencil senior developer Mick Ryan's brief demonstration of Stencil installation and launch:<br><p></p> \\n\\n<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/iWBrJalyM0A\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\\n\\n<!--  <iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/qQ6Nm9zPE7s\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>  -->\\n\\n<!-- [Registration deprecated upon open-sourcing:]\\n<h2> <A NAME=\\\"Register_jspm\\\"></a> Registering the jspm Instance </h2>\\n\\nNext, register your <A href=\\\"/docs/downloading-and-customizing-marketplace-themes#Register_jspm\\\">jspm</a> instance with GitHub.<br>\\n\\n<ol>\\n  <li>Navigate to your GitHub Personal Access Tokens page <NOBR(<a href=\\\"https://github.com/settings/tokens\\\">https://github.com/settings/tokens</a>).</nobr>\\n</li> <p></p>\\n\\n<li>\\n  Generate a new personal access token with the name <span class=\\\"inline-code\\\">Stencil</span> and scope <span class=\\\"inline-code\\\">repo</span>. (GitHub provides specific instructions here: <NOBR><a href=\\\"https://help.github.com/articles/generating-an-ssh-key/\\\">https://help.github.com/articles/generating-an-ssh-key/</a>.)</nobr>\\n</li> <p></p>\\n\\n<li>\\n  Verify that your new token includes the following scopes: \\n  \\n  <ul>\\n    <li><span class=\\\"inline-code\\\">repo:status</span>\\n    </li>\\n    <li><span class=\\\"inline-code\\\">repo_deployment</span>\\n    </li>\\n    <li><span class=\\\"inline-code\\\">public_repo</span>\\n    </li> \\n  </ul> \\n  \\n</li> <p></p>\\n\\n<li>Once you have generated your token, run the following command to associate your jspm module with your GitHub account:</li> <p></p>\\n\\n<pre>\\njspm registry config github\\n</pre>\\n<p></p>\\n\\n<li>You will be prompted to enter your authentication token (<span class=\\\"inline-code\\\">\\\"Set up GitHub credentials?\\\"</span>). Copy and paste the personal access token you created just above.</li>\\n</ol> \\n[:Registration deprecated upon open-sourcing] -->\\n\\n<!-- Add a note here: If downloading a marketplace theme, can skip ahead... -->\\n\\n<br><p></p>In the next step, you will <a href=\\\"/docs/adding-a-base-theme\\\">add</a> a Stencil base theme to your installation.\"\n}\n[/block]","excerpt":"","slug":"installing-stencil-cli-1","type":"basic","title":"Installing Stencil CLI/Framework"}

Installing Stencil CLI/Framework


[block:html] { "html": "This entry covers:\n<ul>\n\t<li><a href=\"#InstallingCLI\">Installing the Command-Line Interface</a></li>\n\t<li><a href=\"#npmFixes\">Known Issues</a></li>\n\t<li><a href=\"#InstallVideo\">Video Demo</a></li> \n<!-- <li><a href=\"#Register_jspm\">Registering the jspm Instance</a></li> -->\n</ul>\n \n<h2><A NAME=\"InstallingCLI\"></a>Installing the Command-Line Interface</h2>\n\nThe first step toward developing on Stencil is to install the Stencil CLI (command-line interface). You can do this via the following command:\n<br><p></p>\n\n<pre>npm install -g @bigcommerce/stencil-cli</pre>\n\n<!-- <A NAME=\"npmFixes\"> </a>\n[orange callout] (!) Notes-->" } [/block] [block:callout] { "type": "info", "body": "You will occasionally receive a command-line prompt to repeat the above step when you restart your Stencil server. Such required updates are rare; they occur when BigCommerce publishes a critical fix in Stencil CLI, to resolve an issue like a newly discovered security exploit.", "title": "Reinstallation Prompts" } [/block] ## <span id="npmFixes"> Known Issues </span> * The command above requires <a href="https://www.npmjs.com/">npm</a> to be installed in your local development environment. * In Windows, this <span class="inline-code">npm</span> command's execution might at times appear to freeze. However, the installer is running. Give it several minutes to complete installation. * On Mac OS machines with installed xcode, version 5.x, this <span class="inline-code">npm</span> command has generated errors of the form: <span class="inline-code">npm ERR! invalid: string_decoder</span>. The workaround is to upgrade xcode to the latest stable xcode version (7.3.1 as of this page's last revision). * If you receive a file-permissions error, and you did not install Node.js via <a href="https://github.com/creationix/nvm#installation">nvm</a> (Node Version Manager), then either install nvm now, or follow one of the workarounds on this external page: [https://docs.npmjs.com/getting-started/fixing-npm-permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) [block:html] { "html": "<!-- Out 7/20/17, `sudo` is inadvisable:\nIf you receive a file-permissions error, and you did not install Node.js via <a href=\"https://github.com/creationix/nvm#installation\">nvm</a> (Node Version Manager), \nthen either install nvm now, or precede the <span class=\"inline-code\">npm</span> command with <span class=\"inline-code\">sudo</span>:\n\n <pre>sudo npm install -g @bigcommerce/stencil-cli</pre>\n\n (If you do resort to <span class=\"inline-code\">sudo</span> here, you might be prompted for credentials when you later issue Stencil CLI commands.)\n-->" } [/block] * Stencil CLI requires Handlebars version 3.0.1 or higher, and installs a compatible version. * Once the <span class="inline-code">npm install</span> command executes, you can ignore any deprecation warnings that begin with: `npm WARN deprecated...` . (This includes warnings about the <a href="https://github.com/hapijs/good-reporter">good-reporter</a> interface.) [block:html] { "html": "<h2><A NAME=\"InstallVideo\"></a> Video Demo </h2>\n\nWatch Stencil senior developer Mick Ryan's brief demonstration of Stencil installation and launch:<br><p></p> \n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/iWBrJalyM0A\" frameborder=\"0\" allowfullscreen></iframe>\n\n<!-- <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/qQ6Nm9zPE7s\" frameborder=\"0\" allowfullscreen></iframe> -->\n\n<!-- [Registration deprecated upon open-sourcing:]\n<h2> <A NAME=\"Register_jspm\"></a> Registering the jspm Instance </h2>\n\nNext, register your <A href=\"/docs/downloading-and-customizing-marketplace-themes#Register_jspm\">jspm</a> instance with GitHub.<br>\n\n<ol>\n <li>Navigate to your GitHub Personal Access Tokens page <NOBR(<a href=\"https://github.com/settings/tokens\">https://github.com/settings/tokens</a>).</nobr>\n</li> <p></p>\n\n<li>\n Generate a new personal access token with the name <span class=\"inline-code\">Stencil</span> and scope <span class=\"inline-code\">repo</span>. (GitHub provides specific instructions here: <NOBR><a href=\"https://help.github.com/articles/generating-an-ssh-key/\">https://help.github.com/articles/generating-an-ssh-key/</a>.)</nobr>\n</li> <p></p>\n\n<li>\n Verify that your new token includes the following scopes: \n \n <ul>\n <li><span class=\"inline-code\">repo:status</span>\n </li>\n <li><span class=\"inline-code\">repo_deployment</span>\n </li>\n <li><span class=\"inline-code\">public_repo</span>\n </li> \n </ul> \n \n</li> <p></p>\n\n<li>Once you have generated your token, run the following command to associate your jspm module with your GitHub account:</li> <p></p>\n\n<pre>\njspm registry config github\n</pre>\n<p></p>\n\n<li>You will be prompted to enter your authentication token (<span class=\"inline-code\">\"Set up GitHub credentials?\"</span>). Copy and paste the personal access token you created just above.</li>\n</ol> \n[:Registration deprecated upon open-sourcing] -->\n\n<!-- Add a note here: If downloading a marketplace theme, can skip ahead... -->\n\n<br><p></p>In the next step, you will <a href=\"/docs/adding-a-base-theme\">add</a> a Stencil base theme to your installation." } [/block]