{"_id":"5608e5096d8c440d000c79f3","__v":27,"parentDoc":null,"project":"55a6e72e8cc73e0d00096635","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"},"user":"55a6caa022cfa321008e01d6","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T06:58:17.776Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":16,"body":"[block:html]\n{\n  \"html\": \"<A NAME=\\\"RunningLocally\\\"></a>With the Stencil framework, you can develop and test out your new storefront code locally, by reference <!--while applying it--> to an active production storefront. This allows you to use standard development practices when customizing a storefront, without having to install a complete instance of a development storefront on your machine.<br>\\n\\n<p></p>Stencil simply references the production storefront of your choice, and allows you to actively develop in your local environment without touching any production code.<br>\\n\\n<p></p>This entry covers:\\n\\n<ul>\\n <li><a href=\\\"#StartThemeOnly\\\">Local Launch: Theme Only</a></li>\\n <li><a href=\\\"#TokenErrors\\\">Troubleshooting Token Errors</a></li>\\n   <li><a href=\\\"#StartTheme+Editor\\\">Local Launch: Theme and Theme Editor</a></li>\\n <li><a href=\\\"#ChgThemeEdPort\\\">Customizing Theme Editor's Port</a></li>\\n <li><a href=\\\"#StartNoCache\\\">Local Launch: Disabling Caching</a></li>\\n</ul>\\n\\n<H2> <A NAME=\\\"StartThemeOnly\\\"></a> Local Launch: Theme Only </h2>\\n\\nIn order to run Stencil locally, issue the following command in your <!-- newly--> initialized Stencil theme directory:<br><p></p>\\n\\n<pre>stencil start</pre>\\n\\nAssuming that you set Stencil to run on port 3000, when you go to <a href=\\\"http://localhost:3000\\\">http://localhost:3000</a>, you should see the storefront to which you pointed your local instance &ndash; but with the stencil theme applied to it.\\n\\n<H3> <A NAME=\\\"TokenErrors\\\"></a> Troubleshooting Token Errors </h3>\\n\\nIf you receive the following error message, then store token authentication has failed:<br><p></p>\\n<pre>Unauthorized, please use a valid username/token</pre>\\n\\nIn this case, please review these steps:\\n<ul>\\n<li> <a href=\\\"/docs/creating-an-api-account\\\">Creating an API Account</a>: How to issue or reissue tokens in the BigCommerce control panel.</li>\\n <li><a href=\\\"/docs/initializing-stencil\\\">Authorizing and  Initializing Stencil</a>: How to initialize Stencil with your username and token.</li>\\n</ul>\\n  \\nIf you cannot create a valid token in the control panel, please contact your BigCommerce account manager to resolve the problem.\\n\\n<H2> <A NAME=\\\"StartTheme+Editor\\\"></a> Local Launch: Theme and Theme Editor </h2>\\n\\nTo run Stencil locally while also launching a local version of <a href=\\\"/docs/what-is-theme-editor\\\">Theme Editor</a>, start in the same directory, but append the <span class=\\\"inline-code\\\">-e</span> option:<br><p></p>\\n\\n<pre>stencil start -e</pre>\\n\\nThe Theme Editor server will run in parallel with the stencil theme, by default at: <a href=\\\"http://localhost:8181\\\">http://localhost:8181</a>.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Browser Support Restriction (Temporary): Chrome\",\n  \"body\": \"Theme Editor's initial release has been tested only on the Chrome browser.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<H3> <A NAME=\\\"ChgThemeEdPort\\\"></a> Customizing Theme Editor's Port </h3>\\n\\nYou can override Theme Editor's default port by appending the \\\"--theme-editor-port [port]\\\" option. For example, to specify port 9000, you would enter:<br><p></p>\\n\\n<pre>stencil start -e --theme-editor-port 9000</pre>\\n\\nTo verify Theme Editor's launch, you would then go to <a href=\\\"http://localhost:9000\\\">http://localhost:9000</a>. Using this option, you can specify any port between 1024 and 65535 without sudo.\\n\\n<H3> About Theme Editor </h3>\\n\\nTheme Editor is a friendly user interface that allows BigCommerce merchants to modify their storefront's look and feel without coding. Users customize their storefront by selecting among graphical examples and menu options. This local version of Theme Editor enables you to rapidly build and preview the UI controls that you want to offer merchants for your theme. For details, please see the <a href=\\\"/docs/what-is-theme-editor\\\">Theme Editor overview</a> and configuration examples.\\n\\n\\n<H2> <A NAME=\\\"StartNoCache\\\"></a> Local Launch: Disabling Caching </h2>\\n\\nBy default, Stencil caches API resource data per storefront page. This minimizes server traffic while you develop your theme locally.<br><p></p>\\n\\nIf you prefer to see your changes reflected immediately in your live store, you can turn off caching by appending the <NOBR><span class=\\\"inline-code\\\">--no-cache</span></nobr> or <NOBR><span class=\\\"inline-code\\\">-n</span></nobr> option:<br><p></p>\\n\\n<pre>stencil start --no-cache</pre>\\n\\n<pre>stencil start -n</pre>\\n\\n<p></p>To re-enable caching, restart Stencil, this time omitting the <NOBR><span class=\\\"inline-code\\\">--no-cache</span></nobr> or <NOBR><span class=\\\"inline-code\\\">-n</span></nobr> option.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"If you have started Stencil with your selected options, and now see your storefront on your selected port, you&#160;can skip this section's remaining troubleshooting and reference pages. \\n\\nFor a quick hands-on tutorial covering the basics of Stencil theme development, proceed directly to the [Development Quick Start](/docs/developing-on-the-stencil-framework-quick-start) section.\",\n  \"title\": \"Successful Launch?\"\n}\n[/block]","excerpt":"","slug":"running-stencil-locally","type":"basic","title":"Running Stencil Locally"}

