{"_id":"5608e87e8aedf50d0004cf9b","parentDoc":null,"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"},"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","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"},"__v":38,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T07:13:02.189Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:html]\n{\n  \"html\": \"<A NAME=\\\"Installing\\\"></a>This section's first few entries walk you through a basic, initial installation of <!--and launching--> the Stencil framework: <p></p> \\n\\n<ul>\\n <!-- <li><a href=\\\"/docs/stencil-setup-illustrated\\\"> Stencil Setup, Illustrated </a></li>\\n <li><a href=\\\"/docs/navigating-setup\\\"> Navigating Your Development Scenario </a></li> -->\\n <li><a href=\\\"/docs/prerequisites\\\">Prerequisites</a></li>\\n <li><a href=\\\"/docs/installing-stencil-cli-1\\\">Installing Stencil CLI/Framework</a></li>\\n <li><a href=\\\"/docs/adding-a-base-theme\\\">Adding a Base Theme</a>    \\t</li>\\n<li><a href=\\\"/docs/javascript-utilities\\\">Installing JavaScript Utilities</a>\\n  </li> \\n</ul>\\n\\nThe remaining entries will cover preparing store tokens, then launching your theme. <br><p></p>\\n\\n<!-- For reinstallation/refresh and custom installation scenarios, please see <a href=\\\"docs/advanced-installation-options\\\">Advanced Installation Options</a>. -->\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Notes\",\n  \"body\": \"* Our installation instructions have been tested on Mac OS X Yosemite, Linux/Ubuntu v.14.04.4, and Windows&#160;8. Dependencies for other platforms/releases will be added upon further testing.\\n\\n* On UNIX-based platforms (Mac OS X and Linux), an initial [Cornerstone-based setup](#clone) will typically take about 10–20 minutes, depending on your network connection and hardware. On Windows, you might need to allow substantial extra time – up to several hours – to [install Visual Studio](/docs/prerequisites#Node+npm_Win).\\n\\n* If you encounter any problems, please see the <a href=\\\"/docs/troubleshooting\\\">Troubleshooting</a> entry.\"\n}\n[/block]\n<span id=\"Prerequisites\"> </span>\n[block:html]\n{\n  \"html\": \"<!--\\n<h2> <a name=\\\"workflows\\\"></a> Installing for Your Development Scenario </h2>\\n\\n* [Initial Cornerstone-Based Setup](#clone)\\n* [Cornerstone Refresh](#refresh)\\n* [Downloaded Marketplace Theme](#download)\\n* [Custom Build System](#custbuild)\\n<br>\\n\\nBelow, each column identifies one theme-development scenario – running from simplest on the left to most-complex on the right – with the minimum installation steps you will need to support that scenario:\\n\\n| Installation Step for: | Initial Cornerstone-Based Setup | Cornerstone Refresh | Downloaded Marketplace&#160;Themes | Custom<br> Build System |\\n|---|---|---|---|---|\\n|   |   |   |   |   |\\n|  | (Start developing based on BigCommerce's default Cornerstone theme – uses&#160;Webpack) | (Download a Cornerstone refresh from BigCommerce's Theme Marketplace) | (Customize a theme downloaded from BigCommerce's Theme Marketplace – requires jspm) | (Bypass Webpack and jspm by substituting a custom build system) |\\n| **Prerequisites:** | [Install all prerequisites](/docs/prerequisites) | ([Assume all prerequisites installed](/docs/prerequisites)) | [Install all prerequisites](/docs/prerequisites) | [Install all prerequisites](/docs/prerequisites) |\\n| **Framework:** | [Install Stencil CLI](/docs/installing-stencil-cli-1) | ([Assume Stencil CLI installed](/docs/installing-stencil-cli-1)) | [Install Stencil CLI](/docs/installing-stencil-cli-1) | [Install Stencil CLI](/docs/installing-stencil-cli-1) | \\n| **Theme:** | [Add default Cornerstone theme](/docs/adding-a-base-theme) | [Download fresh Cornerstone .zip](/docs/downloading-and-refreshing-cornerstone) | [Set up jspm and BitBucket, then download .zip](/docs/downloading-and-customizing-marketplace-themes) | [Add default Cornerstone theme](/docs/adding-a-base-theme) |\\n| **Refresh JavaScript Dependencies:** | – | [Run npm install](/docs/downloading-and-refreshing-cornerstone#install_npm) | [Run jspm install](/docs/downloading-and-customizing-marketplace-themes#install_jspm) | – | \\n| **JavaScript Utilities:** | [Install JavaScript Utilities](/docs/javascript-utilities) |  – | [Install JavaScript Utilities](/docs/javascript-utilities) | [Install JavaScript Utilities](/docs/javascript-utilities) | \\n| **Installation Wrap-Up:** | Proceed to [Launching&#160;Stencil](/docs/launching-stencil) |  Repeat [Launching&#160;Stencil](/docs/launching-stencil) | Proceed to [Launching&#160;Stencil](/docs/launching-stencil) | [Configure your custom build system](/docs/webpack-and-build-options). <br> Then proceed to [Launching&#160;Stencil](/docs/launching-stencil). |\\n\\n<h2> <a name=\\\"wrap\\\"></a> Looking Ahead </h2>\\n\\nOnce you've installed your Stencil theme, this section's remaining entries cover <a href=\\\"/docs/launching-stencil\\\">Launching Stencil</a>.\\n\\n-->\"\n}\n[/block]","excerpt":"","slug":"installing-and-launching-stencil-1","type":"basic","title":"Installing Stencil"}