Running Stencil Locally


[block:html] { "html": "<A NAME=\"RunningLocally\"></a>With the Stencil framework, you can develop and test out your new storefront code locally, by reference <!--while applying it--> to an active production storefront. This allows you to use standard development practices when customizing a storefront, without having to install a complete instance of a development storefront on your machine.<br>\n\n<p></p>Stencil simply references the production storefront of your choice, and allows you to actively develop in your local environment without touching any production code.<br>\n\n<p></p>This entry covers:\n\n<ul>\n <li><a href=\"#StartThemeOnly\">Local Launch: Theme Only</a></li>\n <li><a href=\"#TokenErrors\">Troubleshooting Token Errors</a></li>\n <li><a href=\"#StartTheme+Editor\">Local Launch: Theme and Theme Editor</a></li>\n <li><a href=\"#ChgThemeEdPort\">Customizing Theme Editor's Port</a></li>\n <li><a href=\"#StartNoCache\">Local Launch: Disabling Caching</a></li>\n</ul>\n\n<H2> <A NAME=\"StartThemeOnly\"></a> Local Launch: Theme Only </h2>\n\nIn order to run Stencil locally, issue the following command in your <!-- newly--> initialized Stencil theme directory:<br><p></p>\n\n<pre>stencil start</pre>\n\nAssuming that you set Stencil to run on port 3000, when you go to <a href=\"http://localhost:3000\">http://localhost:3000</a>, you should see the storefront to which you pointed your local instance &ndash; but with the stencil theme applied to it.\n\n<H3> <A NAME=\"TokenErrors\"></a> Troubleshooting Token Errors </h3>\n\nIf you receive the following error message, then store token authentication has failed:<br><p></p>\n<pre>Unauthorized, please use a valid username/token</pre>\n\nIn this case, please review these steps:\n<ul>\n<li> <a href=\"/docs/creating-an-api-account\">Creating an API Account</a>: How to issue or reissue tokens in the BigCommerce control panel.</li>\n <li><a href=\"/docs/initializing-stencil\">Authorizing and Initializing Stencil</a>: How to initialize Stencil with your username and token.</li>\n</ul>\n \nIf you cannot create a valid token in the control panel, please contact your BigCommerce account manager to resolve the problem.\n\n<H2> <A NAME=\"StartTheme+Editor\"></a> Local Launch: Theme and Theme Editor </h2>\n\nTo run Stencil locally while also launching a local version of <a href=\"/docs/what-is-theme-editor\">Theme Editor</a>, start in the same directory, but append the <span class=\"inline-code\">-e</span> option:<br><p></p>\n\n<pre>stencil start -e</pre>\n\nThe Theme Editor server will run in parallel with the stencil theme, by default at: <a href=\"http://localhost:8181\">http://localhost:8181</a>." } [/block] [block:callout] { "type": "warning", "title": "Browser Support Restriction (Temporary): Chrome", "body": "Theme Editor's initial release has been tested only on the Chrome browser." } [/block] [block:html] { "html": "<H3> <A NAME=\"ChgThemeEdPort\"></a> Customizing Theme Editor's Port </h3>\n\nYou can override Theme Editor's default port by appending the \"--theme-editor-port [port]\" option. For example, to specify port 9000, you would enter:<br><p></p>\n\n<pre>stencil start -e --theme-editor-port 9000</pre>\n\nTo verify Theme Editor's launch, you would then go to <a href=\"http://localhost:9000\">http://localhost:9000</a>. Using this option, you can specify any port between 1024 and 65535 without sudo.\n\n<H3> About Theme Editor </h3>\n\nTheme Editor is a friendly user interface that allows BigCommerce merchants to modify their storefront's look and feel without coding. Users customize their storefront by selecting among graphical examples and menu options. This local version of Theme Editor enables you to rapidly build and preview the UI controls that you want to offer merchants for your theme. For details, please see the <a href=\"/docs/what-is-theme-editor\">Theme Editor overview</a> and configuration examples.\n\n\n<H2> <A NAME=\"StartNoCache\"></a> Local Launch: Disabling Caching </h2>\n\nBy default, Stencil caches API resource data per storefront page. This minimizes server traffic while you develop your theme locally.<br><p></p>\n\nIf you prefer to see your changes reflected immediately in your live store, you can turn off caching by appending the <NOBR><span class=\"inline-code\">--no-cache</span></nobr> or <NOBR><span class=\"inline-code\">-n</span></nobr> option:<br><p></p>\n\n<pre>stencil start --no-cache</pre>\n\n<pre>stencil start -n</pre>\n\n<p></p>To re-enable caching, restart Stencil, this time omitting the <NOBR><span class=\"inline-code\">--no-cache</span></nobr> or <NOBR><span class=\"inline-code\">-n</span></nobr> option." } [/block] [block:callout] { "type": "info", "body": "If you have started Stencil with your selected options, and now see your storefront on your selected port, you&#160;can skip this section's remaining troubleshooting and reference pages. \n\nFor a quick hands-on tutorial covering the basics of Stencil theme development, proceed directly to the [Development Quick Start](/docs/developing-on-the-stencil-framework-quick-start) section.", "title": "Successful Launch?" } [/block]