Installing Stencil


[block:html] { "html": "<A NAME=\"Installing\"></a>This section's first few entries walk you through a basic, initial installation of <!--and launching--> the Stencil framework: <p></p> \n\n<ul>\n <!-- <li><a href=\"/docs/stencil-setup-illustrated\"> Stencil Setup, Illustrated </a></li>\n <li><a href=\"/docs/navigating-setup\"> Navigating Your Development Scenario </a></li> -->\n <li><a href=\"/docs/prerequisites\">Prerequisites</a></li>\n <li><a href=\"/docs/installing-stencil-cli-1\">Installing Stencil CLI/Framework</a></li>\n <li><a href=\"/docs/adding-a-base-theme\">Adding a Base Theme</a> \t</li>\n<li><a href=\"/docs/javascript-utilities\">Installing JavaScript Utilities</a>\n </li> \n</ul>\n\nThe remaining entries will cover preparing store tokens, then launching your theme. <br><p></p>\n\n<!-- For reinstallation/refresh and custom installation scenarios, please see <a href=\"docs/advanced-installation-options\">Advanced Installation Options</a>. -->" } [/block] [block:callout] { "type": "warning", "title": "Notes", "body": "* Our installation instructions have been tested on Mac OS X Yosemite, Linux/Ubuntu v.14.04.4, and Windows&#160;8. Dependencies for other platforms/releases will be added upon further testing.\n\n* On UNIX-based platforms (Mac OS X and Linux), an initial [Cornerstone-based setup](#clone) will typically take about 10–20 minutes, depending on your network connection and hardware. On Windows, you might need to allow substantial extra time – up to several hours – to [install Visual Studio](/docs/prerequisites#Node+npm_Win).\n\n* If you encounter any problems, please see the <a href=\"/docs/troubleshooting\">Troubleshooting</a> entry." } [/block] <span id="Prerequisites"> </span> [block:html] { "html": "<!--\n<h2> <a name=\"workflows\"></a> Installing for Your Development Scenario </h2>\n\n* [Initial Cornerstone-Based Setup](#clone)\n* [Cornerstone Refresh](#refresh)\n* [Downloaded Marketplace Theme](#download)\n* [Custom Build System](#custbuild)\n<br>\n\nBelow, each column identifies one theme-development scenario – running from simplest on the left to most-complex on the right – with the minimum installation steps you will need to support that scenario:\n\n| Installation Step for: | Initial Cornerstone-Based Setup | Cornerstone Refresh | Downloaded Marketplace&#160;Themes | Custom<br> Build System |\n|---|---|---|---|---|\n| | | | | |\n| | (Start developing based on BigCommerce's default Cornerstone theme – uses&#160;Webpack) | (Download a Cornerstone refresh from BigCommerce's Theme Marketplace) | (Customize a theme downloaded from BigCommerce's Theme Marketplace – requires jspm) | (Bypass Webpack and jspm by substituting a custom build system) |\n| **Prerequisites:** | [Install all prerequisites](/docs/prerequisites) | ([Assume all prerequisites installed](/docs/prerequisites)) | [Install all prerequisites](/docs/prerequisites) | [Install all prerequisites](/docs/prerequisites) |\n| **Framework:** | [Install Stencil CLI](/docs/installing-stencil-cli-1) | ([Assume Stencil CLI installed](/docs/installing-stencil-cli-1)) | [Install Stencil CLI](/docs/installing-stencil-cli-1) | [Install Stencil CLI](/docs/installing-stencil-cli-1) | \n| **Theme:** | [Add default Cornerstone theme](/docs/adding-a-base-theme) | [Download fresh Cornerstone .zip](/docs/downloading-and-refreshing-cornerstone) | [Set up jspm and BitBucket, then download .zip](/docs/downloading-and-customizing-marketplace-themes) | [Add default Cornerstone theme](/docs/adding-a-base-theme) |\n| **Refresh JavaScript Dependencies:** | – | [Run npm install](/docs/downloading-and-refreshing-cornerstone#install_npm) | [Run jspm install](/docs/downloading-and-customizing-marketplace-themes#install_jspm) | – | \n| **JavaScript Utilities:** | [Install JavaScript Utilities](/docs/javascript-utilities) | – | [Install JavaScript Utilities](/docs/javascript-utilities) | [Install JavaScript Utilities](/docs/javascript-utilities) | \n| **Installation Wrap-Up:** | Proceed to [Launching&#160;Stencil](/docs/launching-stencil) | Repeat [Launching&#160;Stencil](/docs/launching-stencil) | Proceed to [Launching&#160;Stencil](/docs/launching-stencil) | [Configure your custom build system](/docs/webpack-and-build-options). <br> Then proceed to [Launching&#160;Stencil](/docs/launching-stencil). |\n\n<h2> <a name=\"wrap\"></a> Looking Ahead </h2>\n\nOnce you've installed your Stencil theme, this section's remaining entries cover <a href=\"/docs/launching-stencil\">Launching Stencil</a>.\n\n-->" } [/block]